When to download the Facebook Javascript SDK with multiple Like and Timeline buttons?
I am wondering how I am supposed to load the Javascript SDK if I have a Like button and a button that calls FB.login for a Timeline app on the same page. The Like button code uses the following:
<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/all.js#xfbml=1&appId=126380467442965";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
but for the OAuth dialog for the app, Facebook suggests using:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script>
// assume we are already logged in
FB.init({appId: '123050457758183', xfbml: true, cookie: true, oauth: true});
...
</script>
Which one should I use?
source to share
The various codes are asynchronous and synchronous SDK implementations. The first is asynchronous — the code is loaded without affecting other elements on the page. The second (just the script tag) is synchronous. The Facebook script will be loaded and it will hold the page while loading.
An asynchronous implementation is often better - it should speed up the page. However, since the Facebook code is loaded after the page, we cannot use any of the FB features until we are sure that it is loaded. So the async implementation provides us with a callback that is triggered when the SDK is loaded.
I think it is best to use the code from the first snippet, but add this code to initialize the SDK with a callback.
FB.login on your button should work alongside your button.
window.fbAsyncInit = function() {
FB.init({
appId: ...,
status: true,
cookie: true,
xfbml: true,
oauth: true
});
};
source to share