Blogger: Add Facebook Comments Count to Post Footers

Reflect All Comments in your Main Page Post Footers
A couple of weeks ago I posted a walk through to add Facebook Comments to your blog along side Blogger comments. This gives visitors two commenting options and the opportunity to increase reader feedback by using the most popular social network on Earth. Just today one of my own readers requested a feature I had not even considered. He'd like to include a Facebook Comments count with each post on the main page. Sounds like a nice feature to me so I set out to implement this request.

Placement and Branding Comments
This tutorial assumes you're using my Facebook Comments tabbed setup already and is constructed to use show both counts side by side with the same tab icons each service provides. Bear in mind this modification nearly triples the width the comment count footer requires, so make sure to leave plenty of room on the footer line for best effect. Adjust the footer position for the comment count by editing the Blog widget under Design->Layout until you're satisfied this modification has sufficient space. Note: if you've customized your Blog template this likely will fail and you'll need to alter the code manually in Edit HTML mode.

Inserting the Facebook Comments Count in the Post Footer
First, open up Design->Edit HTML and check the Expand Widget Templates box. Next, hit Ctrl+F and search for post-comment-link. You will find something like this:

<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <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>
            </b:if>
          </b:if>
        </b:if>
      </span>

The above code conditionally displays a comment count in the footer only on the main page and search pages. We want to maintain this behavior, but add in icons and a Facebook Comments count by replacing this section of code with the below:

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
<span class='fb-comments-count'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<a class='comment-link' expr:href='data:post.addCommentUrl'><fb:comments-count expr:href='data:post.url'/> Comments</a></span>
<span class='blogger-comments-count'><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></span>
            </b:if>
          </b:if>
        </b:if>
      </span>

Finishing Up
Test your changes by Previewing them and checking for any errors. The counts should look similar to those on the tabs my Facebook Comments implementation provides. Once satisfied things are as they should be, Save Template. That's it, your main page posts should now include the comments count for Facebook in the footer. I hope you've found this tutorial helpful. Thanks for reading and good luck in your blogging.

Support JSBlogStop:

Donate with Dwolla