最终目标:在公司网站上显示我们公司帐户的Instagram媒体。在下面,我将显示到目前为止的所有内容。
问题:
答案 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>