Add Facebook Comments Box/Form/Plugin To Blogger Blog

It’s getting harder and harder to separate blogging from facebook as it remains one of the top channels to drive traffic to your blog. Facebook have successfully released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Share were the most inspired one. Now they have released Facebook comment form for bloggers. Facebook comment box is a useful tool for bloggers to increase & improve conversations and drive more traffic since the post commented on, by your blog visitors will be shown on the visitor’s wall on Facebook. This Facebook comment plugin allows users to comment on your blog by logging into Facebook, Yahoo, AOL and Hotmail ID. Adding Facebook comment form on blogger blog is a nice way to drive traffic from the social networking website.

How To Add Facebook Comments box/form to Blogger

Create Facebook App


  • Now you will be taken to a Settings page. Now note down your Facebook app id which will be shown like this

  • Go to Blogger Dashboard 
  • Click on DropDown Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML --> Proceed --> Expand Widget Templates
  • Press Ctrl + F and search the code shown below

<html

  • Now replace it with the code shown below

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

  • Now Find the code shown below using [ctrl+F]

</body>

  • Now Paste the JavaScript SDK Code Shown Below just above/before it

<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script> 

  • Replace YOUR_APP_ID with your app id you just noted above

  • Now Find the code shown below using [ctrl+F]

</head>

  • Now Paste Facebook Open graph tags Shown Below just above/before it

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Latest Hack' property='og:site_name'/>
<meta content='YOUR_BLOG_LOGO_IMAGE_URL' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/latesthack' property='fb:admins'/>
<meta content='article' property='og:type'/>

  • Replace Latest Hack with your blog name
  • Replace YOUR_BLOG_LOGO_IMAGE_URL with your blog logo url
  • Replace YOUR_APP_ID with APP Id as shown above
  • Replace http://www.facebook.com/latesthack with your facebook page url

  • Now Find the code shown below using [ctrl+F]

<data:post.body/>

  • Now Add the Code Shown Below just above/before it

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:10px 0px 5px 0px; margin:0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='97%'/></div>
<div style='color:#ffffff; background-color:#3b5998;border: solid 1px #ddd; font-size:11px; padding:3px; width:97%;'>Facebook Comments Box by <a href='http://www.mybloggertools.org' target='_blank'><b>MYBLOGGERTOOLS.ORG</b></a></div></div></b:if>

  • Now save your template
  • Now Go to Blogger Dashboard --> Settings --> Post and comments 
  • Now set comment location to Hide

Like it? Share it.

2 comments

Reply
test
25 August 2012 at 18:56

Dear How do I coordinate topics such as what is in the picture?

http://www2.0zz0.com/2012/08/26/01/500938290.png

Reply
Unknown
26 August 2012 at 00:58 Author

@test I will write a post on it

Click to Add a New Comment

  • If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
  • Do NOT add links to the body of your comment as they will not be published.
  • Only the comments posted in ENGLISH will be approved.
  • If you have a problem check first the comments , maybe you will find the solution there.

Subscribe to: Post Comments ( Atom )