Saturday 23 June 2012

How to Implement Facebook JavaScript SDK on Your Website

Have you ever heard of Facebook JavaScript SDK? May be or may be not. But if you ever try out Facebook social plugins on your website or blog, then you may have come across with this name. Facebook plugins need to communicate with Facebook servers whenever they
rendering and deal with user actions. Due to thisphenomenon Facebook uses JavaScript functionality with their plugins itself. But JavaScript SDK provides enormous features like ensuring appropriate plugin being rendered on your site, authenticating users, sharing and more.

If you are using XFBML version of Facebook plugins in 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 willing to render only social plugins, then you can implement BasicJavaScript SDK on your site. Else if you wish to access more advanced features such as Authentication, Server side API calls you need an application ID to initialize JavaScript SDK. For that purpose you have to implement JavaScript SDK with Application ID. So to make use of advanced features using JavaScript SDK, you need to be a Facebook member. However here you can learn how to implement Facebook JavaScript SDK in your site eventhough you are a Facebook member or not.

Steps:

You gonna add Asynchronous JavaScript SDK which is most efficient than Standard JavaScript SDK and it simply ensures faster page loading. However it has no complex procedure when implementing. Just select your preferred JavaScript SDK version and add it right after <body> tag, in a new line.


Notes:

* Your HTML body tag may contain some other attributes too. So when you search for body tag, search <body keyword and do not alter existing body tag.

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.
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '[Your Application ID]', status: true, cookie: true, xfbml: true, oauth: true});   }; 
  (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol + 

          '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
</script>

0 comments:

Post a Comment

Your Comment Posted After Approved.