为什么instagram嵌入代码只显示instagram图标，而不是图像？

Question

我想将我的Instagram帐户中的照片嵌入到我的博客中。我认为从照片中复制嵌入代码，将其粘贴到我的编辑器中然后关闭就是一个简单的例子。 但事实并非如此。从截图中可以看出，我得到了照片信息，但没有照片。

如果我只是将图像标签放入html中，图像完美而不是Instagram照片的风格。

即。

<img src="https://www.instagram.com/p/BFbPlbwIceD" />

有没有人知道为什么嵌入代码不起作用。我也在一个简单的html文件中尝试了嵌入代码，它也不起作用，所以它不是我的CMS导致问题，这是Umbraco。

Answer 1

（以下答案仅适用于没有服务器的本地html文件）

我遇到了同样的问题，并注意到嵌入代码中的这一行：

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

当我将方案（＆＃34; http＆＃34;）添加到源中时，如下所示，图像显示正确。

<script async defer src="http://platform.instagram.com/en_US/embeds.js"></script>

希望这有帮助。

Answer 2

我有同样的问题。在反应中，你必须处理嵌入，如：

componentDidMount() {
  window.instgrm.Embeds.process();
}

这适合我！

Answer 3

该问题已被报道。

似乎是一个不易修复的已知问题： http://issues.umbraco.org/issue/U4-8646

Answer 4

问题的原因是

<script async src="//www.instagram.com/embed.js"></script>

在

之前运行

<blockquote>...</blockquote>

存在于DOM中。这意味着该脚本在加载时找不到任何要变成iframe的块引用。

由于脚本被标记为异步，因此您可能会遇到竞争状况，在每次刷新时您将获得不同的加载顺序。

您需要确保在出现引号后加载脚本。将脚本部分移到文档末尾。或者，如果以后使用JS将DOM添加到DOM中，也可以运行

instgrm.Embeds.process()

确定在DOM中之后。

来源：https://www.instagram.com/developer/embedding/

Answer 5

我这样做。

在index.html中导入脚本

<script async src="http://www.instagram.com/embed.js" type="text/javascript"></script>

和

useEffect(() => {
    if (window.instgrm)
        window.instgrm.Embeds.process();
    }, [articleId]);

这对我有用。

Answer 6

Instagram API可能已被更改，有人报告了类似问题，Tweets最近也没有正确嵌入。使用某些报告步骤将其记录为http://issues.umbraco.org.uk上的问题，并希望有人能够解决此问题。

我刚刚接受过测试，它也为我做了同样的事。

Answer 7

我遇到了这个问题并最终发现，如果你只是在编辑器中单独通过一行上的url，那么较新版本的wordpress会自动嵌入图像或视频。我怀疑这是一个非常新近的添加，因为我不得不搜索一下才能找到它。例如，我在此页面上使用它将Instagram视频添加到帖子：http://blog.pokefind.com/awesome-pokemon-go-functioning-costume/

Answer 8

信不信由你 - 我想我已经解决了这个问题。 只需添加此行

即可

<iframe style="display:none"></iframe>

代码，一切都会完美无缺。

Answer 9

我要晚一点，但是目前这个问题似乎仍然在许多站点上发生。

在我自己的站点上进行了一些研究之后，我注意到加载控制台中的错误。按照错误中的链接将我带到以下位置

https://www.instagram.com//www.instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js

显然，该页面未加载js，因为它不是正确的网络链接。

要解决此问题，请在嵌入的底部替换此行

<script async src="//www.instagram.com/embed.js"></script>

与此

<script async src="https://instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js"></script>

目前可以正常使用，但是如果他们再次更改js网址，则可能会断开链接。

它应该现在出现。