Instagram 基本显示 API

Question

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

1. 我已批准 Instagram 基本权限：

   

2. 我已使用具有适当权限的 Instagram 帐户对 Facebook 应用程序进行了身份验证。

   

问题：

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

Answer 1

答案是：是的，是的……

然而，如果您允许一些开箱即用的思考，您的最终目标是 8 行 Javascript 和 4 行 CSS。它不是最漂亮的解决方案，并且功能有限，但它确实很简单。只需查看示例和安装说明即可。

我想出的解决方案其实很简单：将服务器端和客户端部分完全拆分，并使用XML(RSS)作为中间。对于服务器端部分，我使用了 Zapier（免费）。Zapier 通过 Instagram 进行身份验证并获取所需的长期访问令牌。使用此令牌，它会每隔五分钟监听用户的反馈。当它发现新的帖子/图片时，它会将其添加到与 Instagram 无关的 Zapier RSS 源中。Zapier 负责 RSS 提要上的 CORS 政策。因此，我们只需可视化 RSS 提要即可。只需要几行 Javascript 和一些 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 替代方案（适用于 Instagram）