嵌入Instagram源 [英] Embed an instagram feed
本文介绍了嵌入Instagram源的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我只是想在CMS网站上添加一个Instagram提要-我有一个API代码/密钥可以使用-但是Instagram的说明完全没有意义。我可以看到如何嵌入一个帖子-但不是整个提要(我不是开发人员,所以我不知道如何编写get/ombed查询-但如果我有代码狙击器,我可以更改它!)
我只需要代码,因为我想我可以将其更改为相关的instragram帐户
https://www.instagram.com/developer/embedding/
推荐答案
Here是关于如何在您的网站上显示Instagram源的好帖子的链接。本文的某些部分包括javascript,但作者试图使其尽可能简单。主要的javascript代码是:
var request = new XMLHttpRequest();
request.open('GET', 'https://api.instagram.com/v1/users/self/media/recent/?access_token=ENTER-YOUR-ACCESS-TOKEN-HERE&count=8', true);
request.onload = function(container) {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
for (var i=0;i < data.data.length;i++) {
var container = document.getElementById('insta-feed');
var imgURL = data.data[i].images.standard_resolution.url;
console.log(imgURL);
var div = document.createElement('div');
div.setAttribute('class','instapic');
container.appendChild(div);
var img = document.createElement('img');
img.setAttribute('src',imgURL)
div.appendChild(img);
}
console.log(data);
} else { }
};
request.onerror = function() {
//There was a connection error of some sort
};
request.send();
此代码将Instagram图像添加到id为"insta-feed"的html div中。因此,您需要将以下html添加到您的页面:
<div id="insta-feed"></div>
使用jQuery的类似代码为:
$.get("https://api.instagram.com/v1/users/self/media/recent/?access_token=ENTER-YOUR-ACCESS-TOKEN-HERE&count=8", function (result) {
var html = "";
for (var i = 0; i < result.data.length; i++) {
html += "<div><img src='" + result.data[i].images.standard_resolution.url + "' /></div>";
}
$("#insta-feed").html(html);
});
这篇关于嵌入Instagram源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文