How to add Facebook connect to Blogger

Facebook for websites
There are two implementations:
  • XFBML (requires use of the JavaScript SDK)
  • Iframe (simply add the Iframe HTML to your site)
Note : if you are using my old tutorial (How to add Facebook connect to Blogger (updated) ) to add Facebook Connect, please delete all the code used in your blog in order to start with the new one without any trouble.

Step 1 : Create an application

Create Application
First of all, we need to create or register an application for your blog. to register it just hit this link :
 http://developers.facebook.com/setup/
Enter a name for your application (I prefer the same name as my blog’s name) , the URL of your blog (do not forget the “/” at the end of your URL) and choose the language that you use in your own blog.



STEP 2 : Put a couple of code lines (For XFBML)

Blogger-HTML-Edit1
Login your Dashboard > Design > Edit HTML then put this couple lines of code :
<div id="fb-root"></div> <script>
 
window.fbAsyncInit = function() {
    FB.init({appId:
'your app id', status: true, cookie: true,
             xfbml:
true});
 
};
 
(function() {
   
var e = document.createElement('script'); e.async = true;
   
e.src = document.location.protocol +
     
'//connect.facebook.net/en_US/all.js';
    document
.getElementById('fb-root').appendChild(e);
 
}());
</
script>
You need just to put a few lines into your template between <body> tag and change APP_ID  with your own Facebook application ID then you are ready to implement Facebook widget.
** you may get this code after registering your application on Facebook.



Step 3 : Facebook Plugins

6kn81vn4
There is a lot of plugins that help you to make your blog more interactive where your reader can share your content with their friends on Facebook, for example the famous Like button :

<fb:like expr:href='data:post.url'  font="arial"></fb:like>
For more options and more Facebook widgets, please check this links just below :
Related posts :