Today I am going to share a quick tutorial on how to embed an Instagram post on a blog or web post.
I love having the ability to tie all of my publishing platforms together. It makes for a more cohesive conversation. While it’s easy to simply text link from account to account, the story is so much more clear when you can provide a visual.
Just the other day, I shared my VERY FAVORITE chicken taco soup recipe. As part of the post, I wanted to refer to something I’d shared on Instagram. I embedded the Instagram post into the body of my blog post.
It’s been a while since I shared a blogging tip here on the site, so I documented the process so that I could share the details on how to embed an Instagram post with you today.
How to Embed an Instagram Post
Embedding Instagram posts on WordPress is actually pretty darn easy. You simply copy and past the URL of the individual post on it’s own line while in the visual editor. However, more often than not the post isn’t visually aligned the way you’d like. Fortunately, there’s a simple work around to get things in ship-shape.
Login to Instagram online
Navigate to a specific Instagram account
Navigate to a specific Instagram post + locate the “…” on the bottom right
Click for more information + select “embed”
Click to copy Instagram embed code
Navigate to the backend of your website + select the text editor tab
Paste the Instagram embed code into the body of the post
Center Instagram embed
The regular code will not center your Instagram in the body of the post, but you can easily correct this by adding a center command <div align=”center”> before the remainder of the code.
Following the Instagram embed code, you will close the command with </div> as well.
The Instagram will look empty in the visual editor
It will show up in the published version
The Instagram post will show up as a clickable web embed. Your readers will be able to access the post as well as the comments, simply by clicking. Embedded posts are also responsive and will automatically resize if the embedding container becomes smaller (i.e. a phone screen). This means that the content will look great both on desktop and mobile websites!
Related Posts
Hi Tauni,
Great post on embedding instagram pictures. I’ve never actually thought of doing it and used to email them to myself!!
Thanks for the tips.
We love your site! We for some reason in our preview version can not seem to still see what the Instagram embed looks like? Is it still blank until publishing so meaning even in preview mode the Instagram embed still looks blank only until we publish will we actually see it?
Yes. Often the preview will be blank until published. It depends upon the site’s individual programming. Good luck with your shares! xo Tauni