Have you ever heard of Facebook JavaScript SDK? If you have been trying out Facebook social plugins on your blog / website, then I'm sure you are familir with that term. Facebook plugins need to communicate with Facebook servers whenever they populate information and deal with user interactions. Due to this phenomenon, Facebook uses JavaScript functionality for their plugins. But JavaScript SDK provides many features like ensuring appropriate plugin being rendered on your site, authenticating users, sharing and more.
If you are using XFBML version of the Facebook plugins on your site, then you have to include Facebook JavaScript SDK to enhance the performance and functionality of your plugins. However you can use JavaScript SDK for different purposes.
If you are just looking forward to show social plugins, then the Basic JavaScript SDK is pretty enough. Even you can use the Facebook plugins without being a Facebook memeber too.
But if you wish to access more advanced features such as Authentication, Server-side API calls and so on, you need a Facebook application to initialize the JavaScript SDK. There you have to implement Asynchronous JavaScript SDK with Application ID, which requires you to be a Facebook user.
Asynchronous JavaScript SDK is the most efficient compared to Basic JavaScript SDK. Asynchronous version ensures faster web page loading, so you find minimum impact on the performance.
I don't know what's your next intention to use Facebook JavaScript SDK, but I'll walk you through both implementations and the choice is yours.
Steps:
The implementation is quite easier than you imagined. Just pick the right version for you and add the code snippet right after the <body> tag in your site's source code.
If you are just looking forward to show social plugins, then the Basic JavaScript SDK is pretty enough. Even you can use the Facebook plugins without being a Facebook memeber too.
But if you wish to access more advanced features such as Authentication, Server-side API calls and so on, you need a Facebook application to initialize the JavaScript SDK. There you have to implement Asynchronous JavaScript SDK with Application ID, which requires you to be a Facebook user.
Asynchronous JavaScript SDK is the most efficient compared to Basic JavaScript SDK. Asynchronous version ensures faster web page loading, so you find minimum impact on the performance.
I don't know what's your next intention to use Facebook JavaScript SDK, but I'll walk you through both implementations and the choice is yours.
Steps:
The implementation is quite easier than you imagined. Just pick the right version for you and add the code snippet right after the <body> tag in your site's source code.
Note: If you are a Blogger user and don't know how to edit your template, read How to Edit Your Blogger Template.
Basic JavaScript SDK
You can use this version of JavaScript SDK if you are not seeking for advanced features. If you just need to render only Facebook social plugins, this will be enough for you.
Asynchronous JavaScript SDK
Color Indication Information:
- Your Application ID
Specify your Facebook application ID here.
Enjoy :-)
You can use this version of JavaScript SDK if you are not seeking for advanced features. If you just need to render only Facebook social plugins, this will be enough for you.
<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.2";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<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.2";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Asynchronous JavaScript SDK
This version of JavaScript SDK can be used to access more advanced features.
Note: To implement this version of JavaScript SDK, you need an Application ID to use with. Read How to Create a Facebook Application for Your Site.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[Your Application ID]',
xfbml : true,
version: 'v2.2'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[Your Application ID]',
xfbml : true,
version: 'v2.2'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Color Indication Information:
- Your Application ID
Specify your Facebook application ID here.
Enjoy :-)
