Official Google Buzz Buttons [With Share-Counter] For Your Blog

Yesterday Google officially released the Google Buzz Share and Follow buttons.
These buttons will directly post your articles to Google-Buzz, instead of Google-Reader as it was the case in the previous method. Moreover one set of these buttons has a counter too, to count the number of ReBuzzes your article gets.
You can see the working demos of these buttons in many popular websites and blogs including The Washington Post, Blogger, YouTube, The Huffington Post, GigaOM etc.

Instructions to add these official Google-Buzz buttons (to Blogger Blogs):
STEP #1
Visit this page: G-Buzz Stuff
Click on the link "Post To Buzz" and in the next page, select the type of button you want to use on your blog.

Official Google Buzz Buttons

Against "URL to post" keep the option "Containing Page" and against "Image to post" let it be None.
Now copy the code, from the code-box.

STEP #2
Log in to Blogger, go to Layout -> Edit HTML and tick the tick-box "Expand Widget Tempaltes".
And find (CTRL+F) this code in the tempalte:

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

STEP #3
Immediately AFTER/BELOW it, paste this code:

<div style='border:0px !important;text-align:right;margin-top:-42px;'>

PASTE_CODE_FROM_GOOGLE-STUFF-PAGE_(Step #1)_HERE
</div>

Replace the line highlighted in RED, with the code you got in STEP #1.

NOTE #1: 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;).

NOTE #2: If the code-line (in Step #2) is not present in your blogs template, then find these two lines:

<div class='post-body entry-content'>
<data:post.body/>

And paste the code from STEP #3, immediately ABOVE/BEFORE these two lines.

Finally, Save the template.

Image credits: UnmatchedStyles

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Google Facebook Twitter More

24 comments

Write comments

Vellena

April 14, 2010 5:50 AM delete

Thank you very much.This is a great post.

Anup

April 14, 2010 1:12 PM delete

Finally you found it out. Thanks for this info. You are faster I will place it on my blog.

Sai - Blogger Help

April 14, 2010 2:27 PM delete

You are most welcome Vellena...it's looking great on your blog.

And thanks for the comment Anup...I was plannig to publish a post about buzz buttons with counter since weeks, and when Google has itself introduced these buttons...I couldn't wait anymore

Peter

April 14, 2010 7:29 PM delete

Hi! Thanks for this. I tried it and it worked except for one small problem. It brought the first paragraph in all my post straight up under my post title - no space between the two. Also I set the margin top to -31 to get it to work.

Any ideas on how to resolve this very small problem?

BTW I removed the code for the moment.

Take Care,
Peter

April 14, 2010 8:22 PM delete

Hi! I forgot to mention I used "on the side" - Peter

☠╬¤ɯɐʎɥs╬╝™

April 15, 2010 9:47 AM delete

how to make it viewable only in posts..?!!

temme pleez

April 15, 2010 10:08 AM delete

@Peter and ☠╬¤ɯɐʎɥs╬╝™,

This additional two lines of code will serve you both. This code will limit the widget to the post pages and so the buttons will be hidden in homepage.
So instead of the code in STEP #3, use this one:


<b:if cond='data:blog.pageType == "item"'>
<div style='border:0px !important;text-align:right;margin-top:-42px;'>
PASTE_CODE_FROM_GOOGLE-STUFF-PAGE_(Step #1)_HERE
</div>
</b:if>

Malaysia Asia

April 15, 2010 1:14 PM delete

Thanks for the great info. works fine on mine

David

NDS Roms

April 15, 2010 3:30 PM delete

thank you!

Reza Winandar

April 16, 2010 11:44 AM delete

Thanks, it works perfectly. Can I ask you a question, how to remove the underline on a link or image? I have many button that have underline, because it's a link, but on the other blogs it doesn't appear.

Beben Koben

April 17, 2010 9:33 AM delete

now button buzz any too on navbar...hehehehe
just click button share...taraaaa)

Technology

April 19, 2010 5:08 PM delete

Thanks For the info you are doing really great.

Jokes For Fun

Robin Hood

April 21, 2010 2:48 AM delete

Thanks for this share, Divya Sai.

Robin Hood Softwares

April 21, 2010 3:24 AM delete

Hello Divya Sai. As I promised, I added your blog link in my blog. Kindly visit my blog and see your blog link appears on my side bar - My friends. Do you mind to have a link exchange with my site? Can you put my site link on your website?

Anonymous

April 21, 2010 6:00 AM delete

Hi...nice forum u got and good info...
I'm using this Google buzz...Quiet Impressed
but small problem ...when iam trying to buzz any post..it is posting only the site name...not the post title link
but whereas i want post link to be posted...

iam using "Add This" Button in that also we got Buzz Option..when i post from there..it is working fine...

hope u understand and solve this...

XploreMP3

Sai - Blogger Widgets

April 21, 2010 10:32 AM delete

Well the button takes the url of the page in which it is being displayed, so one way to fix is to use it below the titles, as explained in the tutorial or simply hide it in the homepage, as nobody shares a post from the homepage (read comment #7)

April 21, 2010 12:35 PM delete

@Robin Hood,

Thanks a lot for the linkback. One advise: Either make the loading image small or remove it completely, as it stays on your blog till the page loads completely, and it may be quite annoying for many new visitors.