In this short tutorial i will show you how to add or embed any instagram post in your Wordpress article by using no plugins - only native Wordpress text editor.
It is very annoying that we can embed Twitter posts out of the box but this is not working for instagram nor facebook posts. To fix this we will use some of the magic of #css and using iframes to include content.
The idea is that we will insert simple iframe and add instagram URL and make it responsive - easy peasy 🍋 squeezy.
OK, so first thing first - let's add our additional CSS styling to wordpress:
Go to Wordpress Dashboard->Appearance->Customize
Next scroll down and click on "Additional CSS", and in the field on the bottom of the page add these couple lines:
.floyk-embedded-content {
position: relative !important;
width: 100% !important;
padding-top: 100%;
}
.floyk-embedded-content iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
then press publish on top.
Now go back to your #wordpress post where you want to insert instagram content, and click on plus sign in text editor and search for "html"
Now in that HTML box enter this HTML code but for src param paste URL of your instagram post. This URL needs to be structured a little bit. Basically you have to use instagram embed link and just change the ID post you want to share:
https://www.instagram.com/p/CRsd27NJdPW/embed
<div class="floyk-embedded-content">
<iframe frameborder="0" allowtransparency="true" src="https://www.instagram.com/p/CRsd27NJdPW/embed"></iframe>
</div>
How does it look in real life? Here is a example for this specific instagram post embedded in #wordpress article:
And that is it - happy sharing!
