oEmbed仅加载Instagram帖子的标题

Question

我正在尝试使用Instagram API将特定用户的最新帖子加载到页面。根据API文档，只使用所需图片的快捷链接，oEmbed响应应该包含您单击图片本身上的"embed“链接时所得到的所有内容。

下面是我的代码：

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文档的头部，并使其同步加载。结果没有变化。

*加载除最新帖子外的不同图片。这里也没有什么变化。

这就是我能想到的一切。有没有什么原因，我不能获得完整的嵌入式帖子与我正在做的？

谢谢!

Answer 1

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

您需要以下内容：

在将容器的embed.js设置为oembed数据的html field.

• Optional，之后，

1. 包含来自oembed instgrm.Embeds.process()的instagram embed.js，但建议:将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 2

使用iframe embed加载图像，如下所示：

<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 3

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

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

readystate可以让你知道你的请求处于什么状态。正如您看到的here，有5个可能的值，其中最后一个是4或完成。在回调到达最终状态之前，您不希望它运行。第二个条件是检查服务器响应的类型。如果它是200 (成功)，您希望它执行您的成功代码。您还需要检查404，并在服务器响应页面未找到错误时进行一些损害控制。

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