instagram - 嵌入 Instagram 提要

Question

我只想在 cms 网站上添加一个 instagram 提要 - 我有一个 api 代码/ key 可以使用 - 但 instagram 说明完全没有意义。我可以看到如何嵌入一个帖子 - 但不是整个提要(我不是开发人员，所以我不明白如何编写获取/ombed 查询 - 但如果我有一个代码剪辑器，我可以改变它!)

我只需要代码，因为我认为我可以将其更改为相关的 instragram 帐户

https://www.instagram.com/developer/embedding/

Answer 1

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);
});