Add Google+ Button & Social Networking Buttons Below Post Title

After having explained the importance of social network buttons for your blog traffic in order of priority, its now time to add them below your blogger posts titles so that readers may find it easy to like, stumble, +1 recommend and tweet your posts instantly.  This is the same widget that I am using on this blog. Check the social network buttons appearing below this post title and see how they are arranged. I have arranged them in order of load time so that they may appear as quickly as possible when the page is viewed. I have added twitter, Facebook like, stumbleupon and Google+ button i.e +1 button. Other sharing options are included in the AddThis Share button. This widget is different from my previous version in terms of load time and importance. You can find the previous version by visiting this page.

• Add Social Share Buttons To Blogger

Adding Social Networking Buttons To Blogger

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for <data:post.body/>
4. and just above it paste the code given below,

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

<table border='0'>

<tr> <td> <a class='twitter-share-button' data-count='horizontal' data-lang='en'  data-via='mybloggertricks' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>

<td> <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:20px; width:100px; height:20px;'/> </td>

<td><div style='margin-right:25px;'> <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td>

<td><div style='margin-right:5px;'> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

<td> <!-- AddThis Button BEGIN --> <div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>

<script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script> <!-- AddThis Button END --></td>

</tr> </table>

</b:if><br/>

 

Replace mybloggertricks your twitter username.

5.  Note: If you have previously added the +1 button then you may skip this step. Now search for </head> and just above it paste the following code,

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

6.   Save your template and visit your blog to see it appearing on post pages. The widget will not be visible on homepage but on post pages only. If you want to show it on homepage too then delete the highlighted yellow lines.

    

Have fun! :>

Feel free to ask any questions you may have.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 7/19/2011