Add Google Buzz Buttons To Blogger/BlogSpot Blogs

First it was Facebook, then Twitter and now it is Google-Buzz.

All these websites let their users interact more easily and for webmasters, it means free traffic with minimum efforts. So, keep all your options open as you never know which of them may bring a big wave of traffic to your blog!



Now talking about G-Buzz, although Google has not yet provided any official "Buzz It!" buttons, but it does allow you to synchronize your blog-feed with the Buzz, so that all your posts are directly sent to your Buzz account. Simply add your blog to the connected sites list...

Inspired by Mashable, now I too have created the Google Buzz It! buttons for the readers of BloggerStop. Here's how you can add these buttons to your blog:


STEP #1

Log in to Blogger, go to Layout -> Edit HTML

and mark the tick box "Expand Widget Templates"


Now, find this code in the template:

<div class='post-header-line-1'/>

STEP #2

And immediately BELOW/AFTER it, paste this code:

<!--BUZZ-STARTS-->

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + "&amp;srcTitle=" + data:blog.title' target='_blank'><div style='text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i46.tinypic.com/121wg9e.jpg'/></div></a>


<!--BUZZ-STOPS-http://bloggerstop.net-->

It will display a small Buzz It! button like this:






Or, paste this code:

<!--BUZZ-STARTS-->

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + "&amp;srcTitle=" + data:blog.title' target='_blank'><div style='text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i47.tinypic.com/2j0b02c.jpg'/></div></a>


<!--BUZZ-STOPS-http://bloggerstop.net-->

to display a larger Buzz It! button like this one:




NOTE: By default, the alignment of these buttons is kept to "Right", you may change it to "Left" too. To change the position of the button, change the value -45 pixels (in margin-top:-42px;).


STEP #3

Save the template and let the Buzzer Buzzzzzzz...


*Update: Soufiane from LeBlogger, has suggested a new javascript based code to display these G-Buzz buttons; wherein if the readers select any part of the post before hitting the Buzz This button, then the selected text (and images too) will also appear in their G-buzz updates. Here's the new code:

<a href='javascript:var%20b=document.body;var%20GR________bookmarklet_domain=&quot;http://www.google.com&quot;;if(b&amp;&amp;!document.xmlVersion){void(z=document.createElement(&quot;script&quot;));void(z.src=&quot;http://www.google.com/reader/ui/link-bookmarklet.js&quot;);void(b.appendChild(z));}else{}' title='Buzz It!'><div style='text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i47.tinypic.com/2j0b02c.jpg'/></div></a>

PS: Use this code, instead of the one from STEP #2, if you want those additional benefits. The above code will display the larger icon by default, change the image-url to show the smaller icon.

---

Thanks to Mashable for the larger Icon !

Posted in: Blogger Tips