Load Facebook Like Box Asynchronously

Facebook like is a valuable resource to have on your site but it does come at a cost. It adds a large amount of javascript to your site and the standard code which you get from the Facebook developers page is missing something.

Ahh that’s right, it load synchronously.

What does synchronously mean?

In short it blocks the rendering of your page and until it has finished downloading the page will stop loading your content until it’s complete, in most cases it adds around 400 – 800kb of data, this is from experience and what Ive seen on 100s of sites. So today I decided to tackle this one head on.

A standard facebook code comes in two parts and looks like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/DiyWordpressBlog" data-width="300" data-show-faces="true" data-stream="false" data-header="false"></div>

You can get this code by visiting the Facebook developers site and entering your Facebook page url.

For better optimization I would deselect show stream and show header.

Once you have your code add this code with your own Facebook page link where you want it to display, in my case a text widget in the sidebar.

<div class="fb-like-box" data-href="http://www.facebook.com/DiyWordpressBlog" data-width="300" data-show-faces="true" data-stream="false" data-header="false"></div>

Next we need to add the Javascript. For Thesis Users just go to site options and paste your code in to the box that says Stat and tracking scripts. For non Thesis users add it to the bottom of footer.php before the closing </body> tag.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async=true; js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Now look closely between the two scripts.

Can you see the difference?

By adding this

js.async=true;

in front of the js.src we are telling Facebook to defer loading until the page has finished.

Why Facebook didn’t add this in the first place is anyone’s guess but by making this small modification you can improve the performance of your site. You may have to clear your cache before you see any results.

What next?

Well you could like me on Facebook and subscribe to my emails, that way you will never miss thesis simple tips again.

I hope this helps you and keep on blogging.

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

44 comments… add one
  • Friendship SMS Apr 5, 2014, 4:07 pm

    awesome !! works like charm for me 🙂

    Thanks for sharing this………..

  • Gnanes Apr 14, 2014, 3:47 am

    Thanks this code still works. I had the issue with Facebook like and share button slowing down my site and this extra code fixed the issue.

  • artur Jul 8, 2014, 1:33 pm

    Thanks a lot !
    It really helped me with our work

  • Johny Aug 24, 2014, 4:31 pm

    I use this trick on my site.. I put my fb like box only on single page.
    Thank you very much, this trick still working. Awesome 🙂

  • boomhauer Feb 22, 2015, 6:35 am

    Curious why we can’t just use the async attribute for this? I actually tested it and it seems to work – you can see what I tried in this post http://www.bradymoritz.com/facebook-like-button-load-async

Leave a Comment