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

(The below answer applies to local html files without a server only)

I was facing the same problem and noticed this line in the embed code:

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

When I added the scheme ("http") to the source like below, the image showed up correctly.

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

Hope this helps.

The cause of the problem is that the

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

Runs before the

<blockquote>...</blockquote>

Is present in the DOM. This means that the script doesn't find any blockquotes to turn into iframes on load.

Since the script is marked as async you can run into race conditions where you get a different order of load on each refresh.

You need to make sure the script is loaded after the blockquote is present. Either move the script part at the end of the document. Or if are using JS to add the to the DOM later, you can also run

instgrm.Embeds.process()

After you are sure is in the DOM.

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

I had the same issue. In react you have to process the embeds like:

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

This dit it for me!