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

Question

我想将我的 Instagram 帐户中的一张照片嵌入到我的博客中。我认为这将是一个简单的案例，从照片中复制嵌入代码，将其粘贴到我的编辑器中，然后我就可以开始了。但这似乎并非如此。正如您从屏幕截图中看到的那样，我获得了照片信息但没有照片。

如果我只在 html 中添加一个图片标签，那么图片鞋子会很完美，但不是 Instagram 照片的风格。

即

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

有没有人知道为什么嵌入代码不起作用。我也试过在普通 html 文件中嵌入代码，但它也不起作用，所以导致问题的不是我的 CMS，而是 Umbraco。

Answer 1

可能是 Instagram API 被更改了，最近有人报告了类似的问题，推文没有正确嵌入。通过一些报告步骤将其记录为 http://issues.umbraco.org.uk 上的问题，希望有人能够修复它。

我刚刚测试过，它对我也是如此。

Answer 2

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

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

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

当我将方案 ("http") 添加到源中时，图像正确显示。

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

希望对您有所帮助。

Answer 3

问题已报告。

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

Answer 4

我运行解决了这个问题，并最终发现如果您在编辑器中单独在一行中通过 url ，则较新版本的 wordpress 将自动嵌入图像或视频.我怀疑这是最近添加的，因为我不得不搜索一段时间才能找到它。例如，我在此页面上使用它来将 Instagram 视频添加到 post：http://blog.pokefind.com/awesome-pokemon-go-functioning-costume/

Answer 5

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

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

输入您的代码，一切都会完美运行。

Answer 6

我遇到了同样的问题。在 React 中，您必须像这样处理嵌入：

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

这是给我的！

Answer 7

问题的原因是

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

在

之前运行

<blockquote>...</blockquote>

存在于DOM。这意味着该脚本在加载时没有找到任何要转换为 iframe 的块引号。

由于脚本被标记为异步，您可以运行进入竞争条件，在这种情况下每次刷新时您都会获得不同的加载顺序。

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

instgrm.Embeds.process()

你确定之后是在DOM.

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

Answer 8

我迟到了，但目前这个问题似乎仍在许多网站上发生。

在我自己的网站上进行一些研究后，我注意到控制台在加载时出现错误。在错误中的 link 之后，它把我带到了以下位置

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

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

要解决这个问题，请替换嵌入底部的这一行

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

有了这个

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

目前有效，但如果他们再次更改 js url，可能会破坏 link。

现在应该出现了。

Answer 9

我这样做。

在 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 10

在 React with Typescript 中，您可以：

useEffect(() => {
    if ((window as any).instgrm) {
        (window as any).instgrm.Embeds.process();
    }
})

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

Why is instagram embed code only showing an instagram icon, not the image?

embed

instagram