Add Facebook Comments Box To Blogger

This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site. This plugin did show a lot of problems when it was embedded in Blogger Blogs in initial days of its development but now thanks to our fellow friend Max from Allblogtools this plugin has been finally bloggerized to work just perfect with any Blogger hosted blogs. I have edited Max's coding in some areas and have mentioned some more interesting options that will help you use the Facebook comments box in parallel to your old Blogger Comment form so that you may loose no previous comments and provide users with multiple options of commenting from different platforms.
Interesting? Lets now learn how to embed this extremely useful comment form in Blogspot blogs. Kindly follow the simple steps below,

1- Get a Facebook Application ID

1. Go To Facebook Developers Page
2. Submit your blog URL and give it a name. Keep Site name as your "Blog Title" andSite URL as your "blog address"  
3.  Hit "create app" button and proceed
4.  After submitting the security check code you will see this page,
5.  Save that App ID in a notepad because we will need that latter. Now Click the link near the top-right corner of the same page that says "Developer Dashboard" 
6.  One the new window that appears click the Edit Settings link ,
   
           7.  Then go to Website option and write your Site Domain as blogspot
7.  8.  Save Changes and jump to the next step of this tutorial
   
   

   2- Adding the Facebook comments Box to Blogger

   Now its time to do embed the comments box in your blog templates. So follow these easy steps,
   PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
   
   1. Go To Blogger > Design > Edit HTML
   2. Backup your template
   3. Check the "Expand Widget Templates" box
   4. Search for and just after it give a space and add this code,

   xmlns:fb='http://www.facebook.com/2008/fbml'

     5.  Next search for 

   Note: In New Blogger Designed templates the same code looks like this,

   Find any one of these codes and just after it paste the code given below,

   
   

   
   
   
   • Replace YOUR_APP_ID with your Facebook application ID that you saved in a notepad.
       6.    Next search for  

 and just above it paste the following code,

Make these changes:

• Replace Page with your blog title/Name.
• Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size ->  40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,

• Replace YOUR_APP_ID  with the your Facebook Application ID that you saved in notepad
• Replace http://www.facebook.com/your page with your Facebook user profile link

    7.    Now Search for this,

    8.    Just after it paste the code given below,