What is the BEST Way to Install Facebook JavaScript SDK API?

Amazon If you are a Facebook developer don't you wish to know the best way of installing Facebook Javascript API on your website? Facebook has so many plugins and widgets and they are not always so clear about how to install them, especially when you use multiple of them at the same time. What is the best way to install FB API so you can add Facebook plugins on your website such as FB like button and FB comment plugin?

This tutorial will recommend the BEST, the most robust, the EASIEST way to install the Facebook JavaScript SDK!

Solution
Here's the ONLY JavaScript code you put on your website. You can put it right after the opening body tag, put it at the end of the HTML, pretty much anywhere. The recommended place is put the code when the DOM is ready.

Note that this solution works for laptop computers and PC computers, but may not work on mobile devices such as iPhone, Android phone, iPad, Android tablets. If this is the case for you consult How Do I Fix FB Social Plugin Failures on Smart Devices?

If you use jQuery then put the code anywhere within $(document).ready(function() {});

view source

print?

01	window.fbAsyncInit = function() {

02

FB.init({

03	appId      : 'your APP ID', // App ID

04	channelUrl : 'your Channel file', // Channel File; not required

05	status     : true, // check login status

06	cookie     : true, // enable cookies to allow the server to access the session

07	xfbml      : true  // parse XFBML

08

});

09

10	// Additional initialization code here! For example if you'd like to get an email

11	// whenever someone leaves a comment in the FB comment plugin you need to call

12	// FB.Event.subscribe('comment.create', function(response) {...}); here!

13

};

14

15	// Load the SDK Asynchronously

16	(function(d){

17	var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];

18	if (d.getElementById(id)) {return;}

19	js = d.createElement('script'); js.id = id; js.async = true;

20	js.src = "//connect.facebook.net/en_US/all.js";

21	ref.parentNode.insertBefore(js, ref);

22	}(document));

This solution has the following benefits.

1. As of today this solution provides a rich set of client-side functionality for accessing Facebook's server-side API calls. These include all of the features of the REST API, Graph API, Dialogs, and add handlers to an event (such as when someone leaves a comment in the Facebook comment plugin you install on your website) and invokes your callback when the event fires!

2. This solution make the JavaScript file load asynchronously! This means that when your website is being rendered the JavaScript file does NOT block the rendering of your website; it is being loaded at the same time at its own pace. If you use Facebook Like button social plugin you only need to insert <div id="fb-root"></div> somewhere inside HTML body tag in addition to inserting the code above.
What happens when the JavaScript SDK loads slowly? Will my Facebook Like button or Facebook Comment widget get messed up? The answer is NO. When Facebook JavaScript SDK has NOT loaded but the webpage has been rendered, your Facebook plugins would simply NOT show up on your website. When the SDK finally loads up, guess what,your Facebook widgets would show up dynamically magically!
Now you should understand the best way to install Facebook API on your website.

Questions? Let me know!