17 September 2012

Facebook Comment Box For Blogger

// // 15 comments


Blogger comment box
Social networking sites like facebook makes a real important part on the world of blogging. This social networking sites helps you a lot to get traffic on your blog if you do take  some special care to them.This are really a gift of internet for bloggers like us to drive traffic towards our blog.Using facebook comment system on your blog  makes our blog more interactive and drives  more traffic as commenting on your blog.This also helps your blog reader to share the topic on their facebook wall easily.
so,here we're going to share the details tutorial about how to make this possible.This tutorial will completely explains you  how to add facebook comment box to your blogspot blog easily.
 Must Read : Blogger Simple DropDown Menu


Create A Facebook App-id




add facebook comment box on blogger
  •  Next Click on the "+ Create New App"and  a window will pop out, there you've to  enter your blog Name and click on "Continue" as shown in the screenshot below:
add facebook comment box widget on blogger


  • You'll get a new app id just like the below screenshot, so note down your APP ID and keep it some safe place.You have to need that in next steps. 




Add Code On Blogger Template



  •  Log onto your Blogger Dashboard >> Templates >> Edit HTML and  Expand Widget Templates checkbox.

  • Search(CTRL + F)  for <html tag and replace it with the below code


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





  •  Then search(ctrl+f) for on you template 




<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


Now add the below code  after it.





<div id='fb-root'/> <script> window.fbAsyncInit = function() { FB.init({ appId : &#39;YOUR_APP_ID&#39;, 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>





  •  Replace YOUR_APP_ID with the App ID you've noted down on Step 1


  •  Search for </head> code and add the code below above the </head> 

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


Now Make the Following Changes on the Code above:
Replace TechTrickHome with your blog name.
Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
Replace YOUR_APP_ID with your app id.
Replace http://www.facebook.com/techtrickhome with your Facebook page url.

  •  Next you have to search for the any of these following codes



<p class='post-footer-line post-footer-line-3'>

or

<div class='post-footer-line post-footer-line-3'>

or

<data:post.body/>

Add the code below after any of the tags above and save your template.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 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='520'/></div> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px;'>Facebook Blogger Plugin by <b><a alt='blogger templates' href=' http://techtrickhome.blogspot.com/ ' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'> http://techtrickhome.com/ </a></b> | <b><a alt='Facebook-Comment-Box-widgets' href=' http://techtrickhome.com/2012/09/facebook-comment-box-for-blogger.html ' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Get Widget</a></b></div></div> </b:if>


  • If you wish to use the dark scheme then just replace light with dark
  • If you want change the Comments box size then change this value width='520'



Facebook-comment-box-widget-blogger


You can keep Facebook Comment box and Blogger default comment box both togetherly to make your comment box user friendly but in case if you want to make Facebook comment box your default comment box then you've to remove your blogger default comment box,for that you've to go to Settings > Posts and Comments and set the Show Comments option to Hide and Save the Settings.As per the above screenshot.

 Must Read : Add Paypal Donation Button On Blogger

Don’t hesitate to use the comment box below in case you're facing any difficulties while trying to do this.


Articles You May Like

15 comments: Leave Your Comments

  1. Hey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.

    In kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results just remove the div tags and give the object some width/height parameters. Hope this helps some of you!

    One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)

    <!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->

    <div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='' type='text/html' width=''>

    </object></div>

    <!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->

    A final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...

    ReplyDelete
  2. Can you please help me?
    when i add this comment box, my facebook share button lying right to each post disappears!But the tweet button is still there! urgent help pleasE! :(

    ReplyDelete
  3. not working bro please help :(
    http://hanantechnews.blogspot.com/

    ReplyDelete
  4. its not showing in my News feed but it does show when i open it seperately

    ReplyDelete
    Replies
    1. It'll not show on your news feed,Just visited your blog.It's working perfect there buddy :)

      Delete
  5. I did all the steps then it work thanks :)
    www.imadeonline.com

    ReplyDelete
  6. If I want to remove the box, do I just do a reverse? I cannot reset the template because I've made other changes I'd like to keep. Thank you for this by the way it really works!

    ReplyDelete
  7. Hey Dude this technic is not Working in Ma Site

    http://adukkalakkaran.blogspot.in

    ReplyDelete
  8. If I hide bloggers box it also disappears facebook comment box. Any help?

    ReplyDelete