How To Add Social Buttons Below Blogger Posts Horizontally?

---

We already saw how to add some nice social buttons/bookmarking buttons on Blogger posts. Today, we shall see how to add some of my favorite buttons together in one single post. We shall consider adding Facebook, Twitter, Google Plus, Digg and StumbleUpon buttons to Blogger. We will align the buttons horizontally below the Blogger post titles.

Straight to the tutorial

IMPORTANT:

Backup the template before proceeding.

Let's implement the Social Media Buttons with below Blogger Post titles:

Step 1. Go to Dashboard > Choose Blog > Template > Edit HTML > Expand Template Widget.

Step 2. Search(Ctrl+F) for <data:post.body/>

            and just before that add the following code.
Note: if you find multiple <data:post.body/> then consider the first code.

Step 3. Code for Social buttons to appear:

<!-- Code for Social Buttons Starts -->

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

<div style='padding:4px;'>

<table border='0'>

<tbody><tr>

<td>

<div style='margin-right:5px;'>

<a class='twitter-share-button' data-count='horizontal' data-via='iTechColumn' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

</td>



<td>

<div style='margin-right:5px;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>

</div>

</td>



<td>

<div style='margin-right:5px;'>

<g:plusone expr:href='data:post.url' size='medium'/>

</div>

</td>




<td>

<div style='margin-right:5px;'>

<script type="text/javascript">

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>

<a class='DiggThisButton  DiggCompact' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'></a>

</div>

</td>




<td>

<div style='margin-right:5px;'>

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

</div>

</td>




<td>

<div style='margin-right:5px;'>

<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>

</div>

</td>




</tr>

</tbody></table></div>

</b:if>




<!--Code For Social Button Ends-->

The above codes would produce the following Social media buttons:

CODE COLORS:
Orange - Twitter tweet Code
Green - Facebook like Button Code
Blue - Google Plus one Code
Brown - Digg Code
Red - Facebook share button code
Pink - StumbleUpon code

To reorder/remove the social buttons, just cut and replace it accordingly based on the color.

Step 4. Save the template!!!!! :-)

CUSTOMIZATION:
1. In the first code, change iTechColumn to your Twitter short name.
2. For Google Plus one button, add the following code in your Blogger template:<<IMPORTANT

In your template HTML, search(CTRL+F) for ]]></b:skin> and just below it add the following code:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

If you already have a plus one code on your Blog, then please skip this code.

Hope you liked this article. Thanks for reading. Catch you again later with more tutorials.

~iTechColumn