Best way to embed social media posts, Instagram, Twitter etc into blog post

I often visit travel blogs, home design and decoration, as well as other topic blogs that display pictures or short videos where they embed posts from social media in their articles.

Their blog is great. But unfortunately the blog loading is very slow when accessed which is caused by embedded social media posts.

One social media post embedded in an article is not a problem, but when many posts are embedded together in an article, then therein lies the problem. The blog loads slowly, and sometimes i have to go to other blogs to find similar articles.

This might be due to improper way of placing the embed code. Therefore, I will tell you how to place the code in the best way.

How to add social media post embed code into blog post in best way

I will take the example of an Instagram post. The Instagram post embed code in HTML usually looks like this :

<blockquote class="instagram-media">
  Another Code
</blockquote>

Then followed by JavaScript code like this :

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

So the result when added to the article will be like this :

<blockquote class="instagram-media">
  Another Code
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

The example only shows one Instagram post, and it shouldn't cause any page load issues. However, if there are many posts, the embed code will be like this :

<blockquote class="instagram-media">
  Another Code
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>
<blockquote class="instagram-media">
  Another Code
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

Implementing social media post embed code in that way inside a blog post is not good.

That's because the JavaScript that functions to convert the HTML blockquote into an iframe is called from an external source, so if there are many, all of them are called one by one.

The solution is to put the embed code like this :

<blockquote class="instagram-media">
  Another Code
</blockquote>
<blockquote class="instagram-media">
  Another Code
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

So, place just one JavaScript code block to convert all HTML blockquotes into iframes.

This also applies to other social media posts such as Twitter where an example of its implementation for multiple posts would be like this :

<blockquote class="twitter-tweet">
  Another Code
</blockquote>
<blockquote class="twitter-tweet">
  Another Code
</blockquote>
<script async src="https://platform.twitter.com/widget.js" charset="UTF-8"></script>

This method applies to both WordPress and Blogger so you can try it on your own blog and you can also compare the results between the usual method and the method i recommend, which method is making the site load slow by checking it through the page speed tool.

But if this method doesn't work, then you have to optimize other scripts on your blog.

© aLez