Instagram 基本显示 API答案

【问题标题】：Instagram Basic Display APIInstagram 基本显示 API
【发布时间】：2019-11-19 22:11:53
【问题描述】：

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

我的 Instagram 基本权限已获批准：
我的 Facebook 应用已通过具有适当权限的 Instagram 帐户进行身份验证。

问题：

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

【问题讨论】：

stackoverflow.com/questions/59526137/…

标签： instagram instagram-api

【解决方案1】：

答案：是的，是的……

但是，如果您允许一些开箱即用的想法，您的最终目标是 8 行 Javascript 和 4 行 CSS。它不是最漂亮的解决方案，而且功能有限，但它真的很简单。看看the example and installation instructions。

我想出的解决方案其实很简单：完全拆分服务器端和客户端部分，使用 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 alternative (for Instagram)

【讨论】：

非常感谢@JoostS，效果很好！为迟到的后续行动道歉。如果有道理，请您支持我的问题:)
请注意，我将实现更改为符合 GDPR 的...
我确实看到了 - 自 2 月以来我获得了更多知识并考虑了 GDPR - 这在此期间帮助很大。
太棒了。我已经赞成你的问题。不幸的是，每个问题我只有一个。
夏天的情况发生了很大变化。由于隐私保护无效，从 Instagram 加载图像很可能不符合 GDPR。这就是为什么我不使用替代解决方案 (instafeed.io)。