March 5, 2012

Show Facebook Comments Inside Tabs in Blogger - Part 1


tabbed facebook commentsFacebook Comments plugin has rapidly replaced third part commenting system like disqus and others. They are now also being crawled and index by search robots. Our first tutorial on facebook comments box and Facebook comment count was widely appreciated by a large audience and helped most of you. Today we have something even more interesting. Thanks to James we learnt a new way of displaying facebook comments in blogger blogs. We will be using a different approach here and only using the javascript code and CSS code from james and keeping other settings entirely different.


Live Demo

In today's tutorial we will learn how to show both facebook and blogger comments inside tabs that can be easily switched and toggled. The comment count will appear inside the tabs with an icon thus letting the visitor a much clearer option of commenting. The tabs are clickable to behave like buttons.  The tabs act more like two separate pages that let the user decide which commenting system to choose. The tabs are created using normal JavaScript code used for toggle view. Its extremely easy to install if you follow this tutorial carefully. I am sure most of you were waiting for this therefore it would be fun sharing it today.

Facebook Comments Series
Part1: Show Facebook comments Inside Tabs in Blogger
Part2: Display Facebook Comments Count on Homepage (Blogger + Facebook)
Par3: Optimize Facebook Comments To Increase Blog Traffic

Create a Facebook App

In order to control and keep a backup of the comments made on your blog you will need to create a FB application. The steps of creating this app is very simple. Simply follow these easy steps:

Note: Facebook has changed its layout interface so the screenshots could look a little different from current interface. Steps are exactly the same.

  1. Go To Facebook Developers Page
  2. Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"
site-url
     3.   Hit "create app" button and proceed
     4.   After submitting the security check code you will see this page,
app-id
       5.   Save that FACEBOOK APP ID in a notepad because we will need that later. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"
image
      6.  One the new window that appears click the Edit Settings link ,
edit-settings
        7.  Then go to Website option and write your Site Domain as blogspot
website
       8.  Save Changes and jump to the next step of this tutorial

Creating Tabs For Facebook Comments in Blogger

For blogger comments to display next to tabbed facebook comments, your blogger comment form settings must be set to embedded below post. To show blogger comments below posts do this:

  1. Go To Blogger > Settings > Comments
  2. Set "Comment Form Placement"  to  Embedded below post

Now follow these easy steps one by one:

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the "Expand widget templates" box
  4. Search for <head>
  5. Just below it add the following code,

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/>
<meta content='FACEBOOK APP ID' property='fb:app_id'/>


<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>

    <script type='text/javascript'>
    function commentToggle(selectTab) {
      $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
      $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
      $(&quot;.comments-page&quot;).hide();
      $(selectTab + &quot;-page&quot;).show();
    }
    </script>

 

  • Replace Blog LOGO Image Link with the image link of your blog logo. Your logo size should be as small as 30px by 30px in size. If you don't want a logo to display whenever someone shares your comment on his wall then simply delete the yellow highlighted code.
  • Replace FACEBOOK APP ID  with the numeric facebook app Id that you were asked to note down. You can find your Facebook App ID in settings page of the app you created earlier.

      6.    Search for <html and replace it with the following code,

<html xmlns:fb='http://www.facebook.com/2008/fbml'
Note: Give a space at the end of the above code.
   7.  Now Search for ]]></b:skin>    and just above it paste the following CSS code,
/*--- Tabbed Facebook Comments By MBT ----*/

.comments-page {  background-color: #f2f2f2; width:450px;}
    #blogger-comments-page {  padding: 0px 5px;  display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

  • To change the background colour of tabs content area simply edit #f2f2f2
  • To change the width of the comment box container change width:450px;
  8.  Next search for this
<div class='comments' id='comments'>
After the first occurrence of the above available code paste this code:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>


    <div class='comments-page' id='fb-comments-page'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div id='fb-root'/>

       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by 
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>


</b:if>
     </div>


 

Note: If the above code gave errors then delete the red highlighted lines from the code above.

  • To change the width of the comment box size change the numeric value width='450' . Keep it equal to the width of the comment box container we set earlier in step#7.
  • To change the footer credits size (i.e. Facebook Comments by blogger Widgets), change this value width:440px
  • Keep a difference of 10 pixels between the comment box size and footer size. For example if you set comment box-size to width='450' then set footer-size to width:440px
  • To change the text inside tabs edit Comments for Facebook Tab   and  Comments for Blogger Tab

      9.   Save your template and you are All Done!

Visit your blog to see it working just fine. :)

Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in blogger

Moderate Comments

In order to mark any comment as spam or remove/hide any comment you need to log into your facebook account and then visit this page:

Facebook/tools/Comments

You can moderate all comments at once without visiting every post in your blog and moderating comments individually for every post.

How To allow Other Login Providers

With Facebook Plugin you can choose to accept comments even with Yahoo, Hotmail or AOL. To accept comment from third part providers simply click the Settings link on Facebook comment box inside any of your post and click the checkbox that says "Other login providers"

image

other login providers

Note: The Settings link or Moderator view will only appear on your new new posts or on posts with less than 2 Facebook comments posted. There fore in order to make a one time settings, simply visit your fresh post and edit it from the facebook tab.

Credits

This tabbed commenting system has been enhanced and publicized by MBT blog by using scripts of James. If you wish to share this post with your readers then kindly link back to this post as the only favor for our efforts.

Need Help?

I am sure this post looks a little too techy but its made as easy as possible. If you ran into a trouble then just let me know by posting your query. The next part of this series will teach you how to display facebook and blogger comments count on homepage in a presentable way. Peace and blessings pals! :)





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 »

147 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Nice Post :)

    Waiting for the 3rd part of this series

    www.skfanclub.com

    ReplyDelete
  2. thanks a lot for this post thanks mohammed

    ReplyDelete
  3. nice one and waiting for such post

    ReplyDelete
  4. Hello, I'm having trouble with an error code. I've followed your instructions but this appears when I click "Preview"...

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "b:includable" must be terminated by the matching end-tag "".
    Error 500

    Can you please help?

    ReplyDelete
  5. complicated to install..... but nice.. http://myblog0411.blogspot.in/2012/02/love-valentines-day-and-their-facts.html

    ReplyDelete
  6. Doesn't work for me :( my blog is www.gizmotraker.com

    ReplyDelete
  7. Oopsy the third step says: par3...!!

    ReplyDelete
  8. Doesn't work for me. I have the same problem with @lisa

    ReplyDelete
  9. @Lisa and @Sanket

    Oops humble apologies I had mistakenly written the wrong cod ein step#8. I have updated it and its now working just fine. If you received errors just remove the red highlighted code from step#8

    ReplyDelete
  10. how about loading blog page
    after you using tis plug in?


    www.zulkbo.com

    ReplyDelete
  11. @Mohammad Mustafa Ahmedzai

    Thanks! The code works now. But when I've tried to click between the tabs, they seem to get stuck. I can't get back to the FB tab once I've clicked on the Blogger tab? You can see here: http://lisadiederich.blogspot.com.au/2012/03/maternity-shoot-peta-baby.html#comment-form

    Also, is there a way to have the comments box appear on the main page under each post (instead of having to click the "Leave a comment" link? Sorry to bother. Thanks! :)

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. I have activated Facebook Comment Box previously. So what can i do???

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. why in my blog? have followed the instructions and successfully but when I look at her blog does not look like the existing demo.

    ReplyDelete
  16. @Lisa

    The tabs are click able but in your case as soon as the user brings his cursor on the text the tabs get inactive. I just hope you added the code in step#8 as given without making any changes to div sections.

    You can display the plugin on homepage by removing this line from step#8

    <b:if cond='data:blog.pageType == &quot;item&quot;'>


    and the second last closing b if tag. which is

    </b:if>


    However I would not recommend displaying comment boxes on homepage.

    @মোঃ নেওয়াজ মোরশেদ (বিকন)

    If you can understand the tutorial above then you can make necessary changes to create this look else you may remove your comment box and re-add it by implementing the above tutorial. Your comments wont get deleted because your Facebook Application ID is not being deleted and will store all your comments and display it upon fresh installation again.

    @Wartabeta

    After the introduction of threaded comments, Blogger team has really messed up the codes. The above tutorial is the easiest way to add this plugin. A little HTML knowledge will enable everyone to add it correctly. Since template codings are different for each therefore small changes will occur.

    ReplyDelete
  17. your ex. not work with internet explorer 7 ,8,9 whay?
    but work with my blog
    http://www.tqarob.com/

    ReplyDelete
  18. Much respect for you .Because you are expending of coding blogging in our community .i envy on your self. . .

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. How to make the post image thumbnail of every post appear as the blog logo for that post whenever a comment is posted on the post. Because a single logo for all posts caused a lot of problem and appeared on almost everywhere for every widget that required a thumbnail and when I removed the blog logo part of the code, the posts like or sent to facebook appear without any snippet or thumbnail and only the post url is displayed. Please Help!

    ReplyDelete
  21. gr8 and i like it i have been looking for i did it as well as i can but it showing the blogger comment box below the tab there showing 2 below facebook u can see in this pic so pls help me thanks this is my blog medialivecenter.com

    ReplyDelete
  22. even this code showing on top of header of my site meta expr:content='data:blog.pageTitle' property='og:title'/> pls help medialivecenter.com

    ReplyDelete
  23. Perfect tips. I tried but It wasn't shown as the demo. The old blogger comment box still showing under the FB comment tab. And I can't get back the previous tab after clicking on one the tabs...
    Please fix them my bro!
    Best regards.

    ReplyDelete
    Replies
    1. also i have same problem if you have solution mail me bro
      sj1prince@gmail.com

      Delete
  24. This is really nice, but I can't figure it out because facebook has changed so much. Can you update??

    ReplyDelete
  25. :( I followed your instructions and it's not showing on my blog..what have I done wrong :( those24littlehours.blogspot.com

    ReplyDelete
  26. @Haleyknitz

    yup..when i open fb app developer, it doesn't show the one in your tutorial

    ReplyDelete
  27. am having trouble with this..
    in FB's new layout interface, i CANT SEE any BOX asking for SITE URL.....Am sure it'll be there...bt cant find it out yet...
    pls help me for this...

    ReplyDelete
  28. Just a question:
    If I have instead of blogger commenting setup the Disqus how I should proceed?
    Thanks!

    ReplyDelete
  29. What makes Mybloggertricks stand among other tutorial blogs is the LIVE DEMO. Very helpful and unique. Thanks again for this trick.

    ReplyDelete
  30. Is there a way to get such a thing working with Dynamic Views? Thanks so much! Please help.

    ReplyDelete
  31. I improved this tutorial and it works for me. See the improved tutorial here http://sag-3.blogspot.com/2012/03/tutorial-add-facebook-and-blogger.html

    ReplyDelete
  32. Mine works incomplete, fb tab dont hide BLOGGER POSTS

    http://www.jaragua.tk/2012/03/desde-villa-jaragua-miss-xaragua-2012.html

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
  34. i try all the process but didnt change anything in my blog.. :(
    Can u pls figure out why? me blog http://cebisanku.blogspot.com
    Thx.

    ReplyDelete
  35. Really great tutorial, but it won't work on my blog.
    http://moja-kuhinjaa.blogspot.com/
    Little help?

    ReplyDelete
  36. I Have Done It All Perfect, But Its Showing Both Facebook And Blogger Comments Together. Check The ScreenShot Below

    http://dl.dropbox.com/u/48496881/comment%20form.bmp

    ReplyDelete
  37. I want to use blogger default comment first & followed by fb comments as hidden! but page loads both the comments at the same time! what to do? example here - http://www.nilapennukku.com/2012/03/blog-post_24.html

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. Can't find where to change the language settings for links i.e.
    'like' 'comments' 'reply' etc...
    Thanks in-advance.

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. Once I click on blogger comments, I can't click on facebook comments anymore... I lose the facebook comments until I refresh the page. Does this have anything to do with the fact that I have comments embedded only? I didn't see an option in blogger that said below the post. http://www.theuninformedamerican.com/

    ReplyDelete
  43. Hi, I'm having the same problem as Lisa (comment #15), I can't click back on the Facebook tab once I click at the Blogger tab. I did remove <div class='clear'/>
    </div> from step #8, but the problem persist.

    I think this is a nice tutorial, and thank you for your time explaining it!

    ReplyDelete
  44. Hi,
    Need help with 2 things
    1. Object at URL 'http://freemp3boy.blogspot.com/2012/04/tupac-shakur-me-against-world-india.html' of type 'article' is invalid because the given value 'data:blog.postImageThumbnailUrl' for property 'og:image:url' could not be parsed as type 'url'.
    I need the post image to show when sharing to facebook.

    2. This comment has not yet been published to Facebook comes up instead of automatically allow person to publish their comment on facebook. And also, it the Post To Facebookcheckmark is not automatically checked. Take your time no rush thanks and great job, you have the best Blogger Widgets, Tips and Assistance blog, youre number 1

    ReplyDelete
  45. @Carolina Patrício

    Hi Carolina,

    The same thing happened to me, so I carefully retracted my steps and it seemed to work. I just did the whole steps again and it worked. Just make sure you don't delete one single piece of code and check your blogger comment settings.

    ReplyDelete
  46. salam
    great post bro...
    It works on my blog : http://howtomakez.blogspot.com but I got Only one problem, but first I wanna make one thing clear, which is the problem which some people are facing:
    the code you highlighted in RED i.e.

    <div class='clear'/>
    </div>

    dont delete this code if you are facing and problem in saving the template with this code included, its important because when we try to switch back from blogger comments to facebook comments, we cant... the solution is:
    Just remove the slash which is just after the <div class='clear'
    so it leaves us with:

    <div class='clear'>
    </div>

    which just works perfect B-)
    so use

    <div class='clear'>
    </div>

    instead of

    <div class='clear'/>
    </div>
    undefinedTHE RED ONE)




    and now come to my problem. When i click on the blogger comment tab, it shows the blogger comments only but when i click on the facebook comment tab, it shows both the blogger comments and the facebook comments :-undefined i think there is some problem with step5 - script2 , , , ,or , , , step8

    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggleundefined&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggleundefined&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div>



    Thanking you in anticipation

    PS. ♥ GGGGRRRRRRRRREEEEEEAAAAAAAAAAAATTTTTTTTTTTTT blog ♥

    ReplyDelete
  47. Hi Im getting "This comment has not yet been published to Facebook. Publish Comment"
    But the Publish Comment is transparent. How do I get rid of the entire message so that it doesnt ask people who try to post a comment?

    ReplyDelete
  48. one question Sir.. Why my older post blog didnt show the widget>?its only be seen in new post my blog http://sempoicornerdisini.blogspot.com

    ReplyDelete
  49. Not working for me ??? :( i always try ur tuts but any of them never work for me... irritating .. >.< :(

    Help if you can ... no errors but no comment box below post .. :(

    ReplyDelete
  50. Hi
    Did everything according to instructions, парсер блоггера, There are no errors visible, but the comments form does not appear.
    Help please.

    http://www.kinomelochi.com/2012/03/blog-post_31.html

    ReplyDelete
  51. @-=JOBG™=-

    I think the topic is closed by the author

    ReplyDelete
  52. First of, thanks for the tutorial!
    I installed it all like you said, but I don't see tabs. Neither on Firefox, nor Chrome; nor Safari.

    There's just following:
    FB logo then "comments"
    Blogger logo then "x comments"
    and "facebook comments by Blogger Widgets"

    I did a lot of tweaking on my blog (and also a coder), so that might be the issue, but I'm unsure what to do next? Or maybe it's the FB app that I did not configure right? It was different in presentation that in your tutorial.

    Here's my blog: http://petitplatbysk.blogspot.fr

    ReplyDelete
  53. cannot find div class='comments' id='comments' in template html

    ReplyDelete
  54. @Engr AH

    I have the same problem. You have found a way to fix this?

    ReplyDelete
  55. Hi,
    First i want to thank you for your tutorials and tricks it was helpful
    I had little issue about this tutoria, I want to show the facebook tab without having to add one comment in blogger, i tried differents ways like removing this code :

    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggleundefined&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>

    from the code that i had to paste under this line: <div class='comments' id='comments'> but it didn't work

    Then i tried to remove blogger threaded comments by following your tutorial : http://www.mybloggertricks.com/2012/01/how-to-remove-blogger-threaded-comments.html
    but it didn't work neither
    So i request your help in order to solve this, i'll be very grateful
    Thank you,
    Have a good day.

    ReplyDelete
  56. Help i am having this error

    Error parsing XML, line 2055, column 3: The element type "b:includable" must be terminated by the matching end-tag "".

    ReplyDelete
  57. @Udit Kakar me too got the same problem . I followed your every step . But when the template is saved it gives an error
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "b:includable" must be terminated by the matching end-tag "".

    Error 500

    Can you please help me ?

    ReplyDelete
  58. Hey it keep displaying the blogger comment,

    http://i.imgur.com/iitRt.png

    what should I do?? Please help!!

    ReplyDelete
  59. This comment has been removed by the author.

    ReplyDelete
  60. @Gab Cepe Roy

    hello .

    we same problem with your..

    this is =>

    Why my Facebook no moderator at there ?? and why blogger comment same at Facebook comment .. please help me ..

    my blog is http://viral2u.blogspot.com/2012/05/test.html

    please checked with me.. okey.

    and send at me problem at my email => dealertopup@yahoo.com

    tqvm

    please visit my blog another

    Http://www.esosial.net/
    http://www.ads-fb.blogspot.com/

    ReplyDelete
  61. so, no one success with this "extremely easy to install" tutorial?

    ReplyDelete
  62. Upon clicking the link Facebook Developers Page you provided at the beginning of this tutorial, a different Facebook page opens and then a box pops up with different questions.

    Instead of Sitename and Site URL that you said in this post, the questions are App Name and App Namespace.

    For the preciseness of your content, can you please give a few instructions on what to enter on those boxes?

    Because I'm afraid your guide is no more valid on the new Facebook page at which users land after clicking "Facebook Developers Page" you mentioned above.

    I think it's not only the layout of FB that has changed but the link of the "Create App" for your tutorial. Users get lost right at the very first page of Facebook Developers area.

    Please just give us a little bit new instructions on that new page.

    Thank you very much in advance.

    ReplyDelete
  63. I used the manual methods and it works.
    Do visit facebook developer's site, it's awesome!
    http://developers.facebook.com/docs/reference/plugins/comments/

    ReplyDelete
  64. I have added given your fb comment code but i received template error like

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: Attribute "xmlns:fb" was already specified for element "html".

    Error 500

    ReplyDelete
  65. This comment has been removed by the author.

    ReplyDelete
  66. Its not working... please chech in my blog http://kmdeepakkumar.blogspot.com

    ReplyDelete
  67. sorry but not create app here have some efferent to create app and i con't create these

    ReplyDelete
  68. Please help how to post html codes like yours that i can put the code and my visitors can copy the code. thanks!

    ReplyDelete
  69. No doubt why you get so many blog comments.
    funny statuses

    ReplyDelete
  70. i've directly follow the step and the form shown nicely, but the problem is blogger form box still keep appearing below fb form box, even i choose fb tab...
    could you find the problem please, here mmy demo blog http://masihcoba1.blogspot.com/2011/04/this-is-new-post.html

    ReplyDelete
  71. @admin to make the app, look at this link http://jensontaylor.blogspot.com/2012/03/integrate-facebook-comments-for-blogger.html

    ReplyDelete
  72. Greetings Bro,
    Please i tried using this on my news blog here http://storiestrendingnow.blogspot.com/
    but after following and implementing the steps i couldn't see the facebook comment on my site, i made a comment to test it yet couldn't see it.
    Pls i don't know if my template doesn't support it or what the problem is. Pls help me out on this.
    Thanks.

    ReplyDelete
  73. @Desire, @volos_86

    I have the same problem... there was no error at all but no comment box showing too..

    ReplyDelete
  74. after the second occurrence i added and removed the red highlighted tags. Worked fine. Thankyou! www.hsquares.in

    ReplyDelete
  75. Hi Mohammed,
    Informative post indeed. I followed all the steps given above but was facing a problem.In the link given below:
    I can see that both facebook & blogger tabs are present.
    I cannot toggle between the two tabs as FB tab is frozen.So therefore I cannot post comments using FB.
    http://thelaughingmessiah.blogspot.com/p/notice.html
    Would be gr8 if u could solve this tech issue.
    Thanks in advance !!!

    ReplyDelete
  76. i had trouble installing this but i found a very good website and simple to install, plus it looks cool on your page http://intensedebate.com I use it on my site http://r4ndomshit.blogspot.co.uk/ check it out for yourself. hope you dont mind me posting this admin.

    ReplyDelete
  77. Hi Mohammed, this is Ahmed...thanx for ur hard work..i have a problem...i followed the steps but the facebook comments box doesnt appear as well as the tabs...nothing changed at all...

    my blog is Arabic+im using un official template+ before i started implementing this tutorial i DELETED the facebook comments Box and came here to add it again...plz help

    ReplyDelete
  78. forgot to put my link WWW.Vitameen.Net

    ReplyDelete
  79. I have error like this ! >>>

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "b:includable" must be terminated by the matching end-tag "".
    Error 500

    ReplyDelete
  80. Many please help! I did everything as described and yet the comments box does not appear. If anyone has any idea, I will be grateful to share, here is the address of my page: http://www.utopia-bg.com/

    ReplyDelete
  81. Hy, I wanna ask something.

    if theree's no
    <... class='comments' id='comments'>
    in my template..so where do I can place the script code in step #8??

    please help me

    ReplyDelete
  82. bro i was using blogger and facebook comment system at once, now i switched to disqus and all my FACEBOOK comments are removed, what can i do? the question is how can i implement both systems at once? facebook and disqus

    ReplyDelete
  83. Help if you can ... no errors but no comment box below post .. :(
    only blogger comments are shown, please help me i think there is some problem....

    email: irmemon225@gmail.com
    blog: itwebister.blogspot.com

    ReplyDelete
  84. I followed the steps and successfully integrated the facebook comment with blogger.The only problem I have is that the tabs are displaying on top of each other instead of side to side.How do I fix this problem? My blog is www.koidemoblog.blogspot.com

    ReplyDelete
  85. Hi please help me,
    i am having a problem on tabs, when you click the fb comment tab it shows both fbcomment and blogger comment box but when i click blogger comment tab, the facebook comment box will hide,

    i would like to hide blogger comment box when fb comment box was shown, how to do it? Im a bit confused,, thanks..

    ReplyDelete
  86. Whoooo
    Whoooo
    Whoooo

    It's awesome........................

    ReplyDelete
  87. It worked good on post pages. Thanks for that. But there is a problem as well. A portion of it appears on homepage also which makes the homepage ugly. So, I hid posts from home page. Yet it appears on any posts' list e.g on posts by label.
    You may see it yourself on my blog http://iloveshibir.blogspot.com/search/label/bcl.
    How to hide everything related to the comment box on homepage and search label pages etc?

    ReplyDelete
  88. Thanks a lot !!! i was trying to include the facebook comments for my blog for a quite long time .most of the tutorials where not working fine,and was not able to sort it out the issue, finaly your clean descriptions helped.. thanks !!!!!!

    http://www.3daspirants.com/

    ReplyDelete
  89. This comment has been removed by the author.

    ReplyDelete
  90. Hello Blogger tricks, Thanks for your great posts. I have visited your blog a month ago and your tricks and design have been adopted to my blogger. Just one thing I have to solve.. i hope you can help me.

    and you commented this Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in blogger
    Yes I have activated blogger threaded comments and I don't understand how to get rid of threaded comments in my blog. If you have any idea or the post about this issue, please let me know. I really appreciate your kindness..


    Heejae Kim
    http://partskor.blogspot.kr/

    ReplyDelete
  91. <b:include name='nextprev'/>
    </b:if>
    </b:includable>
    <b:includable id='comment_picker' var='post'>
    <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
    <b:else/>
    <b:if cond='data:post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='status-message'>
    <b:if cond='data:navMessage'>
    <div class='status-msg-wrap'>
    <div class='status-msg-body'>
    <data:navMessage/>
    </div>
    <div class='status-msg-border'>
    <div class='status-msg-bg'>
    <div class='status-msg-hidden'><data:navMessage/></div>
    </div>
    </div>
    </div>
    <div style='clear: both;'/>
    </b:if>
    </b:includable>
    <b:includable id='comment-form' var='post'>
    <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
    <h4 id='comment-post-message'>
    <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:voidundefined0)'><data:postCommentMsg/></a></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
    BLOG_CMT_createIframeundefined&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
    </div>
    </b:includable>
    <b:includable id='threaded_comments' var='post'>
    <div class='comments' id='comments'>

    <!-- 페이스북 코멘트 MBT -->
    <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggleundefined&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/s400/fbcomment.png'/>

    ReplyDelete
  92. <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggleundefined&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div>

    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by
    <b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
    </div>

    </b:if>
    </div>

    <!-- 페이스북 코멘트 MBT END -->

    ReplyDelete
  93. Sir! i have a question
    is there is any side effect of this facebook comment box, Like SEO of google Ranking?

    ReplyDelete
  94. when i click at the blogger tab the facebook comment box disappear permanently. tell me what shall i do?

    ReplyDelete
  95. This comment has been removed by the author.

    ReplyDelete
  96. thanks for this help but after all setup unfortunately it not working in my blog mithilaworld.blogspot.com or not show any error,please email me dklove84@gmail.com

    ReplyDelete
  97. Can you do an update with the new Facebook layout interface? I'm having a hard time creating the app. Thanks.

    ReplyDelete
  98. Can You Check My Blog... Still Old Comment Box Is Appearing.
    My Blog. www.tollyarea.com

    ReplyDelete
  99. voodoo spell has amazed me as I have seen results from everything he has done for me, often quite fast. While I have been to other spell casters who I believe tried their best; voodoo spell simply is the best, being truly gifted and having written the book on it. In addition, his integrity truly sets him apart in the field as he has told me several times I did not need a spell when he just as easily could have said I did. He is a truly kind and generous person who took time out on a weekend recently to help with a difficult ongoing case for me which brought him no personal gain. His work resulted in an all out miracle with a man I have been in love with for two years. voodoo spell rocks!. i so much believe in this man here is the contact in case you have any problem, oduakar1@live.com, God bless

    ReplyDelete
  100. 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 temporarily change the opening div tag to just <div> and refresh the page(s) to see how Facebook feeds the text. 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='60px' type='text/html' width='450 px'>

    </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
  101. 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 temporarily change the opening div tag to just <div> and refresh the page(s) to see how Facebook feeds the text. 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='60px' type='text/html' width='450 px'>

    </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
  102. i have a problem in <html xmlns:fb='http://www.facebook.com/2008/fbml'
    plz help me

    ReplyDelete
  103. done, but have something big mistake... facebook & blogger same area, how to move? or hide blogger comment?? ohsemtv... thx

    ReplyDelete
  104. has anyone figured out how to remove the blogger comment box from below the facebook comment box?

    ReplyDelete
  105. @BIJENDER SE/\/SEXvery complicated to install... and give me an error... no... tired to do that... i'am fail.... my blog template didnt match

    ReplyDelete
  106. Can You Add It to my Blog Template Plzzz :)

    ReplyDelete
  107. Hi! Nice post but, I receive this error after saving step 8.

    Error al analizar XML, línea 1379, columna 5: The element type "b:includable" must be terminated by the matching end-tag ""

    I think some closing div tag is missing in your code but I don't know the real reason for the error.

    Thank you very much

    ReplyDelete
  108. Hi. Thanks for the helpful post. Its all working fine, however whenever someone comments on blooger comment, then by default only blogger comments is getting displayed and FB comment is getting hidden. Please help me out.

    www.crazydirect.com

    ReplyDelete
  109. Hi, my facebook comment box is getting hidden, whenever womeone comment in blogger comment section. Please help.

    www.crazyirect.com

    ReplyDelete
    Replies
    1. Same with me ! how to fix this ?

      Delete
  110. My Blog looks awfull after adding the fb comment box
    www.itistheplace.blogspot.com

    ReplyDelete
  111. Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
    software companies in indore

    ReplyDelete
  112. I am struck on the 1st step. The way you describe it, the google page isnt the same :( Please update this

    ReplyDelete
  113. After reading your post about using both facebook & blogger comment systems I noticed your only using the blogger comment system… I'd love to know why your only using bloggers & not face books as I'm trying to decide which route to take for my blog? Thanks so much & I'll subscribe in hopes to hear your answer.

    ReplyDelete
  114. Tried to many times and read all comments which shows that Admin is not responding, so there is no way to ask for a solution here.

    ReplyDelete

  115. http://brother572.blogspot.com/

    Online Earning,Blogging,Seo,Training
    Coruses,Games,Software,Mobile,Tips and
    Tricks,Hacking and More

    ReplyDelete
  116. Facebook Comments plugin has rapidly replaced third part commenting system like disqus and others. They are now also being crawled and index by search robots. Our first tutorial on facebook comments box and Facebook comment count was widely appreciated by a large audience and helped most of you. Facebook password hack

    ReplyDelete
  117. This comment has been removed by the author.

    ReplyDelete
  118. Thank you so much..Your code is working fine..

    ReplyDelete
  119. After 3 years of blogging career, I feel that default comment system whether its Blogger or WordPress is always the best practice.
    Recently, Google Plus comments system for blogger is also not much pleasing. Although its quite good. but when it comes to designing the comment system, its much complex.
    I am using Google Plus comment system in one of my online education blog, but it doesn't sounds effective.

    ReplyDelete
  120. Dose Not Work for Me my blog is http://googli4u.blogspot.com

    ReplyDelete
  121. i'm post every thing but he is not show in my blog i'm post a blogspot comment he hidden facebook comment plz help me

    ReplyDelete

  122. I am really happy that dr.marnish reunited i and my lover back. dr.marnish@yahoo.com is a rare spell caster to find and I’m glad that I met him on time to help me bring back my lover. I’ll be forever thankful.” if you need his help too you can call him +15036626930 dr.marnish based in united state

    ReplyDelete
  123. Please help. Blogger Comment does not hide. They both show. Here's my blog
    http://bloggertemplatescloud.blogspot.com/

    ReplyDelete
  124. This comment has been removed by the author.

    ReplyDelete
  125. This does not work well, Can YOU see to it, Please Reply.
    http://santali-in.blogspot.in/2013/07/iril-kuri-santali-album.html & also on some page it is showing & on others it's not.

    ReplyDelete
  126. when i click at the blogger tab the facebook comment box disappear permanently.foto payudara tell me what shall i do?

    ReplyDelete
  127. This is really nice but I can't figure it out because facebook has changed so much Jersey Indonesia . Can you update?

    ReplyDelete
  128. this is good post...

    i like this...

    please can you visit here..

    http://bantalsilikon01.blogspot.com/
    http://bantalsilikon01.blogdetik.com/bantal-silikon-bantal-silikon-murah-bantal-silikon-malang-bantal/
    http://bantalkekabumurah.blogspot.com/
    http://bumbupecel1.blogspot.com/
    http://bantalaaa.blogspot.com/2014/04/bantal-silikon-bantal-silikon-murah.html
    http://bantalsilikon1-23.blogspot.com/2014/04/bantal-silikon-bantal-silikon-murah.html
    http://bantalgood.blogspot.com/2014/04/bantal-silikon-3-tahan-tahun.html
    http://bantalsilikonmalang1.blogspot.com/2014/04/bantal-original-silikon-malang.html
    http://bantalsilikonmurah.blogspot.com/2014/04/bantal-silikon-original-085-635-945-40.html

    http://www.bantalsilikon01.blogspot.com/2014/04/bantal-silikon-original-merek-lutuye.html

    http://marinirseo.blogspot.com/
    http://marinirseo.blogspot.com/
    http://marinirseo.blogspot.com/


    tengs very much...

    ReplyDelete
  129. السلام عليكم
    حرب التتار -ملوك حرب التتار
    http://tatar7.com/ts6/register.php?ref=1038

    ReplyDelete
  130. To be a member of illuminati church today and earn $500,000.00USD in every two weeks to become Rich and famous among the satisfied citizens. This is just a brief summary contact us now via email on illuminatichurch@outlook.com OR CALL william on +2348189357261
    contact us now via email on illuminatichurch@outlook.com OR CALL william on +2348189357261

    ReplyDelete