A Quick Way to Create a Google Toolbar Button

19 May, 2007

Blogging, Tips

screenshot 19 05 2007 13 20 10 A Quick Way to Create a Google Toolbar Button

Inspired by Wendy Piersall’s post “What’s on Your To Do List? Let Pool our Resources” I’ve spent the most of the morning figuring out how to create one.

I’ve decided to create two tutorials – One for the technical-minded and one for the lazy man/woman.

Let’s start with the one for the lazy man/woman:

And now for something completely different – The technical guide:

There’s not really even any coding involved, just a simple XML file and a link! (Hopefully this didn’t disappoint any technical minded)

You will need to compose an XML document. Google will use this to create the button. It’s nothing fancy – really!

To start out we can use my existing XML file: (you can also download it Use Right-Click and Save as)

<?xml version=”1.0″ encoding=”utf-8″?>
<custombuttons xmlns=”http://toolbar.google.com/custombuttons/”>
<button>
<title>Petersen Inc.</title>
<description>The Official Petersen Inc. Google Toolbar Button</description>
<site>http://www.thebetanews.com</site>
<search>http://www.google.com/search?q=site:www.thebetanews.com+{query}</search>
<feed refresh-interval=”3600″>http://www.thebetanews.com/feed</feed>
<icon mode=”base64″ type=”image/x-icon”>AAABAAIAEBAAAAAAAABoBQAAJgAAACAgAAAAAAAAqAgAAI4FAAAoAAAAEAAAACAAAAABAAgAAAAA
AEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///wC7jUYAQkZLAN3GowCgXgAAgYCAAObf1QDGqXsA
mJueAMjHxQCwkWIA6uvtANS3iwDm07UAxqBlAK6BOwDZ0cUA+fXvALqgeADWyrgAx7CLANm/lwDT
sn4Ay6dwAPDk0QD19/kA3tfMAODOsgC2lF4A18CeAPPx7gD7+vcAwJFHAN7EnQDEnWAA9PT0APv8
/QDr6ugAxq2HAPn5+wDj0LQA/fz6APv49ADex6UA+/v7APf4+QD+/v4A/P3+AP7//wD///4A/Pz9
ANS3igAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAABAQEBAQEBAQEBAQEBAQEAAQEBAQEBAQEBAQEBAQEBAAEBAQEB
AQEBAQEBAQEBAQABAQEBAQEBAQEBAQEBAQEAAQEBAQEBAQEBAQEBAQEBAAEBAQEBAQEBASgMLgEB
AQABAQEBAQEBAQEbCxElAQEAAQEvKyogMi0aFQUdMAEBAAEsDwIjIRMDBiIXECYBAQABNA0EKQ4U
CQoWGQgfAQEAAQEBAQEBAQEBHBgnJAEBAAEBAQEBAQEBARIeBwEBAQABAQEBAQEBAQEBMzEBAQEA
AQEBAQEBAQEBAQEBAQEBAAEBAQEBAQEBAQEBAQEBAQAAAAAAAAAAAAAAAAAAAACAAAAAgAAAAIAA
AACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAAD//wAAKAAA
ACAAAABAAAAAAQAIAAAAAACABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AuIc9AMe6pwBcYGYA
nlwAACwsLQDa2toAgYSHAM6qcgCdnZ0ArnIbAOTStgCsjl8AsZ1+APTu5ADCw8QAGxsbANW5jQDD
m10Ap3gxAOveygCqqqoAd3h5AN7IpQCngEYAwJJLAM3OzwDj5eYA0MWzAPT19QC3gS0As5huANGx
gADr5NgA3MGYAP/67gDi1sMAp2wRAOvs7gCibh4Aq4dQAK55JwC+nWgA28uyAPfr2QC6klUAyqt8
AMegZgDb19EA/PPlAMfCvAAnJycA1sCfAN7RvQC+vr4A+vr6ALB+MQC1gzYA4syrAN/f3gC9jkUA
8fDuAMrKygDm1bwAwZhXANbW1gDx6NoA28mrAOjZwwCocBoA6eflAL+UUgDXvJIA8+vfAKt2IwDv
5dQA7eHOAOLPsgC1oIAA07aJAMyugAC5ikEAuppnANrCnQD39/gAqKenALJ9LQC8kEoAzq58AO7v
8QAqKioA/P39APLy8wCweyoAdnh9AKtvGACzgDIAtoU5ANjKtAD169wA7ubaAObZxgDRs4MA0reN
AOrbxQDg3tsA4c6vAMTBvQC7m2oAxKBnAM7Q0QDMqXQAoF4AAOjo5wDw59gAtII0ALeGOwDPr34A
/v38APf29gDY19YA693IAN7JpwCrqqgA/v7+APv7+wD7+/kA9e/lAPLp2wD9/P0A+/z9APb29QCy
fi4A8/PzALSBMwC3hzwA29rZAMzNzwDk07cA49CyAOLOsAD///4A/f7+AP39/QD09fYAtYU5ALyQ
SwDr3skA5tW7AOPPsgDMqXMA0bF/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEBAQEBAQEBAQEBAQEBAQEBAQEB
AQEBAQEBAQEBAQABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAAEBAQEBAQEBAQEBAQEB
AQEBAQEBAQEBAQEBAQEBAQEAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQABAQEBAQEB
AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEA
AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB
AQEBAQEBAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAAQEBAQEBAQEBAQEBAQEBAQEB
AQEBAQEBAQEBAQEBAQABAQEBAQEBAQEBAQEBAQEBAQEBAQFVkAEBAQEBAQEBAAEBAQEBAQEBAQEB
AQEBAQEBAQEeXDxdkQEBAQEBAQEAAQEBAQEBAQEBAQEBAQEBAQEBAUcbY4lqAQEBAQEBAQABAQEB
AQEBAQEBAQEBAQEBAQEBJA4gT2YBfQEBAQEBAAEBAQEBAQEBAQEBAQEBAQEBAQcQkkZLM29+AQEB
AQEAAQEBAQEBAQEBAQEBAQEBAQEBZQ05cSYZNgEBAQEBAQABAQF6AZVOGI2UiwyMLRwWN1YBCZiH
BSp/AQEBAQEBAAEBjhNpdTB0VxJiXj1ZCAZbF3ltO0BgFHwnAQEBAQEAAQEBSAI6UmKFYUGIHykE
ETRfNRqWgHsLK1oBAQEBAQABAQFYk0x2a0N6TIEVMooKQj8BaEl3ZFOGAQEBAQEBAAEBAU1KAXcB
AQEBAQEBcjgBAYQvIXMjKGwBAQEBAQEAAQEBAQEBAQEBAQEBAQEBAQEBIlRnl25RA4MBAQEBAQAB
AQEBAQEBAQEBAQEBAQEBAQEBAVBwLjEBfQEBAQEBAAEBAQEBAQEBAQEBAQEBAQEBAQEPRUQsHQEB
AQEBAQEAAQEBAQEBAQEBAQEBAQEBAQEBAYIBJXg+AQEBAQEBAQABAQEBAQEBAQEBAQEBAQEBAQEB
AQE4jwEBAQEBAQEBAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAAQEBAQEBAQEBAQEB
AQEBAQEBAQEBAQEBAQEBAQEBAQABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAAEBAQEB
AQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB
AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAA
gAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACA
AAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAP////8=</icon>
<update>http://www.thebetanews.com/betanews.xml</update>
</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 red 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 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 an .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, where ever 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.<my domain>.com/filename.xml

Replace the url= with the fully qualified public url to your xml file. For instance: http://toolbar.google.com/buttons/add?url=http://www.thebetanews.com/petersen-inc.xml

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

And remember to add my Google Toolbar Button

If you enjoyed this post, make sure you subscribe to my RSS feed!

The Beta News

Subscribe to our e-mail newsletter to receive updates.

  • http://www.emomsathome.com/blog/2007/05/21/the-to-do-wish-list-group-research-project/ The To Do Wish List Group Research Project – eMoms at Home – Blogging and Internet Marketing for Home Based Entrepreneurs

    [...] Dennis’ post on creating the Google Toolbar Icon [...]

  • http://www.instigatorblog.com/the-ultimate-to-do-list-for-bloggers/2007/05/22/ The Ultimate To-Do List For Bloggers : Instigator Blog

    [...] for me because it’s something I had never heard of before. Wendy points to a basic article on how to create a Google Toolbar button. If / when your button is approved by Google it goes into their Gallery and can be found there. [...]

  • http://www.vinodlive.com Vinod

    Awesome. Thank you very much for this idea.

  • http://www.vinodlive.com/2007/05/25/excellent-to-do-list-for-bloggers/ Excellent To-Do list for Bloggers | Vinod Live!

    [...] me to this amazing project and I do agree with him on one of the best article seen over there as how to create a Google Toolbar button. I created my own Google button and you can see that in the Navigation bar as well near the RSS [...]

  • http://www.thebetanews.com Don

    Thank you very much Vinod. I really appreciate it.

  • http://www.emomsathome.com/blog/2007/05/26/25-internet-marketing-how-tos-for-every-level-of-experience/ 25 Internet Marketing How To’s for Every Level of Experience – eMoms at Home – Blogging and Internet Marketing for Home Based Entrepreneurs

    [...] Dennis on Creating the Google Toolbar Icon [...]

  • http://www.thebetanews.com/26-internet-marketing-how-tos.htm 26 Internet Marketing How To’s | Petersen Inc.

    [...] with 26 user submitted How To’s. I am really proud to be a part of the project. I wrote A Quick Way to Create a Google Toolbar Button and in case you haven’t added the Official Petersen Inc. Google Toolbar button please click [...]

  • http://domrikg.biz maanbc

  • http://www.seoladder.com/2007/09/07/generate-traffic-by-creating-a-google-toolbar-button/ Generate traffic by creating a Google Toolbar Button – SEO Ladder

    [...] Bjorn Petersen rose to Wendy’s challenge and created an awesome tutorial on how create a Google Toolbar button. Instead of rehashing the steps that Dennis took in my article, I suggest giving his tutorial a [...]

  • http://danperry.com/wordpress/ Dan Perry

    Thanks for including both versions. Of course, I’ll dig into #1, but good thinking including both.