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

(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.

Answer 2

I'm getting on to this one late but currently the issue appears to happen on a number of sites still.

After some research on my own site I noted an error in the console on loading. Following the link in the error it took me to the following location

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

obviously that page doesn't load js as it is not a proper web link.

To overcome this, replace this line at the bottom of your embed

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

with this

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

It works currently but if they change the js url again it may break the link.

It should appear now.

Answer 3

Believe it or not - I think I have solved the problem. Just add this line

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

to your code and everything will work perfectly.