Add Google Buzz Buttons To Blogger/BlogSpot Blogs

13th Feb.: Code updated to replace the word null with your blog's name.

14th Apr.: Now official Google Buzz buttons are available (with a share-counter).


Follow BloggerStop at G-Buzz



First it was Facebook, then Twitter and now it is Google-Buzz.
Being a blogger, you don't have to worry on who's copying whom! 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='border:0px !important;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='border:0px !important;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='border:0px !important;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 !

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

86 comments

Write comments
February 12, 2010 3:46 PM delete

It's google reader code, why every body is saying it's Google Buzz ~x(

Reply
avatar
February 12, 2010 7:23 PM delete

great..i have added it to my blog..You are very fast sai.This is better than facebook share where people have to enter captcha and all.Plus gmail users are larger than facebook :) .

Check this out ,it worked in my blog well.


Contests abd freebies

Reply
avatar
February 12, 2010 10:51 PM delete

Great,It is Very Good
It Is working in my blog .

Reply
avatar
February 13, 2010 1:58 AM delete

Thanks Sai!

It is adding in to the Google Reader instead of Gmail Buzz.. then what is the use of this purpose! Pls explain

Reply
avatar
February 13, 2010 2:06 AM delete

@Soufiane and கிரி

Buzz is already connected to many other services like our blogs, twitter profile, flickr, picasa etc. (and that includes our G-reader account too)

As I have said in the post, Google hasn't yet introduced any official buttons, and as un-officially sending content into gmail is not that easy, so the better way is:

Send content to G-reader, and as G-reader is connected to G-Buzz, so ultimately posts will go to G-buzz. ;)

Reply
avatar
February 13, 2010 2:15 AM delete

Yeah! It came in the Buzz. Thanks :-)

But why it is selected Google reader in the Buzz? (In ur script also included Google reader link) is there any specific reason?

and one more

when I Buzz my one of the post, it is giving my post name and "null" word in Google Buzz.

My post link looks correct (it is opening correct link), but when I click the "null" word its going to my Blog home page. How do I change "null" word in to my Blog name or Blog home link.

Thanks in advance
Giri

Reply
avatar
February 13, 2010 2:18 AM delete

Thanks for the info about Google reader :-) and pls let me know the null option? if you have idea.

Reply
avatar
February 13, 2010 2:50 AM delete

Donno what that "null" is...but no prob. as long as it links to our own blogs :)

Reply
avatar
February 13, 2010 3:38 AM delete

:-) Thanks for ur help Sai. This Buzz button will be helpful for me.

Reply
avatar
February 13, 2010 5:16 AM delete

By the way the Google Reader Bookmark code is much better because it opens an ajax Pop-up instead of a new Window....
and The result is the same !

Check out the code in my blog, Le Blogger or get it directly from google reader

Reply
avatar
February 13, 2010 6:27 AM delete

Sure it's a nice way Soufiane,
but I usually prefer non-javascript based methods over JS methods. And actually some people don't like pop-ups.

Reply
avatar
February 13, 2010 6:36 AM delete

In this case I prefer pop-ups because you can select text/links/images from the article then click refresh and those Links/Images/text will be added to the message that will appear in Google Buzz .... you can't do this with the HTML code, try it !

Reply
avatar
February 13, 2010 6:52 AM delete

Wow...that's great, I'll soon update the post with a link back to you!

Reply
avatar
February 13, 2010 7:05 AM delete

Hihihi thanks, I used the code of the "Google Reader subscribe bookmark" , you can get is by going to Google Reader setting or grab the one in my blog...

Reply
avatar
February 13, 2010 7:14 AM delete

&srcTitle to be replaced by &srcTitle

thanks b/w

Reply
avatar
February 13, 2010 7:20 AM delete

@Soufiane,
Your suggestion is worth a mention in the post :) ..I have updated the post and added that new code.

@Pushpinder
what's the difference? couldn't get it !

Reply
avatar
February 13, 2010 7:31 AM delete

@Pushpinder,

Yeah got your point, thanks for pointing it out!

Reply
avatar
February 13, 2010 9:14 AM delete

Thanks for the link Sai...
(We can select any part of the post even after hitting the Buzz This button ...)

Reply
avatar
February 13, 2010 11:55 AM delete

Welcome Soufiane...

@Giri,
Code updated to replae the word "null" with blog's name.

Reply
avatar
Anonymous
February 13, 2010 7:19 PM delete

Google Buzz! for blogger blog…I have written a step by step guide to have a Buzz this button below every post in blogger blog.

Buzz Buttons with customizations

Reply
avatar
February 13, 2010 9:22 PM delete

Wow, it seems that this post is very great indeed! But I will wait to see if Buzz is going famous.

Reply
avatar
February 13, 2010 9:55 PM delete

And finally..it's come to blogspot blog...

Reply
avatar
February 13, 2010 11:20 PM delete

Hi Divya,

Older post, Newer post, Home links in my blog is not visible. It just visible on IE browser...What is the bug?

Reply
avatar
February 14, 2010 3:53 AM delete

Wow, this is very nice tutorial bro, we can get a lot of traffic if our article is bookmarked by googlebuz...
thx bro ;)

Reply
avatar
February 14, 2010 6:37 AM delete

Hi Sivya,

In my blog Older post, Newer post, Home links are not visible...What to do? It just visible in IE browser. In firefox it's not visible...Please observe and see it visible or not in your browser? Please reply me soon...My pageviews is going down :(

I can send you my template code...

Reply
avatar
February 14, 2010 6:44 AM delete

@Anup, yeah the links are visible in opera and IE but not in FF 3.6 Donno know the exact reason, but are facing it only from today or it was always like this?
Don't worry about pageviews, on weekends pageviews are decreased by 10-20% for most of the bloggers.

Reply
avatar
February 14, 2010 7:25 AM delete

I'm facing this problem from yesterday...It's so bad...But I can see links in your blog...?

Reply
avatar
February 15, 2010 2:43 AM delete

I have added it to my blog.Thanks for posting this.

Reply
avatar
February 15, 2010 6:32 AM delete

:D ... google buzz!!!
i am added... :P

Reply
avatar
February 15, 2010 6:36 AM delete

by the way that code not too high -42 ?

Reply
avatar
February 15, 2010 6:54 AM delete

Yeah that value is good when you use twitter and buzz together, otherwise of course you are free to change the value to suit your blog.

Reply
avatar
February 15, 2010 9:17 PM delete

Can I request a Buzz Counter for it? Just like in twitter...

Reply
avatar
February 16, 2010 5:45 AM delete

I cannot find out this code (div class='post-header-line-1'/). Can you tell to me where can I put to use? My code is like this. So that how to use G buzz button? :)]
div class='post'
(div class='title')
(h1)
(b:if cond='data:post.link')
(a expr:href='data:post.link' expr:title='"Permanent Link to " + data:post.title' rel='bookmark' data:post.title/) (/a)
(b:else/)
(b:if cond='data:post.url')
(a expr:href='data:post.url' expr:title='"Permanent Link to " + data:post.title' rel='bookmark' data:post.title/) (/a)
(b:else/)
(data:post.title/)
(/b:if)
(/b:if)
(b:include data='post' name='postQuickEdit'/)
(/h1)
(div class='meta')
(b:if cond='data:top.showAuthor')
(data:top.authorLabel/ data:post.author/)

Reply
avatar
February 16, 2010 7:40 AM delete

@Anup,
yeah a counter added to these buttons will be really cool, but as I have already mentioned, Google hasn't yet given any official way to connect buzz with external sites, and if I'm not wrond its API will be available after some months, so till then these buttons do not know maths! BTW Mashable has trained some pseudocounting to their buttons: but their button is actually counting the no. of times the post url has been shortened using bit.ly

Reply
avatar
February 16, 2010 7:43 AM delete

@Rudy,

In that case, find this code (you have to tick the box "expand widget templates":

<data:post.body/>

and paste that code immediately above this one...

Reply
avatar
February 16, 2010 9:58 AM delete

Thank you for your reply Divya. :-*

Reply
avatar
February 16, 2010 10:18 AM delete

@ Divaya

I'm find it this code after that above paste that code. When I paste finish I press view blog but I didn't see any post. What happen this problem? I cannot use this code.

Reply
avatar
February 16, 2010 10:41 AM delete

@Rudy, you may paste this code at other locations too, like in the code you have mentioned in your previous comment, you can paste it between these two lines:

(/h1)
--G-BUZZ-CODE-COMES-HERE--
(div class='meta')


but I need to see your blog first, what's the correct address of your blog, as nothing is showing up at sarphatthu.com

Reply
avatar
February 17, 2010 12:52 AM delete

cool thanx for the code : )


http://www.emailzz.blogspot.com

Reply
avatar
February 17, 2010 3:08 AM delete

Thanks Divaya now this code is ok.

(/h1)
--G-BUZZ-CODE-COMES-HERE--
(div class='meta')

Now I can use G Buzz Button.. :-*

Reply
avatar
Charles
February 17, 2010 6:21 PM delete

Hi! I just wanted to know how did you created the domain: http://main.bloggerstop.net/forum/

¿Did you used blogger? I've bought a domain (.com) at blogger and wanted to create a subdomain.

Hope you could help me :)

Reply
avatar
February 17, 2010 6:27 PM delete

It depends on your domain-registrar Charles. Go to your account and see how many sub-domains are you allowed to create, then if you still have left some unused sub-domains, then create a new sub-domain (forum.your-website.com) and redirect it (through DNS management) to either 110mb.com or freehostia.com and then create a new forum over there.

Reply
avatar
February 18, 2010 5:41 AM delete

excellent article - thank you for your help.

Only one problem for me. I applied it to my blog: http://www.c14ism.blogspot.com, and it isn't working.

Any ideas?

Reply
avatar
February 18, 2010 8:54 AM delete

Found it working perfectly in your blog...hope you have already fixed the problem!

Reply
avatar
February 18, 2010 8:19 PM delete

Hi Divya, hope you would like one with counter @ my blog...although it's not perfect...but good for the time being untill we get one officially from google

Reply
avatar
February 19, 2010 7:27 PM delete

It seem interesting using google buzz on blogger..very helpful..thanks alot

Reply
avatar
February 20, 2010 4:51 PM delete

Thanks, this button will stand well on my new BlogSpot. :-)
The blog is brand new, and I will fill it with Open Source
information, such as Wordpress, Google Android and other stuf.
Have a look at: http://buzzreader.blogspot.com/. Thanks again.

Reply
avatar
February 20, 2010 11:36 PM delete

Hello Sai, I have your great Buzz button on my blog, but I
cant get the border around the img away.
Help please! If you have a bit time, please have a look on my [url=http://buzzreader.blogspot.com/]site?[/url]

Reply
avatar
February 21, 2010 12:17 AM delete

That's nice & simple layout buddy! and you got a great blog-url.

That border will be applied to all your images within the post-area. So, if you want to completely remove the border from all the images, then replace this code in your blog:

.post img {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#888888 none repeat scroll 0 0;
padding:2px;
}

with this one:

.post img {
border: 0px;
}

Reply
avatar
February 21, 2010 1:56 PM delete

Great man, tanks Sai. It worked. I've also created a new Buzz Button.
one in Dutch, see my site and one international [eng] if you like it, grab it.

http://i49.tinypic.com/33kdp95.png

Reply
avatar
February 22, 2010 1:24 AM delete

woooaaa thanks for this.. i have applied them on both my blogger blogs... check
check out http://miyabetayo.blogspot.com and http://tonyboystories.blogspot.com.. this is a great help..keep on rockin...

Reply
avatar
February 22, 2010 2:48 AM delete

@Erwin
Great work...I liked that button.

@baterya
you did a wonderful job. If you want to remove that border arond the button, then you have to your template, like this:
replace this code;

.post img {
border:1px solid #CCCCCC;
padding:1px;
}

with this one:

.post img {
border:0px;
padding:1px;
}

and save the template, that's it.

Reply
avatar
February 25, 2010 6:10 AM delete

Hi,
Yesterday I Changed My Template and after adding Google Buzz button in it,it was displaying with a border of blue colour.
I want to remove that from my template.
I tried the above method that u told in comment ,i was n ot able to find that code in my template.

Please tell which code i have to find .

Thanks

Reply
avatar
February 25, 2010 6:24 AM delete

Hey Poras,
instead of this code;
<div style='text-align:right;margin-top:-32px;'><img alt='Buzz It' src='http://i46.tinypic.com/121wg9e.jpg'/></div>

use this one:
<div style='border:0px !important;text-align:right;margin-top:-32px;'><img alt='Buzz It' src='http://i46.tinypic.com/121wg9e.jpg'/></div>

Reply
avatar
February 25, 2010 9:13 AM delete

Hi,
By Using that code the Border is still appearing.

Reply
avatar
February 25, 2010 9:18 AM delete

okay, do this:

find this code:

</head>

and just before it, paste tis code:

<style type='css/text'>
a img {
border: 0px;
}
</style>

Reply
avatar
February 25, 2010 11:52 AM delete

Got some odd in my blog Home Page my reader told that. It really lookd odd? Coz I have added this widget, all the posts widget are mixing with each other...

Reply
avatar
February 25, 2010 12:02 PM delete

May be he's talking about the button overlapping your titles, just lower the margin from -42px to -20px or something like that.

Reply
avatar
ikb
February 26, 2010 12:30 PM delete

Now, we can add google buzz button with counter

http://myfundoo-blog.blogspot.com/2010/02/google-buzz-button-with-counter.html

Reply
avatar
February 26, 2010 12:49 PM delete

@ikb

Thanks for the update buddy! even I stumbled on this site just a day back, but no time to publish a new post :(
Wil have to wait for at least 6 days more !!!

Reply
avatar
February 26, 2010 7:54 PM delete

Hi! Can I share this?

A Google Buzz Button with counter is now available: http://www.coolbuster.net/2010/02/google-buzz-button-with-counter.html

Reply
avatar
February 27, 2010 12:30 AM delete

Google Buzz Counter Button is available here now - http://www.geekblogger.org/2010/02/add-google-buzz-button-with-counter-in.html.

Thanks for the above post.

Reply
avatar
March 07, 2010 4:54 AM delete

Hey,

you can also check our newly launched service here:
http://njuice.com/button/

It also adds a real "firehose" counter of mentions on Buzz. We have a Wordpress plugin for easier installation.

Reply
avatar
March 07, 2010 2:42 PM delete

Thank you all for updating me about the counter buttons, I will soon have an updated post about it.

@geekboys,
Great work :)

Reply
avatar
March 14, 2010 1:12 AM delete

Thank you very much for this great tutorial, i have added the google buzz to my blog and it's working perfectly

Reply
avatar
March 24, 2010 9:35 AM delete

thnx for the google buzz widget but can u tell me how to put html codes in a box lke u have done in ur post?
plz reply dude

Reply
avatar
March 31, 2010 12:51 PM delete

THANKS !
arthemia theme is in my blog प्राइमरी का मास्टर ( http://primarykamaster.blogspot.com/ )
arthemia theme for blogger is .

when i use your code after
div class='post-header-line-1'/

it works in all posts in read more way !(i.e. in blogs home page )



but when i opeen a post page this google buzz button never seen !

i want just the reverse !

hope u help me !

Reply
avatar
April 13, 2010 10:27 AM delete

You have a box at the bottom of your post for "share this post" and several social media choices. I am looking for the code to add something just like this to my blog. Have you shared this anywhere?

Reply
avatar
April 13, 2010 12:35 PM delete

Yes I have the tutorials in two parts:

Part-2:
http://bloggerstop.net/2009/12/part-2-collapsible-multi-tabbed-widget.html

Part-1:
http://bloggerstop.net/2009/12/collapsible-multi-tabber-widget-for.html

Read part-1, then part-2 and then again part-1...but don't worry it's not at all complicated.

Reply
avatar
April 15, 2010 1:21 PM delete

really cool man .. thanks a lots for this one.

Reply
avatar
April 16, 2010 1:57 AM delete

Awesome. I was looking for how to add buzz button on my blogger and found this. Thanks!

Reply
avatar
April 20, 2010 4:28 AM delete

Hi Sai,
I contacted you few days ago to get help from you with my template. Have you got it Sai? Please help me, I really need to finish my blog.
Thank you

Reply
avatar
April 21, 2010 11:00 PM delete

Is Google Buzz really that useful?

Reply
avatar
April 28, 2010 1:45 AM delete

I am not seeing traffic from Buzz in my Google analytics. Either I am not getting any or it just doesn't show up as Buzz for a source.

Reply
avatar
May 05, 2010 9:58 AM delete

Hi I have added it but it is sitting in my latest post and will get buried soon not sure how to place it where I want it on my blog. Any help will receive many hugs

Reply
avatar
June 29, 2010 10:49 AM delete

Nice tutorial...I sucessfully implmented Google Buzz on a blog of mine...thanks to your article! Thanks

Reply
avatar
December 17, 2010 3:55 AM delete

Got some odd in my blog Home Page my reader told that.

Reply
avatar
September 07, 2011 7:11 AM delete

Thanks for sharing this info, i find it very useful.

Reply
avatar
October 30, 2011 2:45 AM delete

Thanks for the code. I have used it for my other blog hosted on Blogger. Your blog is a Blogger blog with good ranks. Congrats for your blog content.

Reply
avatar
July 07, 2012 8:22 PM delete

Este portal es simplemente sensacional.

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon