Increase Loading Speed of Blog/Website with Facebook Asynchronous Script

Everybody is fascinated with whole idea of Facebook Page Plugin. Even I have published two posts related to that. Anyways the Facebook script which Face book developers provided makes the website loading a bit slow.

The script which users get from the the Facebook Plugin page is,

<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&version=v2.3&appId=630535786999761”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

What is issues with this script?

This script is synchronous and takes a while to load.

This script affects the loading of other components of your website.

The script delays overall loading speed of their website.

In the world of fast and furious, this will create a step back for your website/blog.

Also read: Adding Page Plugin gadget of Facebook to Blog Spot Blog/Website Templates

SOLUTION

The Facebook Plugin Asynchronous Script works the same as the above code. It works charmingly if i may say. It loads fast and don’t hinder downloading of other gadgets.

Just copy the below code and Replace your appID.

<div id=’fb-root’/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '630535786999761', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>