Instagram 基本显示 API

Question

最终目标：将我们公司帐户的 Instagram 媒体显示到我们的公司网站上。下面，我将展示我目前所拥有的一切。

我已批准 Instagram 基本权限：
我已使用具有适当权限的 Instagram 帐户对 Facebook 应用程序进行身份验证。

问题：

如果我使用的是 Instagram Basic Display API，我还需要一个实施了 SDK 的网站平台吗？
如果我只使用一个帐户在公司网站上显示媒体，是否需要 Facebook 登录？

Answer 1

答案：是和是...

但是，如果您允许一些开箱即用的想法，您的最终目标是 8 行 Javascript 和 4 行 CSS。它不是最漂亮的解决方案，功能也有限，但它确实很简单。看看 the example and installation instructions.

The solution I came up with is actually quite simple: fully split the server-side and client-side part and use XML(RSS) as an intermediate. For the server-side part I used Zapier (for free). Zapier authenticates with Instagram and gets the required long lived access token. Using this token it listens to the users feed on a five minute interval. When it discovers a new post/image, it adds this to a Zapier RSS feed that has nothing to do with Instagram. Zapier takes care of the CORS policy on the RSS feed. Therefore, we only have to visualize the RSS feed. This requires just a few lines of Javascript and a touch of CSS.

<p id="instafeed"></p>

<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
$.get('https://zapier.com/engine/rss/2502510/jhvanderschee', function (data) {
    $(data).find("item").each(function () { // or "item" or whatever suits your feed
        var el = $(this);
        var title = el.find("title").text();
        var link = el.find("link").text();
        var image = el.find("enclosure").attr('url');
        var description = el.find("description").text();
        $('#instafeed').append('<a href="'+encodeURI(link)+'" target="_blank" title="'+title.replace('Caption: ','')+'"><img src="'+encodeURI(image)+'" alt="'+title.replace('Caption: ','')+'" /></a>');
    });
});
</script>

<style>
    #instafeed {overflow: auto; margin-left: -1%;}
    #instafeed a {float: left; display: block; margin: 0 0 1% 1%; width: 19%;}
    #instafeed a img {width: 100%;}
</style>

来源：Instafeed.js alternative (for Instagram)

Instagram 基本显示 API

Instagram Basic Display API

instagram

instagram-api