Instagram基本显示API

Question

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

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

   

2. 我已使用适当的权限通过Instagram帐户对Facebook应用进行身份验证。

   

问题：

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

Answer 1

答案：是和是...

但是，如果您允许开箱即用的思考，那么最终目标是8行Javascript和4行CSS。它不是最漂亮的解决方案，它的功能有限，但确实很简单。

我想出的解决方案实际上非常简单：将服务器端和客户端部分完全分开，并使用XML（RSS）作为中间层。对于服务器端，我使用了Zapier（免费）。 Zapier向Instagram进行身份验证，并获取所需的长期访问令牌。使用此令牌，它每隔五分钟监听一次用户提要。当发现新帖子/图像时，会将其添加到与Instagram无关的Zapier RSS feed中。 Zapier负责RSS feed上的CORS策略。因此，我们只需要可视化RSS feed。这只需要几行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 alternative (for Instagram)