Instagram基本显示API [英] Instagram Basic Display API

问题描述

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

The ultimate goal: display our corporate account's Instagram media onto our corporate website. Below, I will show everything that I have so far.

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

1. I have the Instagram basic permissions approved:

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

I have the Facebook app authenticated with the Instagram account with the appropriate permissions.

问题:

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

推荐答案

答案:是和是...

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

However, your ultimate goal is 8 lines of Javascript and 4 lines of CSS away if you allow some out of the box thinking. It is not the most beautiful solution and it has limited features, but it is really simple. Just look at the example and installation instructions.

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

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替代品(适用于Instagram)

这篇关于Instagram基本显示API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！