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() {});
window.fbAsyncInit = function() { FB.init({ appId : 'your APP ID', // App ID channelUrl : 'your Channel file', // Channel File; not required 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! For example if you'd like to get an email // whenever someone leaves a comment in the FB comment plugin you need to call // FB.Event.subscribe('comment.create', function(response) {...}); 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));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!