4 Blogger | Google Buzz Button With Share Count

As we are aware of the Wordpress plugin for the Google Buzz Share Counter, one being used at Mashable, I wanted to have one for Blogger too and thanks to Dstats.net, for I used their download counter script and added some pieces of CSS as well as html codes and came up with this "Google Buzz Share Count Button" widget which almost resembles one from Wordpress, see it in action at the top right of this post.

But, to be very honest this actually counts the number of clicks it has got not the number of shares. Suppose you clicked the button and did not share still it has counted the click & will show the new count after the page is reloaded. For me this is enough for now as I will get to know at least how many clicks it got on a particular post.

If you want to have this widget on your blogger blog here are the steps to add it:

Important! Save a backup of your excisting template before making any changes.

Go to Blogger > Layout > Edit HTML and check the Expand Widget Templates option.

Now, find ]]></b:skin> and paste the following CSS code just before it;

Code:

/*By: Around The Web */
/*Url: http://www.aroundtheweb.co.in */
/* Google Buzz Button with Share Count
-----------------------------------------------
*/

.buzzit {
  height:65px;
  width: 60px;
  margin: 0;
  padding: 4px;
  line-height: 100%;
  float: right;
}
.buzzit span {
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmxgduypv3KWSbJdaaiJOr4oXW585SzuiCzARcCi48sUJgbZy9aegaE1i2_IX3NVU5C2sf0z4Yr-zcBanFFw5P9I1cRcKLiViNoztZWB8t1Fz1Ic4Iph6KiR5ZjK68L_WVE84k1jB9TWu/s1600/gbc_bg.png) repeat center center;
  display: block;
  font: bold 10px Arial;
  color: #fff;
  text-align: center;
  margin:-55px 10px 0 20px;
  padding: 0 0 0 0;
  position:relative;
}

Now, find the first occurrence of <data:post.body/> and paste the following codes just before it;

Code:

<!--Google Buzz Button with Share Count By www.aroundtheweb.co.in Starts-->
<div class='buzzit'>
<a expr:href='&quot;http://dstats.net/download/http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Buzz This' onmouseout='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ydIPbDZRgExo6wcN6tRoZQnZDzZpFsuq6uOW69y8UoRinlZBQxLv-Xn2ZhYEjSCyc1BvJbsFXcuQQDBBpdBJdDYmduTHXF-zlLsATKRFPxiiwPj42DjQo2o80ON6b1c1eym1G35nVRsf/s1600/g_buzz4.png&quot;' onmouseover='this.src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnZyAf_92NZajynVC6CiX67RqNKYtsHwuYW-opdt1clvKFuSusVWYEqA6dg4MwTe1xLlZF2asBgETDD-ZvmsZZ6BcvRAFF3dyyhxQNV73crPmYp5uhc57fHxhD7VOKcX_ytauY3qXtuTzz/s1600/g_buzz7.png&quot;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ydIPbDZRgExo6wcN6tRoZQnZDzZpFsuq6uOW69y8UoRinlZBQxLv-Xn2ZhYEjSCyc1BvJbsFXcuQQDBBpdBJdDYmduTHXF-zlLsATKRFPxiiwPj42DjQo2o80ON6b1c1eym1G35nVRsf/s1600/g_buzz4.png'/></a><span><script expr:src='&quot;http://dstats.net/dstatsjs.php?file=http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' type='text/javascript'>
</script><script type='text/javascript'>
document.write(dsCounter);
</script></span></div>
<!--Google Buzz Button with Share Count Ends-->

Preview your blog and if all is fine save the template. That's it!

For more "Google Buzz" icon styles click here.

Update:

Do not remove credit tags from the codes.