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:

<!–BUZZ-STARTS–>
<div style=’border:0px !important;text-align:right;margin-top:-42px;‘>

PASTE_CODE_FROM_GOOGLE-STUFF-PAGE_(Step #1)_HERE

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

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

24 thoughts on “Official Google Buzz Buttons [With Share-Counter] For Your Blog

  1. 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 šŸ™‚

  2. 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

  3. @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:

    <!–BUZZ-STARTS–>
    <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>
    <!–BUZZ-STOPS-http://bloggerstop.net–>

  4. 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.

  5. 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?

  6. 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

  7. 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)

  8. @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.

Leave a Reply

Your email address will not be published. Required fields are marked *