How to Embed Instagram Pictures on Your Blog [ 2019: The Only Method That Really Works]

Some of our readers have contacted us to ask how we manage to Embed pictures coming from Instagram in our blog. I faced this problem recently and come up with a custom-made solution that WORKS. If you visit Instagram official help, you will find this: But the reality it’s that it doesn’t work! How funny…

Some of our readers have contacted us to ask how we manage to Embed pictures coming from Instagram in our blog. I faced this problem recently and come up with a custom-made solution that WORKS.

If you visit Instagram official help, you will find this:

Instagram Help

But the reality it’s that it doesn’t work! How funny it is that in the official Instagram page, when even THEY embed a picture…. they got this annoying windows as the result :

Annoying result

So after making some research on Google, I find out that there were thousands of people with the same problem… and even the bigger bloggers on the world still facing this situation with identical results. All the articles you will find, all the videos on YouTube or tips, they just don’t work.

And if you are using WordPress as we do, well situation it’s even worse, since WordPress added a simple functionality that allowed to embed just by pasting a link to the picture on Instagram… and that nice feature it’s also broken!

Here is how WordPress suggest you to do it on your Blog… and the result it’s again the “View this post on Instagram” annoying message:

Annoying Instagram

There is even some posts asking for help on their forums, all hopeless.

The solution

So as an old HTML dinosaur, I just checked the embed code suggested by Instagram and fix it in a “less orthodox” way, but that actually works.

Here is one example with a publication of my feed on Instagram :

This workaround actually requires you to use this code:

<iframe id="instagram-embed-0" class="instagram-media instagram-media-rendered" style="background: white; max-width: 658px; width: calc(100% - 2px); border-radius: 3px; border: 1px solid #dbdbdb; box-shadow: none; display: block; margin: 0px 0px 12px; min-width: 326px; padding: 0px;" src="https://www.instagram.com/p/Bq4cyi9lt9o/embed?utm_source=ig_embedembed/captioned/" scrolling="no" data-instgrm-payload-id="instagram-media-payload-0" height="750" frameborder="0"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

Select it all and copy it or just click on the “Copy button”.

Once its done, you only need to paste this code on your WordPress text editor and change the Instagram ID of the post to make it work with any post.

So to get the ID of the picture you would like to embed, you just need to navigate to the picture and copy this part from browser navigation bar :

And paste it on my code, changing it here:

And you are done. Your Instagram picture will show anywhere.

If your image it’s vertical, you may want to change the parameter height=”600″ to “750” or “900”.

So if you find this workaround useful, please share this post and rate us!

Save for later:

How to Embed Instagram photo

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *