Facebook Comments Counter For Blogger - Part2

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzA5OC0GdefvZXosCmMld6y7mtsQXPPb_ndfPJQz3KJRpZ8IHsKAuzFjqcCrg3fjOixmmslqKdQHPkr-BYgMQUzxY5pFypu5hm1Xm3ak3EiYyiDJN0Yky6QA310mn7IzsTfmexqJtrxko/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. :)

0 comments:

3/25/13

Facebook Comments Counter For Blogger - Part2


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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzA5OC0GdefvZXosCmMld6y7mtsQXPPb_ndfPJQz3KJRpZ8IHsKAuzFjqcCrg3fjOixmmslqKdQHPkr-BYgMQUzxY5pFypu5hm1Xm3ak3EiYyiDJN0Yky6QA310mn7IzsTfmexqJtrxko/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. :)

0 comments:

Post a Comment