Instagram基本显示API

时间:2019-11-19 22:11:53

标签: instagram instagram-api

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

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

    enter image description here

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

    enter image description here

问题:

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

1 个答案:

答案 0 :(得分:1)

答案:是和是...

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

我想出的解决方案实际上非常简单:将服务器端和客户端部分完全分开,并使用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)