The Easiest Way to Add Facebook Comment Box in BloggerFacebook comment box is a social plugin that can be embedded in any website or blog and allows visitors to add their comments using their Facebook account, Yahoo, Hotmail and AOL. It is launched by Facebook developers in 2009 and since then, bloggers and website owners use this commenting system because of the great features.  It creates a better commenting experience and a more enjoyable place for a discussion. In 2011, it becomes more interesting and useful because of the updates in  the comment box plugin. One of the great features launched in 2011 is the new moderation tools. But what the feature that caught up the attention of every one is the capability to attract more traffic. When someone added his comments to your blog, it will be shared in their Facebook wall if they leave the “Post to Facebook” box checked. That means, your article will be shared in his friend’s news feed and attract new visitors. A screenshot below shows how it looks.

Tutorial on How to Add Facebook Comment Box in Blogger

You may want to take a look at the following related articles:

Advantages of using Facebook Comment Box

By using Facebook comment box, you actually enjoying the several advantages of it that may help your blog to succeed. The advantages of Facebook comment box are as follows:
  • It can boosts your traffic.
  • Advanced moderation tools.
  • Threaded comments by default.
  • Attract normal Facebook users to add their thoughts.
  • Receive notifications on Facebook.
  • No anonymous comments.
  • Multiple platform commenting option (Comment using Facebook, Yahoo, AOL and Hotmail)
  • Nofollow comments are by default.

How to Add Facebook Comment Box in Blogger

Facebook comment box creates an interactive commenting system that makes the discussion more interesting. Adding it to your blogger blogs is a good decision. However, there is a little problem when it comes to adding this social plugin in Blogger blogs. You can found a lot of tutorials on how to add Facebook comment box in blogger but most of all is not working.

In this tutorial, you will learn how to embed this commenting system in your Blogspot blogs without any errors. Follow the steps below.

I. Get a Facebook Application ID

1. Go to Facebook Developers Page.

2. Create a new app then add your App Name.

Tutorial on How to Add Facebook Comment Box in Blogger

3. Hit continue then answer the security check code.

4. After submitting the security check code, you will see this page.

Tutorial on How to Add Facebook Comment Box in Blogger

5. Answering all of the text boxes as shown in the screenshot above is optional but be sure you have the details for Display Name, Contact Email and Site URL in Website with Facebook Login section.

6. Copy your App ID placed in the top area of the page below your App name and above your App Secret and save it in Notepad. You will need the App Id later on.

Adding the Facebook Comments Box to Blogger

1. Go To Blogger > Design > Edit HTML

2. Be sure to Backup your template first.

3. Check the “Expand Widget Templates” box

4. Search for <html and add the code below just after it. See screenshot below.

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

Tutorial on How to Add Facebook Comment Box in Blogger

5. Then, search for <body> and just below it, paste this code.

<!–Facebook Comment Box by www.designrshub.com–>
<div id=’fb-root’/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &quot;App_ID&quot;,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<!–Facebook Comment Box by www.designrshub.com–>

Note: Replace App_ID with your Facebook application ID that you previously saved in a notepad.

6. Now search for <data:post.body/> and paste the code below just after it.

<!–Facebook Comment Box by www.designrshub.com–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’fb-comments’ data-num-posts=’10’ data-width=’470′ expr:data-href=’data:blog.url’/>
<div style=’color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:623px;text-align: center; border: 1px solid #133783;’>Facebook Comment Box Plugin by <a href=’http://www.designrshub.com/’ target=’_blank’>Designrshub.com</a> To get this widget, <a href=” target=’_blank’>follow this tutorial</a>.</div>
</b:if>
<!–Facebook Comment Box by www.designrshub.com–>

Note: Change the following according to your choice.

  • To change the number of comments shown in your comment section, then change the value of data-num-posts=’10’
  • To change the width of the comment box, resize it by changing the value of data-width=’470′
  • The conditional codes indicate that the comment box will show only below Post pages. You may remove it according to your choice.

7. Save your Template and see the beautiful comment box in your Blogspot blogs.

Last Step (Optional but Recommended)

1. Search for </head> and just above it paste the following code,

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<b:else/>
<meta content=’Designrshub | Design Magazine‘ property=’og:site_name’/>
<meta content=’BLOG-LOGO-IMAGE-LINK‘ property=’og:image’/>
<meta content=’YOUR_APP_ID ‘ property=’fb:app_id’/>
<meta content=’http://www.facebook.com/PhotoshopPH‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>

Note: Make these changes before saving the template.

  • Change Designrshub | Design Magazine with your Blog Title.
  • Change BLOG-LOGO-IMAGE-LINK  with  your Logo Image URL (Optional)
  • Change YOUR_APP_ID  with  the App ID you saved in the notepad.
  • Change http://www.facebook.com/PhotoshopPH with your Facebook Page URL (Commonly Facebook Page of your Website or blog).

2. Hit save and you are done.

Disclaimer

We tried lots of Blogger Tutorials to integrate Facebook Comment Box Plugin in Blogger Blogs because we want to use this commenting system. However, we can’t find a working tutorial about it. Thus, we find ways and answers and tried different codes. We analyzed line by line and made the changes needed. Therefore, I didn’t post this to serve as a carbon copy of other blogger tutorials in the net.

Credits

This post made me busy for a while since it took time to find the answers we are looking for. Because of this, I’m not able to update the blog with my own articles. Moving on, we placed a simple credit below the comment box in exchange for the effort we put to come up with a working Facebook comment box in Blogger blogs. Thank you for not removing the credits.

Conclusion

Facebook comment box is a great commenting system that I recommend you to use. If I made this working code before I use Disqus commenting system then maybe I am using Facebook comment box up to this moment. I hope this tutorial clarifies everything and helps you in any little way. If you faced any problem then don’t hesitate to put it below and we will try to answer it.
Microsoft PowerPoint Presentation Templates