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)