In Development Last updated:
Share on:
Cloudways offers managed cloud hosting for any size business to host a website or complex web applications.

How to load the Facebook button asynchronously?

Almost every blog, a website has Facebook like, share, or follow button.

As you may know, default Facebook social share code is loaded synchronously along with your web page resources.

This will increase your website load time and damage SEO score. It’s just not SEO but also spoils user experience.

I am sure Facebook social share button is essential but not as your actual code to display first. There are many blog or website has higher page load time because of the default Facebook code.

Using Facebook code asynchronously will help you to load your web page 0.5 – 1.5 seconds faster. This is what you have to load Facebook like, share, or follow button faster.

Here is the code I got from Facebook Developer for like and share to geekflare.com

<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/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";    
fjs.parentNode.insertBefore(js, fjs);  
}(document, 'script', 'facebook-jssdk'));</script>

Now, all I have to add is following the single line in my code, which will help to load buttons faster.

js.async=true;

So the modified code would be:

<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_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";    
fjs.parentNode.insertBefore(js, fjs);  
}(document, 'script', 'facebook-jssdk'));</script>

Isn’t it easy?

Update: the new code snippets offered by Facebook doesn’t require above as it includes script async already you can see below.

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>

Using WordPress? Check out this post which explains how to optimize for performance without a plugin. And if you are looking for a social media plugin that doesn’t slow down then I highly recommend Novashare.

I am sure you like your web page to load faster, and I hope this helps you.

Share on:
  • Chandan Kumar
    Author
    Chandan Kumar is a seasoned technology enthusiast and entrepreneur passionate about empowering businesses and individuals globally. As the founder of Geekflare, a leading technology publication, Chandan has spearheaded the development…

Thanks to our Sponsors

More great readings on Development

Power Your Business

Some of the tools and services to help your business grow.
  • The text-to-speech tool that uses AI to generate realistic human-like voices.

    Try Murf AI
  • Web scraping, residential proxy, proxy manager, web unlocker, search engine crawler, and all you need to collect web data.

    Try Brightdata
  • Monday.com is an all-in-one work OS to help you manage projects, tasks, work, sales, CRM, operations, workflows, and more.

    Try Monday
  • Intruder is an online vulnerability scanner that finds cyber security weaknesses in your infrastructure, to avoid costly data breaches.

    Try Intruder