How To Make A Google Toolbar Button For Your Blog

Google Toolbar is a great browsing extension. I use it since its only benefit was to show you the page rank of the page you visited. And it was a great tool. But things have changed and now Google Toolbar is making important steps toward a more socialized approach of the new web.

One of these new approaches is about the Google Toolbar buttons. The latest toolbar version, with the major number 3, which you can download here, has a very nifty feature that lets you add buttons on the toolbar as you see fit. Meaning you have unlimited choices and liberty to make anything you want out of the toolbar: adding buttons for your preferred recipe website, for your sport scores, or for the most interesting bloggers you know.

Google also put together a space where you can see buttons created by other people. Wow, wait a minute? Google just let me to publish my own button? Well, uhhmm, yes, the answer is yes!

Thats’ really awesome! That is a very interesting opportunity for you to promote your service, being a blog, or a corporate network.

In the next 2 minutes I’ll show you a very short description of how you can make a button for your blog. After making the button, and testing it, you can use this simple form at google buttons gallery to add your creation.

First thing first, let’s start with a simple template:

<custombuttons xmlns=”http://toolbar.google.com/custombuttons/”>
<button>
<title>eDragonu – personal development</title>
<description>A Romanian entrepreneur blog about personal development and getting things done</description>

<site>http://www.dragosroua.com/</site>
</button>
</custombuttons>

If you save this code above on a file ending with .xml you’ll have a pretty much functional Google button. You can also try to copy and paste the code above in the Google Toolbar advanced button editor. Of course, you need to replace the info between the title, description and site tags with your own information. But I don’t recommend it, doing it blindly will not give you much benefit in the long run. Let’s explain a bit:

1. <custombuttons> means the file will be interpreted as a custom button xml file, using a namespace defined at http://toolbar.google.com/custombuttons/.
2. <button> starts the actual button definition, here you will have all the info related to your button, like title, description and site.
3. <title> this is the title of your button, from my experience is better to keep it as short as you can.
4. <description> here’s you will usually put a sentence as clear as you can about what the button will actually do, or what your blog contains.
5. <site> the most important, your website address, that’s the place where you will direct users once they clicked your button.

And that’s that! Now that you know the meaning of each tag everything seems more clear. You now have a functional Google Toolbar button. But wait, there’s more! Is there any chance that I could add to this button something like a feed drop-down menu? And when you click the button you can actually see al the new posts without visiting the page? Of course you can! And it’s pretty simple too, just add a line like the one below just before the </button> tag:

<feed refresh-interval=”1800″>http://feeds.feedburner.com/dragosroua/</feed>

Of course, replace the feed address with your actual feed address. Keep in mind that you will experience a pretty high load if a lot of people are starting to use your feed-enhanced button, so maybe you will want to tweak a little the “refresh-interval” option.

The new code for the button will look like this:

<custombuttons xmlns=”http://toolbar.google.com/custombuttons/”>
<button>
<title>eDragonu – personal development</title>
<description>A Romanian entrepreneur blog about personal development and getting things done</description>

<site>http://www.dragosroua.com/</site>
<feed refresh-interval=”1800″>http://feeds.feedburner.com/Edragonu-TheChoiceOfAPersonalPath</feed>
</button>
</custombuttons>

Pretty simple, right? If you want to really complicate things a little, you can also try to insert an icon, integrate a search query within, or even try to automatically adjust the icon based on your mood. All of these are possible, but you need to further read the documentation at Google Toolbar API’s page.

We’re now trying to finish the little tutorial with some simple instructions for hosting, testing and submitting your button to Google Button Gallery.

Once you’ve made your code, save it to a folder on your blog server. I highly recommend to save it on your root domain, so the button address will be something like:

http://www.dragosroua.com/edragonu_button.xml

This is important because this will be the actual address of the button, Google will not host your button for you, so if you change the address the button will be impossible to be found.

Once the button is in place, try to test it. I use this piece of code, saved on my wordpress template sidebar:

<a href=http://toolbar.google.com/buttons/add?url=http://www.dragosroua.com/edragonu_button.xml>add</a> to Google Toolbar!

It will give you something like this: add to Google Toolbar!.

Click on the link and see if the Google Toolbar is actually adding your button. If not, try to restart the button creation process, there must be a bug somewhere. But if everything went well, just go ahead and submit your button using this very simple form at google buttons gallery.

And don’t forget to load this button in your own Google Toolbar ;-).