Recently, I had a lot of trouble embedding Instagram images in one of my latest blog posts about visual storytelling. After quite a bit of trial and error and a great deal of frustration, I’ve found two relatively simple alternatives.
So, let’s say you find a fun image you’d like to embed. Using the desktop version of Instagram, you scroll down to the ellipsis button at the bottom right, click it, and then click “Embed.”
Then you get to this screen where you can copy the embed code.
Then you drop it into the WordPress Text editor and when you hit the “Preview” button, you should have a beautiful Instagram image in your blog post. I emphasize the word “should” because occasionally when I’m embedding Instagram images into my posts, something goes wrong with the code and the formatting of my entire blog post gets messed up.
It doesn’t happen frequently, but when it does, it does so without warning and it can be absolutely rage inducing. It looks something like this:
Fortunately, there are two alternatives.
According to the Instagram developer page on embedding, you can embed an image just by copying and pasting the URL right into the blog post:
That’s right. All you have to do is just copy and paste the URL into the WordPress Visual editor and voila!
There are two downsides to this method. Occasionally, I found this method would also mess up my formatting. Also, this method defaults to including the caption. It’s not as big of a deal, but sometimes captions are very long and if you want a clean, uninterrupted flow to your blog post, it can be problematic.
From my experience, this method appears to have a 100% success rate. The only “down side” is that this solution involves code.
“But I don’t know anything about HTML! Coding is confusing and scary and every time I see it I want to crawl into a corner and cry myself to sleep!” you might be saying. Well, worry not. Because if you can copy and paste, then you can use the advice I’m about to give.
<iframe src=”//instagram.com/p/xxxxxxxxxx/embed/” height=”710″ width=”612″ frameborder=”0″ scrolling=”no”></iframe>
All you have to do is take the code above and replace the x’s with this part of the URL from any Instagram image:
After you drop it into the Text editor, it will look something like this:
This is actually the way Instagram used to allow you to embed images. I understand why they changed it, but there are still a few bugs that can rear their ugly heads at the most inconvenient times.
– – –
There you have it. Have you found any interesting WordPress workarounds? Share them in the comments below. Thank you for reading!
