Thursday, September 22, 2011

Add +1, Buzz, Facebook Like, Tweet button to Blogger!

Google +1 (plus one), and buzz button are becoming so important since google+ is on the roll. Google +1 button helps you to recommend a post for your friends and peers, on the other hand, google buzz button helps your posts get indexed quickly, and recommend the post also in Search engine results page (SERP). Facebbok like and tweet buttons also have a very high popularity from past. And most effective social bookmarking site - I reckon, is Delicious. So, I have made a mixture of these +1, buzz, facebook like, tweet, and Save to Del.icio.us, buttons. Also, at last I have attached an add this button to it, so that your post don't miss any of it's potential sharing. ;)

Demo: 




Lets do it:

  • Go to Design, then click on Edit HTML page.
  • Mark Expand Widget Template.
  • Now, find <data:post.body/>.
  • Just after the <data:post.body/> , paste the code below; then, click on Save Template.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='left'>
<p style='margin:0; border-bottom:1px solid #666666;'><font color='#666666' face='Arial Black' size='5'>Help Me To Spread This Post &#187;&#187;</font></p>
<table border='0' cellpadding='2' cellspacing='10'><tbody>
    <tr>
<td style='padding-top:8px;'>
<!-- Place this tag in your head or just before your close body tag -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
  {parsetags: &#39;explicit&#39;}
</script>
<!-- Place this tag where you want the +1 button to render -->
<div class='g-plusone' data-size='tall'/>
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
</td>
      <td style='padding-top:8px; '>    <a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</td>
      <td style='padding-top:8px;'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
      <td style='padding-top:8px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td>
<td>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js' type='text/javascript'/>
<a class='delicious-button' href='http://delicious.com/save'>
   &lt;!-- {
      url:&quot;<data:post.url/>&quot;
      ,title:&quot;<data:post.title/>&quot;
   
   } --&gt;
   Save on Delicious
</a>
</td>
      <td>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
    </tr>
  </tbody></table></div></b:if>

You can change the text: "Help Me To Spread This Post" if you like. Cheers! :)