In 2009
Facebook developers introduced their best social plugin called "
Facebook Comments Box". 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.
Facebook comment box is one of the useful tool for bloggers to increase conversations. Now to add
Facebook Comment Box to your Blogger blog follow these steps.
Step 1: Disable Default Comments
Let's start with disabling blogger default comments because you might not want to have 2 comments forms. Now to do this log into
Blogger account and go to
settings >> posts and comments
Next to "
Show Comments" field choose
Hide and hit
Save Settings.
Step 2. Generate your Facebook App ID
Now to get a facebook comments box in your blogger blog you should generate your own Facebook
APP ID/API KEY, it’s really easy and one step process.
Log into your
Facebook and go to
https://developers.facebook.com/apps/
Then click
+ Create New App at the top right corner of the page. A new pop-up window will show up.
Enter an application name, check
"I agree to the Facebook Terms" and click
"Continue".
After passing a capcha you will get a new form
Fill the following info:
App Namespace: Enter anything but if you use more than one word use "
-" as a seperator not space.
App Domain: You must type
blogspot.com but if your using blogger custom domain you should enter your domain name.
In the end select "
Website" to integrate with facebook. and enter your Blog URL and hit
Save Changes.
On the next page Facebook will give you the
App ID
Just copy it and paste it in a text editor like notepad, we’ll need use in the next steps.
Step 3. Codes To Add To Your Template:
You must add the following codes to your blogger template to ensure that the comments box will work for your blog in the right way.
- xmlns attribute
- Javascript SDK
- Open Graph Protocol tags
Adding the xmlns attribute:
Now go to your Blogger account once again and navigate to,
Template >> Edit HTML, hit
Proceed and check
Expand Widget Templates
Now find
(CTRL+F) this in the code:
and at the following code at the end (before closing the > ). Put a space before it.
xmlns:fb='http://www.facebook.com/2008/fbml' |
Adding the Javascript SDK Code:
Now find
(CTRL+F) this in the code:
Add the following code just
below/after it.
<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.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script> |
Note: don’t forget to change
YOUR APP ID to your app id ( You got in Step 2).
Adding the Open Graph protocol tags:
Copy the following code
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='YOUR-BLOG-NAME' property='og:site_name'/>
<meta content='LOGO-URL' property='og:image'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/> |
and change the colored text to the following,
Change
YOUR-BLOG-NAME with your Blog name.
Change
LOGO-URL with your blog logo, or remove the all tag if you don’t want it.
Change
YOUR-APP-ID with your application ID number ( You got in Step 2).
Change
FACEBOOK-PROFILE-ID with your own Facebook user Profile ID.
After making these changes paste the above code just
before/above
Step 4. Adding the Comments Box to your Blogger template:
Now find
(CTRL+F) this in the code:
and paste the following code just
below/after it.
<br/><br/>
<b:if cond='data:blog.pageType == "item"'>
<div><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments migrated='1' width='450' expr:title='data:post.title'
expr:href='data:post.url' expr:xid='data:post.id'/>
</div>
</b:if> |
Step 5.
Save the template.
Note:
For comment moderation just go to http://developers.facebook.com/tools/comments and click the settings at the rignt.
A pop up window will come up
Here you can moderate comments, add your own blacklist words or choose the standard Facebook restrictions.
Email Subscription box let your blog readers to get your latest post updates directly to their mailbox. All of us like to have a good template with matching design and widgets but Feedburner provides a default Email Subscription Widget which may not suit to your templates. This post contains simple techniques to Customize your Feedburner Email Subscription Box. 
Multi tab Widget is a great space efficient widget for Blogger. It helps to decrease the load time of your Blogger blog by combining three or more than three widgets into one. The tabbed navigation widget features tabs and a content window; when clicking on the tabs, different content is visible in the window beneath. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like. 
Recently Blogger introduces seven new "dynamic view" templates in 
Facebook like box is widely used now days. It is a social plugin that enables 
Facebook has recently launched a new button for sharing in private.
This button features are amazing and it’s completely different from the “
