14th Apr.: Now official Google Buzz buttons are available (with a share-counter).
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...
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='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&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-->to display a larger Buzz It! button like this one:
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&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-->
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="http://www.google.com";if(b&&!document.xmlVersion){void(z=document.createElement("script"));void(z.src="http://www.google.com/reader/ui/link-bookmarklet.js");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 !
Share this
Related Posts
10 Tips For Optimizing Your Blog For PrintingA guest post by James Adams, editor and contributor to the CreativeCloud blog.
With a few simple steps you can optimize
Google Turns 1027th September - Its Google's B-Day !
Today Google has turned 10, so I was trying to find out how Google used to appea
My Blog is My Marketing Tool - Says Erin FerreeBlogger of the Week: Erin Ferree from Elf-Design
Erin Ferree, founder of elf design, helps small businesses stand out f
A New Favicon For Google In New Year 2009Today morning, I noticed a small change in Google, yet again. They have selected another new and more colorful favicon
85 comments
Write commentsIt's google reader code, why every body is saying it's Google Buzz ~x(
Replygreat..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
.
ReplyCheck this out ,it worked in my blog well.
Contests abd freebies
Great,It is Very Good
ReplyIt Is working in my blog .
Thanks Sai!
ReplyIt is adding in to the Google Reader instead of Gmail Buzz.. then what is the use of this purpose! Pls explain
@Soufiane and கிரி
ReplyBuzz 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.
Yeah! It came in the Buzz. Thanks :-)
ReplyBut 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
Thanks for the info about Google reader :-) and pls let me know the null option? if you have idea.
ReplyDonno what that "null" is...but no prob. as long as it links to our own blogs
Reply:-) Thanks for ur help Sai. This Buzz button will be helpful for me.
ReplyBy the way the Google Reader Bookmark code is much better because it opens an ajax Pop-up instead of a new Window....
Replyand The result is the same !
Check out the code in my blog, Le Blogger or get it directly from google reader
Sure it's a nice way Soufiane,
Replybut I usually prefer non-javascript based methods over JS methods. And actually some people don't like pop-ups.
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 !
ReplyWow...that's great, I'll soon update the post with a link back to you!
ReplyHihihi 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&srcTitle to be replaced by &srcTitle
Replythanks b/w
@Soufiane,
..I have updated the post and added that new code.
ReplyYour suggestion is worth a mention in the post
@Pushpinder
what's the difference? couldn't get it !
@Pushpinder,
ReplyYeah got your point, thanks for pointing it out!
Thanks for the link Sai...
Reply(We can select any part of the post even after hitting the Buzz This button ...)
Welcome Soufiane...
Reply@Giri,
Code updated to replae the word "null" with blog's name.
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.
ReplyBuzz Buttons with customizations
Wow, it seems that this post is very great indeed! But I will wait to see if Buzz is going famous.
ReplyAnd finally..it's come to blogspot blog...
ReplyHi Divya,
ReplyOlder post, Newer post, Home links in my blog is not visible. It just visible on IE browser...What is the bug?
Wow, this is very nice tutorial bro, we can get a lot of traffic if our article is bookmarked by googlebuz...
Replythx bro
Hi Sivya,
ReplyIn 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...
@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?
ReplyDon't worry about pageviews, on weekends pageviews are decreased by 10-20% for most of the bloggers.
I'm facing this problem from yesterday...It's so bad...But I can see links in your blog...?
ReplyI have added it to my blog.Thanks for posting this.
Reply:D ... google buzz!!!
Replyi am added... :P
by the way that code not too high -42 ?
ReplyYeah 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.
Replyi see...
ReplyCan I request a Buzz Counter for it? Just like in twitter...
ReplyI 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?
]
Replydiv 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/)
@Anup,
Replyyeah 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
@Rudy,
ReplyIn 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...
Thank you for your reply Divya. :-*
Reply@ Divaya
ReplyI'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.
@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:
Reply(/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
cool thanx for the code : )
Replyhttp://www.emailzz.blogspot.com
Thanks Divaya now this code is ok.
Reply(/h1)
--G-BUZZ-CODE-COMES-HERE--
(div class='meta')
Now I can use G Buzz Button.. :-*
Hi! I just wanted to know how did you created the domain: http://main.bloggerstop.net/forum/
Reply¿Did you used blogger? I've bought a domain (.com) at blogger and wanted to create a subdomain.
Hope you could help me
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.
Replyexcellent article - thank you for your help.
ReplyOnly one problem for me. I applied it to my blog: http://www.c14ism.blogspot.com, and it isn't working.
Any ideas?
Found it working perfectly in your blog...hope you have already fixed the problem!
ReplyHi 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
ReplyIt seem interesting using google buzz on blogger..very helpful..thanks alot
ReplyThanks, this button will stand well on my new BlogSpot. :-)
ReplyThe 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.
Hello Sai, I have your great Buzz button on my blog, but I
Replycant 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]
That's nice & simple layout buddy! and you got a great blog-url.
ReplyThat 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;
}
Great man, tanks Sai. It worked. I've also created a new Buzz Button.
Replyone in Dutch, see my site and one international [eng] if you like it, grab it.
http://i49.tinypic.com/33kdp95.png
woooaaa thanks for this.. i have applied them on both my blogger blogs... check
Replycheck out http://miyabetayo.blogspot.com and http://tonyboystories.blogspot.com.. this is a great help..keep on rockin...
@Erwin
ReplyGreat 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.
Hi,
ReplyYesterday 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
Hey Poras,
Replyinstead 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>
Hi,
ReplyBy Using that code the Border is still appearing.
okay, do this:
Replyfind this code:
</head>
and just before it, paste tis code:
<style type='css/text'>
a img {
border: 0px;
}
</style>
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...
ReplyMay be he's talking about the button overlapping your titles, just lower the margin from -42px to -20px or something like that.
ReplyNow, we can add google buzz button with counter
Replyhttp://myfundoo-blog.blogspot.com/2010/02/google-buzz-button-with-counter.html
@ikb
ReplyThanks 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 !!!
Hi! Can I share this?
ReplyA Google Buzz Button with counter is now available: http://www.coolbuster.net/2010/02/google-buzz-button-with-counter.html
Google Buzz Counter Button is available here now - http://www.geekblogger.org/2010/02/add-google-buzz-button-with-counter-in.html.
ReplyThanks for the above post.
Hey,
Replyyou 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.
Thank you all for updating me about the counter buttons, I will soon have an updated post about it.
Reply@geekboys,
Great work
Thank you very much for this great tutorial, i have added the google buzz to my blog and it's working perfectly
Replythanks !
Replythnx 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?
Replyplz reply dude
Rocking Sai .... Thanks
ReplyTHANKS !
Replyarthemia 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 !
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?
ReplyYes I have the tutorials in two parts:
ReplyPart-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.
really cool man .. thanks a lots for this one.
ReplyAwesome. I was looking for how to add buzz button on my blogger and found this. Thanks!
Reply:D You are a Gem of a Resource!
ReplyI'm flattered thnk u
ReplyHi Sai,
ReplyI 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
Is Google Buzz really that useful?
ReplyI 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.
ReplyHi 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
ReplyNice tutorial...I sucessfully implmented Google Buzz on a blog of mine...thanks to your article! Thanks
ReplyGot some odd in my blog Home Page my reader told that.
ReplyThanks for sharing this info, i find it very useful.
ReplyThanks 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.
ReplyEste portal es simplemente sensacional.
ReplyComments are moderated on this blog
Allowed HTML tags: <b>, <i> and <a>
Comment Like This! and Optimize your blog EmoticonEmoticon