Create your own simple button for Google Toolbar

Introduction

Here is a quick tutorial on how to add your own custom button to Google Toolbar. I decided to pick something extremely simple for my first article. There's not really even any coding involved, just a simple XML file and a link!

You will need to compose an XML document. Google will use this to create the button. It's nothing fancy - really! If you don't know what XML is - don't worry about! To start, take a look at the contents of the Green Marines XML file:

<?xml version="1.0" ?>
- <custombuttons xmlns="http://toolbar.google.com/custombuttons/">
- <button>
<site>http://www.greenmarines.com</site> 
<title>Green Marines</title> 
<description>A free community for US Marines.</description> 
<update>http://www.greenmarines.com/updated_button.xml</update> 
<icon mode="base64" type="image/x-icon">
AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAQAEAA
AAAAAAAAAAAAAAA AAAAAAAAAAAA////AH97gAC/vr8AQT4+AN/d4ABgXGAAo
J+gACEbIACPjJAA7+7vAFFLUQAwKzAA 0M3QAHBtbQCwrq4AmJWYAElESACIg
4gA9/f3ALe2twBYVFgAKSMoAOfl5wDHxccA2NfXADgzNgB5 dXcAqKepAGlla
gAcFhsAPDg8AGViYgCEgYEAXFZeAJOTkwB9e3gAJCAkAIyKigBFQEQATUhMAP
Ty 9AB0cnQA6+vrACwnLAA0LjQAy8jLAMPBwwC7ubsA29ncAJ2angB0cm4AVU
9YAFpZVwDV1NQAIB4c AFhVUwCclpsAUU9OAKakpgDS0dEAY15jAHt2ewAjHx
8AbGhrAEE7QQBEQUAA8fHxAB4YHgDNys4A NjE5ADo1OQBTTlMAVlJVAFxXWg
BwbHEA4eDhALaztQBOSk8ArquvAHJvcACGgoUAfXp9AKKfowCa mJgAZ2JlAP
n5+QCWk5YAjoyMAMK+wgBqZG0AUE9RAJOQkgD9/f4A7eztAN3b3QAuKS0A2tj
ZADIt MgA+OjsAR0JHALm4uQBjXmAAlZGUAH58ewA0MDIAPjg+AL25vQDq6eo
AKyUrANDQ0AA1MDUAycfK AF1YXABfWl8AYV1iAImFiQD49/kAPDY7AMbFxQD
BwMIAUk1RAHNvcgCQjI4A8fHzAB4aHgAuJy0A 1dTWAL++vQBaV1cAJSElAC8
qLgAzLzMAW1hYAGFbYQBkX2QAcWtwAP7+/wD4+PgA9/b2APDw8QDs 7OwAHhk
dACUfJADc2t0AKyYqACwmKwDa2doAMy0zANLQ0gDOy84APTg9ALy6vQBMSEsA
TUlNAFFO TwCYlJcAb2xtAHt3egB9e34A//7/AP7+/gD+/f8A/f3/AP79/gD4
+PkA6unrACwmLAAsKCwANzM2 ADo1OgBFQUQAvLm9AFJOUQBYVFkAcm9yAHl1
eAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA A
AAAoQEpDQUXL7B/AQEBAQEBAQFhnE1Jr1d5cWwBAaOiogGLIVAgnRiWQAafeA
EBoqIBPA86OJsq kR4sj21cpImiAW5UMyRjfSVvZKmODHABAQFMHa18dBaUTo
eaJ2IQAaUBXjlyCTt+dj2IngaSHDJz XQE2QjdYq6iGEj4VknooSwGgAXcOJi
N9Rlo0agaZC66ViQEBAXUBmEctaRSANVgEe4kBAQEBAQEb g1sBExkBBwOJE0
9Ta0VlaBoiMJOQWaxWAYxSH0RBlz9mCKoRhEhRCokBASsCYKdVgUqCfmdDAQG
h AQEBAV9TLoWmZzEBAQEBAaGhoaGhoYqNoaGhoaGhoQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAA=</icon> 
<feed refresh-interval="1800">http://www.greenmarines.com/
          MemberBlogs/tabid/67/rssid/0/Default.aspx</feed> 
</button>
</custombuttons>

Most of this is the Base64 encoded icon - we'll get to that in a minute. What you need to do is copy the above XML, then begin replacing the values inside the elements. The elements are:

• site - The location the browser will be directed to if someone clicks your button.
• title - The name of your button.
• description - Keep it short, this will appear when your mouse hovers over the button on the toolbar.
• update - the location of the XML file.
• icon - Base64 encoded representation of your button's icon.
• feed - an RSS or ATOM feed added to your button (required if you want to submit your button to the Google Button Gallery). You can add more than one too!

You don't need all of them. The main ones are in bold above. Just replace the values between these tags in the XML with your own. To Base64 encode an image for your button, determine or create your image. (I used Green Marines favicon.ico since it will be made of 16 x 16 pixels anyway). Then use this page to encode your image. Copy the result into the image element of your XML document.

If you have an RSS or ATOM feed, insert the URL of your feed into the feed element. Save your document with a .xml extension (we used updated_button.xml). Copy the XML file to the root of your website directory. It's ready to go!

Now, just add the below link to your site, wherever you choose, and when people click it, they will get your button added onto their Google Toolbar:

http://toolbar.google.com/buttons/add?url=http://www.yourwebsite.com/yourbuttonxmlfile.xml

Replace url= with the fully qualified public URL to your XML file. If someone clicks the link and doesn't already have the correct version of Google Toolbar installed, they will be prompted to install the correct toolbar.

That's it! For more detailed instructions, go here: http://www.google.com/tools/toolbar/buttons/apis/howto_guide.html.