Blogging Ethics

MBT Tube

March 6, 2012

Facebook Comments Counter For Blogger - Part2


facebook comments counterThis is second part of our series on Facebook Comments plugin. Facebook comments are now optimized and easily indexed and crawled by search engines. Facebook comments appear in search results and can drive your traffic both from its 845 Million registered users and also from Mega Search engine Google. I have already shared a tutorial on how to count the number of Facebook comments and show it on your blog homepage and today we will use the same script but with a different design and feel.  Adding this comment counter is really easy. All you need to do is to track the steps properly. Please see a demo first,

 

Live Demo

Facebook Comments Series
Part2: Facebook Comment Counter For Blogger (Blogger + Facebook)
Par3: Optimize Facebook Comments To Increase Blog Traffic

Count Facebook Comments in Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the "Expand Widgets Templates" box
  4. Search for this code,

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

    5.   The above code can occur thrice. Just replace the first occurrence of the code above with the following code:

<br/>
<div style='border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:3px 0px; text-align:right;'>
<img class='comments-tab-icon' src='http://2.bp.blogspot.com/-0KwkJZ9sVeY/TkElIglAIxI/AAAAAAAAEeg/PGofjRgMbmI/s400/fb.png'/>
<a class='comment-link' expr:href='data:post.addCommentUrl'><fb:comments-count expr:href='data:post.url'/> Comments</a>

<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</div>

       6.  Next search for ]]></b:skin>  and just above it paste the following CSS line;

.comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}

       7.   Save your template and you are all done!

Visit your blogs and you will see Facebook comments Count along with blogger comments count for each post between two horizontal borders.

Troubleshooting

If you needed any help just let me know. I hope this part was less techy compared to the previous one. If you need any assistance then just post your query. I know I am too lazy at replying quickly but I will surely answer every query asked. Peace and blessings dear brothers. :)





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 »

37 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. thanks a lot mohammed for this post

    ReplyDelete
  2. //Peace and blessings dear brothers. :)
    Thats not fair; you do this frequently...anyways nice series

    ReplyDelete
  3. A facebook comment is not showing on my blog
    please help me .. please
    here's my template http://www.mediafire.com/?q7db0sadwbxd18n
    Thank you

    ReplyDelete
  4. Bro Still my Guest Post is Not Published :(

    ReplyDelete
  5. Wow, this really a nice article, i must add this to ma blog Okaztle's Crib soon.

    ReplyDelete
  6. Hi admin.Please solve my problem.Google robots restrict my more that 50 pages.In the result i lost many visitors day by day.Please help me admin.My blog is www.hackingworld.in

    ReplyDelete
  7. I have try this step but when I try to save my blog template, the error code show like this :
    The element type "b:if" must be terminated by the matching end-tag ""

    I have take it like this :

    <br/>
    <div style='border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:3px 0px; text-align:right;'></div>
    <img class='comments-tab-icon' src='http://2.bp.blogspot.com/-0KwkJZ9sVeY/TkElIglAIxI/AAAAAAAAEeg/PGofjRgMbmI/s400/fb.png'/>
    <a class='comment-link' expr:href='data:post.addCommentUrl'>
    <fb:comments-count expr:href='data:post.url'/>Comments</a>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <b:if cond='data:post.numComments == 1'>1
    <data:top.commentLabel/>
    <b:else/>
    <data:post.numComments/>
    <data:top.commentLabelPlural/>
    </b:if>
    </a>

    Please help me, Admin....???

    ReplyDelete
  8. And the CSS code :
    .comments-tab-icon {
    height: 14px;
    width: auto;
    margin-right: 3px;
    }

    I have take it on obove ]]></b:skin> like this :

    .comments-tab-icon {
    height: 14px;
    width: auto;
    margin-right: 3px;
    }

    ]]></b:skin>

    I Wait your helping, on my blog Share With Agung Talaga

    ReplyDelete
  9. 6. Next search for (------) and just above it paste the following CSS line;

    You have missed .
    I noticed when i was installing it on my blog.Thanks

    ReplyDelete
  10. @FAIZAN ALI
    Mohammad is too busy these days. He will get in touch with asap.

    @Agung Talaga
    I wasn't able to detect the problem as I don't have your template.
    Try adding another at the end of the code.

    ReplyDelete
  11. @Bhavesh Pamecha Thanks Bro My Guest Post is Live At SEM Thanks Mustafa Sir :D

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

    Error 500

    ReplyDelete
  13. *step 6, search for what? looks like you missed something? thanks

    ReplyDelete
  14. Nice widget .

    Regards,
    http://www.tracetricks.blogspot.in

    ReplyDelete
  15. @vincent47
    That is what I want to know, search for what.

    ReplyDelete
  16. For Step 6:

    Search for ]]></b:skin> guys :)

    Hope this is helps who had trouble with Step 6.

    ReplyDelete
  17. UPDATE

    @Elizabeth @vincent @Agung
    Humble apologies for the inconvenience. I wrote the post in hurry and missed few tags in the code. I have updated the codes and now everything must work perfectly with no template errors.

    Thanks bhavesh for helping them out buddy. Yes I am badly stuck with university projects.


    @sunil thakur
    You must submit multiple sitemaps. Read our Blogger SEO PACK series and use the Sitemap Generator and Pinger tool

    ReplyDelete
  18. not work with internet explorer 7 ,8,9 whay?

    ReplyDelete
  19. Mustafa Bhai ye to tab apply karenge jab canonical url ka prob solve hoga.. as u know your FB comment for blogger was widely appreciated by bloggers.. and now when we're in deep trouble a.k.a (canonical URL) hapnd, you're gone :p your thread that was helpful but still we're unable to solve that issue, users from india are still commenting on .in version of blogs. i /we can't modrate that and don't even know if replied. One more thing.. Fb comment notification also not arriving. i'm unable to site back relax and take a sip of coffee for many days :P

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

    ReplyDelete
  21. @Mohammad Mustafa AhmedzaiThanks and now it works. It takes a few minutes to load, even a few hours but it works now :)

    ReplyDelete
  22. facebook comment is not showing on my blog
    here's my URL http://www.pareshgiri.com
    Thank you

    ReplyDelete
  23. Thanks for this widget mohammad....

    Please help me out... i'm facing a issue in my blog www.csk247.blogspot.in When I share any of my page in facebook I'm not geting the title,description or anything... I'm getting only the link as a text Please help me to solve this issue... This is affecting my blog traffic badly....

    Waiting for your kind reply
    Daniel Raja

    ReplyDelete
  24. Did you make any more changes to the html so that the blogger comment box does not appear in the facebook tab?

    You seem to have hid this 'comments comments-page'
    But I can't find this in my html...

    ReplyDelete
  25. Thanks for sharing this. I have may FB comment now at my Blog. http://noonebuythis.blogspot.com

    ReplyDelete
  26. Hey Mohammad,
    Could you help me with my template? I tried to edit and save it but its giving this message : More than one widget was found with id: Navbar1. Widget IDs should be unique.
    Can't save it because of this problem. Help please! Thanks :)

    ReplyDelete
  27. It worked but the number of comments is not showing in homepage

    ReplyDelete
  28. I'm gladsome to mature so more serviceable and informative assemblage on your website.
    funny status

    ReplyDelete
  29. Hi, I already have facebook comments on my blog but I would like to go back and have blogger comments but when I remove the facebook comments and embed the blogger's they don't show up! Help! Also I would like to know if it's possible to have both comments box, as in wordpress.

    ReplyDelete
  30. This is second part of our series on Facebook Comments plugin. Facebook comments are now optimized and easily indexed and crawled by search engines. Facebook password hack

    ReplyDelete
  31. Really a good information provided by writer about Facebook its nice option for comment counter and Facebook enhance this new technology well. advertising dissertation by dissertationavenue.co.uk

    ReplyDelete
  32. Latest Movie Free Download
    www.movieworlds4u.blogspot.com

    ReplyDelete

Widgets + Web Designing

Workshops

SEO Mashup