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

Question

I was wanting to embed a photo from my instagram account in to my blog. I thought it would be a simple case of copying the embed code from the photo, paste it in to my edito

Answer 1

I do this.

Import script in index.html

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

And

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

It's work for me.

Answer 2

The issue has been reported.

Seems to be a known issue which isn't easy to fix: http://issues.umbraco.org/issue/U4-8646

Answer 3

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

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

This dit it for me!

Answer 4

It's possible that the Instagram API has been changed, someone reported a similar issue with Tweets not embedding properly recently too. Log it as an issue on http://issues.umbraco.org.uk with some report steps and hopefully someone will be able to fix it.

I've just tested and it does the same for me too.

Answer 5

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/

Answer 6

I ran into this problem and eventually found out that the newer versions of wordpress will auto-embed the image or video if you just past the url on a line by itself in the editor. I suspect this is a very recent addition as I had to search a while to find it. For an example, I used it on this page to add an Instagram video to the post: http://blog.pokefind.com/awesome-pokemon-go-functioning-costume/