Question

我尝试使用Instagram API将特定用户的最新帖子加载到页面。根据API文档，仅使用所需图片的短链接，oEmbed响应应包含您点击＆＃34;嵌入＆＃34;时所获得的所有内容。链接图片本身。

这是我的代码：

window.onload = function () {
    var insta = new XMLHttpRequest();
    var embed = document.getElementById('embed');
    insta.open("GET",   "https://api.instagram.com/v1/users/user/media/recent/?access_token=my-token");
    insta.send();
    insta.addEventListener("load", function(){
        var jsonResponse = JSON.parse(insta.responseText);
        var lastImageLink = jsonResponse.data[0].link;
        var shortCode = lastImageLink.split("/p/")[1];
        var url = "https://api.instagram.com/oembed?url=http://instagr.am/p/" + shortCode;
        var getLatest = new XMLHttpRequest;
        getLatest.open("GET", url);
        getLatest.send()
        getLatest.addEventListener("load", function(){
            getLatest = JSON.parse(getLatest.responseText);
            embed.innerHTML = getLatest.html;
        });
    });
};

所以我做一个GET请求获取最后一篇文章的链接，从中获取短链接后缀，然后使用该短链接执行另一个GET请求，通过oEmbed方法获取嵌入代码。但是，当我加载页面时，我看到的就是这样：

我尝试过的事情：

*我知道API依赖于embeds.js库，因此我将其移至html doc的头部并使其同步加载。结果没有变化。

*加载与最新帖子不同的不同图片。那里也没有变化。

这就是我所能想到的一切。我有什么理由不能用我正在做的事情获得完整的嵌入式帖子吗？

谢谢！

Answer 1

使用iframe嵌入来加载图片，如下所示：

<iframe src="https://www.instagram.com/p/8_kRtJBsBq/embed" width="400" height="480" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

不要使用API来获取嵌入代码，只需获取短代码并替换上面的iframe代码段。

您可以在此处生成Instagram iframe嵌入代码并预览：http://www.gramfeed.com/instagram/embed#https://www.instagram.com/p/8_kRtJBsBq/

Answer 2

对于那些仍然遇到此问题的人。发生这种情况是因为设置容器的innerHTML不会导致包含的标签加载其源，因此Instagram embed.js永远不会被加载，并且嵌入不能正常处理。

您需要以下内容：

包括https://platform.instagram.com/en_US/embeds.js
在将容器的innerHTML设置为oembed数据的html字段后调用instgrm.Embeds.process（）。
可选，但建议：将omitscript = true参数添加到oembed请求中。顾名思义，这省略了返回html中的标记。

不需要访问令牌，您可以使用单个XMLHttpRequest，如下所示：

<script src="https://platform.instagram.com/en_US/embeds.js"></script>
<script>

    var url = "https://api.instagram.com/oembed?omitscript=true&url=http://instagr.am/p/" + shortCode;
    var embed = document.getElementById('embed');
    var req = new XMLHttpRequest;
    req.open("GET", url);
    req.send()
    req.addEventListener("load", function(){
        parsed = JSON.parse(req.responseText);
        embed.innerHTML = parsed.html;
        instgrm.Embeds.process(); // DON'T FORGET THIS
    });

</script>

我已经让代码很容易专注于这个问题，但是当然要确保在调用instgrm.Embeds.process（）之前正确加载了embed.js。

Answer 3

您需要在insta回调函数中包含条件：

insta.onload = function() {
    if (insta.readyState === 4) {
        if (insta.status === 200) {
            //do some stuff
        }
    }
}

readystate可让您知道您的请求所处的状态。正如您所看到的here，有5个可能的值，最后一个为4或DONE。你不希望你的回调运行直到它达到最终状态。第二个条件是检查服务器响应的类型。如果它是200（成功），您希望它执行您的成功代码。如果服务器响应页面未找到错误，您还需要检查404并执行一些损坏控制。

同样，在第11行中，确保您正确地声明了您的变量：您的构造函数需要括号：var getLatest = new XMLHttpRequest();

oEmbed仅加载Instagram帖子的标题

3 个答案: