
Load Facebook Like and Share Button Faster


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.
More great readings on Performance
-
9 Ping Monitoring Tools for Network TroubleshootingDurga Prasad Acharya on June 15, 2022
-
10 IP Address Management Software for Small to Medium BusinessTanish Chowdhary on June 10, 2022
-
8 Best Virtualization Monitoring Tools for Medium to Big BusinessSatish Shethi on June 10, 2022
-
10 Best Wayback Machine Alternatives in 2022Saptak Chaudhuri on June 14, 2022
-
20 Best Games with RTX and DLSS SupportAnkush Das on June 8, 2022
-
8 Image Processing and Optimization APIs Available in 2022Durga Prasad Acharya on June 14, 2022
Join Geekflare Newsletter
Every week we shareย trending articlesย andย toolsย in our newsletter. More than 10,000 people enjoy reading, and you will love it too.