How to Show Popular Social Buttons with Blogger Popular Posts Widget

You may remember that we have discussed how to add Facebook Like button, Twitter Tweet button and Google +1 button for Blogger posts. Adding those popular buttons let your readers to share posts and convey their likes and recommendations on posts for their friends. You may add the Blogger official Popular Posts widget/element to your blog to promote your popular content to recent visitors. But do you know you can show popular buttons mentioned above along with your popular posts shown in the popular posts element?

I would like to share how to add those popular buttons with popular posts in popular posts widget. Here mostly I prefer to talk about Facebook, Google+ and Twitter powered buttons. But instead of those you can use any other button you wish to display with popular posts. What you need to do is, read through the post and replace your button code as I mention on below steps.

Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Edit HTML button.

5. Tick on, Expand Widget Templates.

6. Now find Blogger Popular Post widget code in your template, similar to below.

<b:widget id='PopularPosts1' locked='false' title='' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

.................................

<b:if cond='data:showSnippets == &quot;false&quot;'>

<!-- (1) No snippet/thumbnail -->

<a expr:href='data:post.href'><data:post.title/></a>

<b:else/>

<!-- (2) Show only snippets -->

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

<div class='item-snippet'><data:post.snippet/></div>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == &quot;false&quot;'>

<!-- (3) Show only thumbnails -->

.................................

</b:if>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

</div>

<div style='clear: both;'/>

<b:else/>

<!-- (4) Show snippets and thumbnails -->

.................................

</b:if>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

<div class='item-snippet'><data:post.snippet/></div>

.................................

</b:includable>

</b:widget>

7. Take a look at above code snippet of popular post element and identify highlighted line of codes in your template.

8. Now only one more thing. Add your button codes right next to the highlighted code. Below you can find posts for button codes.

Note: When you implement social share buttons, assure button sizes.

Facebook Like Button

Twitter Tweet Button

Google +1 Button

9. Now Save your template.

Enjoy :-)