Add a Google Buzz Button with Buzz Count
Last week I posted how to add Google Buzz button to your Blogger blog. This is a follow-up of that post. But the following hack can be added to any website — whether running Blogger or Wordpress. Since Google Buzz API doesn't provide any function to count the number of shares in Google Buzz, we'll be using Bit.ly's API to count Buzzes. Please make a back-up of your template (or html files) before making any changes. I will assume a couple of things,

Step 1

Get your Bit.ly API key. Add the following lines inside the <head> tag. 
<script type="text/javascript" src="http://bit.ly/javascript-api.js?version=latest&login=YOUR_LOGIN_ID&apiKey=YOUR_API_KEY"></script>
Replace YOUR_LOGIN_ID and YOUR_API_KEY with your credentials.

Step 2


Add these lines of code inside the <head> tag.
<style type='text/css'>
.btn {
background:url("http://1.bp.blogspot.com/_FX3RmPElUpc/S3tw51HNEtI/AAAAAAAAAz8/b9aPyAAwBl0/s144/buzz-button.jpg") no-repeat center center;
width:50px;
height:58px;
position:relative;
text-align:center;
}

.btn a {
position:absolute;
bottom:0;
left:0;
display:block;
height:17px;
width:50px;
}

.btn span {
position:absolute;
right:0;
left:0;
top:5px;
font-size:14px;
font-weight:bold;
letter-spacing:0.1em;
padding:3px;
color:#ffffff;
}

</style>

Step 3


Add the following code where you want to show the button
<div class='btn'>
<a href='LINK_TO_SHARE_IN_GOOGLE_BUZZ' class="buzzbutton"></a>
</div>

Replace LINK_TO_SHARE_IN_GOOGLE_BUZZ with the link. If you're using Blogger, you can find the link here. If you're using Wordpress, you can find the link at TricksDaddy. Do not remove the class ("buzzbutton").

Step 4


Add these lines of code just before </body>.
<script type='text/javascript'>
/***
Buzz Count Script using Bit.ly API.
Abhisek Dutta (http://ad1987.blogspot.com/)
***/

//get all anchor tags with buzzbutton as the class
urlContainer = {};
hashContainer = {};
function getAllButtons() {
anchrs = document.getElementsByTagName("a");
btns = new Array();
for(i=0; i<anchrs.length; i++) {
if(anchrs[i].className == "buzzbutton") {
btns.push(anchrs[i]);
}
}
return btns;
}

var btns = getAllButtons();

for(i=0;i<btns.length;i++) {
long_url = btns[i].href;
urlContainer[long_url] = i;
BitlyClient.shorten(long_url, 'replace_link');
}

function replace_link(data) {
for (var r in data.results) {
doc = data.results[r];
break;
}
short_url = doc['shortUrl'];
hash = doc['hash'];
hashContainer[hash] = urlContainer[r];
btns[urlContainer[r]].href = "http://bit.ly/"+hash;
BitlyClient.stats(hash, 'getStat');
}

function getStat(data) {
var clicks = data.results.clicks;
var hash = data.results.hash;
span = document.createElement("span");
span.innerHTML = clicks;
btns[hashContainer[hash]].parentNode.insertBefore(span, btns[hashContainer[hash]]);
}
</script>
That's all you have to do! Let me know if it works for you in the comments section.
P.S. This is inspired by Mashable

Labels: , , , , , , ,

blog comments powered by Disqus