Add a Google Buzz Button to Your Blog

John Chow came up with this Buzz hack to add a Google Buzz Button to your site. What it does is submits the article to Google Reader. From there Google Buzz adds your Reader stream to Google Buzz.

I did not like how the code worked so I improved upon it here. I did not like the fact the image resided on John’s site and it was hard to understand that you needed to add it to WordPress code. Better instructions were needed. Here you go!

Here is how to do this….

Here is the code:

<a rel="nofollow" target="_blank" href="http://www.google.com/reader/link?url=http://www.YOUR-DOMAIN-HERE/<?php the_ID(); ?>&title=<?php the_title(); ?>“><img src="/images/buzz.png" alt="Buzz This" /></a>

Right click the textbox, select all and then copy the code.

Next open Notepad if you are in Windows, your text editor if you are in Linux or Mac. And I mean text editor, not Word or the equivalent. Notepad is the default in Windows, or you can use your HTML editor set on HTML not WYSIWYG.

Now paste the code you just copied and replace YOUR-DOMAIN-HERE with your domain.

If you use numeric strings on your blog URLs like I do, (look at your address bar) then you will need to add ?p= after the / after your domain. link this http://www.googlingsocial.com/?p= as I had to do. If you use word string ULSs in your blog posts you should be fine.

Now copy the code again and proceed with the next step.

Step 2 Add the code to WordPress

Next go to your WordPress admin panel.

Click “Appearance” or “Design” tab in older installs.

Now click “Design Editor” to open the WordPress app.

Next open the “Single Post” page, usually named single.php as the file name. You only want it on your single blog post pages, you do not want your Buzz friends adding the entire domain based 10 post blog synopsis to Buzz.

Look at the image below to see where you are going to add the code.

You are looking for a line that says ?php the_content()

Like I did in the screen shot below.

Click image to see full size.

Paste in your code directly below it. I supplied you with comment tags so you can find only your code easily after you add it.

Click “Save” to finish this step.

Step 3: Get the Button image

Right click the image, select save as and then save it to the images folder of your site.

Now FTP the image to the /images folder on your site. Almost every site has one, it is the default. If not create one. If you don’t know how to FTP I show your here. Don’t pay attention to the Google Friend Connect stuff, they removed the need to FTP.

Hope this helps you out and you can try my button out below. Any ideas or feedback on how we can improve this just let me know in the comments below.

13 comments on “Add a Google Buzz Button to Your Blog”

Chris Lang on February 18, 2010 at 7:19 am said:

You are all welcome to add links to your sites here in comments that use the Gbuzz button.

Let us know so we can Buzz you up!

Erik Astrand on February 18, 2010 at 8:42 am said:

Thanks Chris! I am now testing the buzz button at my new dog site. It would be nice to have a popup or lightbox for the comment instead of loading a new window.

Dian Joubert on February 18, 2010 at 12:28 pm said:

Why do you use word-strings? I did this for 4 months because I had an epic of a time trying to figure out how to get permalinks to work. Now I know.

If you need any help, I’m always there for you!

Chris Lang on February 18, 2010 at 4:57 pm said:

Actually I don’t use word strings on this blog or KeyWebData.com. I use what is called a query string. Check the address bar.

I do that so that I or anyone else do not have to use those ridiculous URL shortners when they shout a link from here.

But yes, Permalinks are a pain, GoDaddy WordPress installs seem to have the most problems with them.

Taura Eruera on February 18, 2010 at 5:10 pm said:

Thanks for the buzz code Chris. Tried to make the code work for Joomla 1.5 but not successful. Any idea how I can succeed with this?

Gwendolyn on February 19, 2010 at 10:33 pm said:

Thanks for the buzz code

David Barger on February 22, 2010 at 12:53 pm said:

Hey thanks for the button Chris. I answered one person’s question already with you revision and I’ll be sure to Buzz about this!

Thanks again,

Dave

Luma Rosa on February 23, 2010 at 4:58 pm said:

Chris, I do not obtain to add. When I try to visualize the page before saving, appears the message:

“The value of attribute “href” associated with an element type “null” must not contain the ‘<‘ character”

Been thankful if it will be able to help me

Anthony on February 25, 2010 at 7:58 am said:

Chris great post, I have a question though. I have a customized theme i purchased for my wordpress blog, i followed the steps and it still doesnt seem to be working.

is it because my “theme” is different or am I just not doing it correctly?

Thanks man! YOU ROCKKKKKKKK!