Facebook comments Box Instead of Blogger Comments Form

facebook-commnets-boxThe previous post on Facebook comments box did not replace your blogger comment form but if you wish to completely remove the blogger form and use this new plugin then steps are even more simple. However I may assure you one important thing here. I am soon going to publish a script that will automatically count and display Facebook and blogger comments beautifully and will show only one form at a time. For the time being apply this new trick.

Replace Blogger Comments Form With FB Comments Box

All the steps are exactly the same as mentioned in the earlier tutorial except step#7
1.  Instead of searching for this code,
<b:includable id='comment-form' var='post'>
Search for this code,
<data:post.body/>
  2.  Just after it, paste the same code we used earlier as shown below,
<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; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>
  • If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'
  • To change the footer credits size, change this value width:510px
  • Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px
     3.  Save your template

Hide or Pop-up Blogger Comment Form

Here you have two options. Either you can,
  1. Hide the comments box but not the comments. The box will appear only when visitors will click the Post comment link. or
  2. Hide both Blogger comments and comments box

For the first option:
A pop-up link will display both Facebook and blogger comments but will hide the Blogger comment form as shown below, SEE DEMO ALSO
FACEBOOK-COMMENTS-FORM

To do this go to Blogger > Settings > Comments   and in the comment form placement option choose the pop-up option as shown below,
pop up blogger form


Save and you are done!
For The Second Option:
If you wish to hide both blogger comments and the comment box? In that case, set comments to hide
hide blogger comments

As mentioned by Blogger Hiding the comments will not delete them but temporarily hide them from visitors.
Hit save and you are done again!

What to Do Hide or Popup the form?

The best SEO and productive advise that I can give is that you may hide the Blogger comment box only but you must display blogger comments and give users the chance to comment with any platform they may like. In short the popup option is the best. Blogger comments are crawled by search engines and they are an important part of your content so its better that you don't hide them.
With coming days I will come up with more tweaks related to this brilliant traffic gifting Facebook plugin and will try to make it more blending with some customization tips.
You must know:

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

32 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks To You About That ..................
    I have a Question. If you Can Then Kindly Answer it ..........
    If You Can Then Kindly Write a good Article about Backlinks ?
    yhanks

    ReplyDelete
  2. Hi Mohammad This is a killer post thanks for sharing
    regards
    hackerstips.tk

    ReplyDelete
  3. I think the Code should be data:post.body instead of data:pos.body what you have given. Anyways my problem is in my Template there are two data:post.body So under which one should I paste?

    ReplyDelete
  4. Akshay

    Thanks for reminding buddy. I have corrected the code. Choose the one close to which you find items near your post titles or items below posts.

    ReplyDelete
  5. Hi,
    i have done all the steps but in the end after i click save i got this msg :

    XML: Attribute "xmlns:fb" was already specified for element "html".

    what should i do, can you guys help plz ?

    ReplyDelete
  6. Thank you so much for this tutorial. Everything is working as expected, except in one regard (just a minor annoyance, really). Why does an error message occur "Warning http://__________.blogspot.com/2011/07.testing-2.html is unreachable." appear?

    ReplyDelete
  7. @Ziad

    That means you are adding the code twice there. Please go check that code and see you are adding the code after <html only once

    @Gryphon
    Where do you get this error? In facebook box or while saving your template?

    The URL has no proper address and does not exist. Make sure you add the box in your active blog

    ReplyDelete
  8. Hi again Mohammad..
    thanx for you answer,that's right i checked my template i find the code added after <html already,
    how can i fix it in order to add facebook comment box ?
    thnx for you help
    best regards

    ReplyDelete
  9. @Ziad

    See that this code is added only once:
    xmlns:fb='http://www.facebook.com/2008/fbml'

    Delete the repeated one and save your template. The plugin will work just fine.

    ReplyDelete
  10. thanks so much for this tutorial! Amanda @Disney Go To Girl .com www.Disneygotogirl.com

    ReplyDelete
  11. somebody tell me that how to moderate these comments without app id.

    I also tried the standard procedure to add comments according to April 11 instruction release by facebook. the comments box was added but all comments were appearing on all pages :D

    ReplyDelete
  12. Does anyone know any code that would allow these facebook and blogger comments to always be shown with each post - without having to click on the 'comments' link?

    ReplyDelete
  13. sorry for my english can you tell me how to put tabs in the comments, facebook / blogger, like this image demo please?

    http://2.bp.blogspot.com/-CF9og_u_Bh4/TneBOgmqhMI/AAAAAAAACj4/LI3QMWyQnmE/s1600/Image%2B1.png

    ReplyDelete
  14. how can I make it appear on homepage also, not only when you go to post itself?

    ReplyDelete
  15. You Know I Can't Even Find

    nor

    What Should I Do ?
    Blog URL : http://roverit.blogspot.com/

    ReplyDelete
  16. @Neeraj Grover OH Sorry I Found It Forgot To Expand The Widget Templates !
    Thank You

    ReplyDelete
  17. Hi Mohammad,
    I can't find in my code

    I'm using the new blogger interface.

    ReplyDelete
  18. I really like this. It works great, but I have one question. It only appears if someone clicks the title to the blog. It doesn't automatically show up at the bottom of the post. If you visit my site www.peridotdynasty.com you will see what I mean. I want it to be above my sharing buttons, but it is not.

    ReplyDelete
  19. nice post...your blog is awesome..iam also blogger and i apply many tricks on my blog by reading your post..thnx. check my blog http://newsboxblog.blogspot.com

    ReplyDelete
  20. Hey i jst used this trick but there is some problem created that is i select radio option from show to hide, then both of the comment box has been hidden... please resolve this.. http://sptricks.blogspot.com

    ReplyDelete
  21. Thanks for such an interesting article as I'm considering replacing my blogger comments with facebook connect. Can you explain why you haven't done this with this very blog?

    ReplyDelete
  22. Hi Mohammad,

    Thanks for the interesting article.
    Just a question, does your Facebook Comments code work for the dynamic views that Google just introduced recently?

    ReplyDelete
  23. The link shared by "Unknown" is engaged in Spam and Phishing activities. Proceed at your own risk.

    The link shared by "EasyWay" is just a referral link to Facebook which in short has nothing to do with the tutorial.

    --
    Sam Bot

    ReplyDelete
  24. realy good tips, I also would lke to share more on my blog http://oyaah.blogspot.in

    ReplyDelete
  25. hi i tried to get app from facebook as you said but it is showing differently than you explained and i tried all the codes but it is not displaying on my blog


    www.vaabrobotics.blogspot.com

    ReplyDelete
  26. ok i have the facebook comment box but still shows my blogger one, and when i press hide or open in new window the whole facebook comment box disapears :(

    ReplyDelete
  27. i have done it :) thanks nice one

    ReplyDelete
  28. Thank you for your great tips. i got lots of information.

    ReplyDelete
  29. not working.......... when iam searching for "". it gives me more than one , where to put. plz help me.......

    ReplyDelete
  30. hey Plz Help any one...... data:post.body occurs 3 times where to put the code.....

    ReplyDelete