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 editor and off I go. This doesn't seem to be the case though. As you can see from the screenshot, I get the photo information but no photo.

If I put just an image tag in to the html the image shoes perfectly but not in the style of an instagram photo.

i.e.

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

Does anyone have any ideas why the embed code isn't working. I've also tried the embed code in a plain html file and it doesn't work either, so it's not my CMS which is causing the issues, which is Umbraco.

Sisson

Answer 1

The issue has been reported.

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

Sisson

Answer 2

(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 ("https") to the source like below, the image showed up correctly.

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

Hope this helps.

Henriquez

This seems to only appear in the umbraco.config file which means every time I add an image from umbraco I'm going to need to manually alter this file. Am I correct in thinking this or is there another file which I haven't found that should be edited? – Sisson

I haven't had any experience with the CMS itself, but maybe you can take a look at this config file EmbededMedia.config. I also tried putting whole html embed code copied from instagram into a new page at the demo site belle.byte5.net and the image shows up ok. I haven't tried the embed function yet as it would require changing the config file, which I do not have at hand. – Henriquez

And one thing to be noted that my above answer applies only to opening local html files without a server, in which case it is the scheme "file:///" that causes the problem. Other than that I don't quite get why your image didn't show up. Perhaps you can try opening up the developer tool -> network tab and see whether the embed.js file is loaded successfully or not. – Henriquez

This is still not fixed but your answer was very helpful mate. Thanks. – Shanklin

This worked for me but I had to change it to simply use https instead of http https://platform.instagram.com/en_US/embeds.js – Villalpando

Here is an example running after the suggested update: jsfiddle.net/nxqhr81g/5 – Scrub

Answer 3

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/

Taunton

Answer 4

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

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

This dit it for me!

Covalence

For me window.instgrm is always undefined. – Gab

this worked for me, since the embed code is in a JS Tab and the code is not loaded initially. @Alex, try to check for the "instgrm" Object in the developer console, it could well be that the object is not yet defined when you check for it... – Clywd

For me using Angular I added: <script async src="instagram.....> instgrm.Embeds.process(); </script> To index.html just after body tag. Loads every time. – Mangum

Answer 5

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.

Partain

Answer 6

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.

Barnie

Answer 7

for those who are still having this problem on Next JS, the solution is:

1. to add code below on your file.

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

2. and import Script from 'next/script' on the top.

Canned

Thanks! For me I had to do one more step: Add www.instagram.com to script-src and frame-src in my Content Security Policy – Slouch

You totally saved me! Thanks!! – Unsettle

Answer 8

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.

Octastyle

Answer 9

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/

Elaterite

This doesn't work in Theme > Customize > Widgets > Sidebar, it just shows the URL. – Mitochondrion

Answer 10

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.

Penitential

Tried to add this before the embedded code, and after, but neither had any effect. – Gab

Answer 11

In React with Typescript you can:

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

Templet

Answer 12

At the end of the embed code generated from Instagram you will see below:

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

You only need to add https like this

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

It works well for me

Gannon

Answer 13

If you're using Next JS This will solve the Instapost loading issue

Import the Next JS Script

import Script from 'next/script';

Add the Instagram embed code with Next JS Script

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

Note: Make sure the Instagram embed script starts with https and its a valid url

Add the following in a useEffect

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

Cementite

Answer 14

Well, its 2024 and meta still doesn't care about this.

I tried a number of solutions, but none worked, so this was my workaround. Remove the <script async src="https://www.instagram.com/embed.js"></script> entirely. Then in your page's scripts, add this:

window.onload = (event) => {
  setTimeout(()=>{
    const script = document.createElement('script');
    script.src="https://www.instagram.com/embed.js"
    document.getElementsByTagName('head')[0].appendChild(script)
  }, 25)
} 

This will make it so that the loading of the embed.js script occurs 25 ms after the page finishes loading. I believe, like others have said, that the script is targeting the <blockquote> element prior to it being attached to the DOM, so it can't find it and just fails. By doing this, you ensure the <blockquote> is available to be targeted before the script tries to execute.

Kind of dirty, but it works.

Concentric

Answer 15

This worked for me!

instgrm.Embeds.process();

Endocranium