Pages

How to Add Facebook Comment Box on Blogspot (2013)

Friday, December 13, 2013

Implementing social media is a key to successful blogging. Every successful blogger, who has high ranked webpages implemented several social media plugins on their blogs. Facebook is the market leader in social media industry. It can help you massively by increasing your visitors and their engagement rate on your blog. One single like or comment can bring many visitors because of its giant social network. Facebook has launched many plugins for bloggers. Facebook comment box is one of the most important plugin. It is one of the useful tool for bloggers to increase conversations.
The best thing of this plugin that, any one can leave comment using Yahoo!, Facebook, AOL, Hotmail etc. So today I am going to show you how you can implement facebook comment box on your blogger blog. 


Step 1: At first you have to create a Facebook application from Facebook developer's page. Put your blog title as application title.
Step 2: 
App Name: Submit Your blog title as
App Namespace: Keep it  blank. We don't need it now.
App Category: Choose the category that best describe your blog. 


Click continue. Now Facebook will ask you to enter Captcha Security word, just do it and click on Submit button. 
 
Step 3: After submitting the security check code, you will see the following page.
Enter custom domain name ( If you’re using a custom domain) or just blogspot.com (if you’re using .blogspot sub domain) in the space provided to the app domain under Basic info. Now click on “Website with Facebook Login” tab and type your blog address.



Step 4: Now click on save changes and copy your App ID.

Step 5: Log in into Blogger Dashboard and click on Edit HTML as shown below.


Step 6:  Press Ctrl + F and search "<html". Now Replace "<html" with following code.
 <html xmlns:fb='http://www.facebook.com/2008/fbml'

Step 7: Add below code before </head>

 <meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='YOUR BLOG TITLE' property='og:site_name'/><meta content='BLOG_LOGO_IMAGE_LINK' property='og:image'/><meta content='YOUR_APP_ID' property='fb:app_id'/><meta content='YOUR FACEBOOK ID' property='fb:admins'/><meta content='article' property='og:type'/>

Don't forget to replace BLOG TITLE, BLOG_LOGO_IMAGE_LINK, APP_ID and FACEBOOK PROFILE ID.

Step 8: Now Add below code before </body>

 
 <script>window.fbAsyncInit=function(){FB.init({appId:&quot;YOUR_APP_ID&quot;,status:true,cookie:true,xfbml:true})};(function(){var a=document.createElement(&quot;script&quot;);a.type=&quot;text/javascript&quot;;a.src=document.location.protocol+&quot;//connect.facebook.net/en_US/all.js&quot;;a.async=true;document.getElementById(&quot;fb-root&quot;).appendChild(a)}());</script>

Replace YOUR_APP_ID with your Facebook application ID

Step 9: Now search the following code bellow. 

 <data:post.body/>

Step 10: After it, add the code given below. 

 <br/><br/><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/> 
 <script src='http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID&amp;xfbml=1'/> 
 <fb:comments expr:href='data:post.url' numposts='5' publish_feed='false' width='468'/> 
 </b:if>

Replace YOUR_APP_ID with your Facebook application ID. That's all.
 

Most Reading