Google Toolbar Custom Button Tutorial

Have you installed the new Google Toolbar v.4 Beta? If yes, then you must have noticed the custom button feature. Read all about it on the Google Toolbar Features page. Did you try creating one for your website? I did, and it took me something like 10 minutes. Want to try it? Go to the Newster.net FAQ page and check out the last question.

This new feature is a boon for web developers like myself who don’t want to create a whole toolbar for simple functionalities (these days every website wants your to download their own toolbar. Finally you have more toolbars and less screen area to actually browse).

Want to create your own button for your website? Read on. Let me show you how I did it. Before you start make sure you have a favicon. This tutorial will teach you how to get one. If you don’t have a favicon your button will look like a Google button.

(If you would prefer to read the API documentation directly from the Google website, I have linked it at the very end of this article.)

Step 1. Right click on the search box for your website and choose the option “Generate Custom Search…” option. See image below




Follow the instructions and you will have a button added to your toolbar as shown below.




Step 2. Click on setting and go to the advanced editor. See images below.


---




In the editor enter the following line as shown in the image below:

<feed refresh-interval="3800">http://yourdomain.name/rss_path.xml</feed>



If you have an ampersand in the path above you will encounter an error as shown below.




Just replace the "&" with "&amp;" and it should fix the error.

(Note: this is a good time to save the XML file. Copy paste the content into a notepad and save with .xml extension. We will use this file in Step 3)

Click the “Save to Google Toolbar” button and you will see the see the feed added to the button you created in Step 1. See image below.





Step 3. Save the XML file to a location/directory on your web server. And use the following line to link to your own Google Toolbar Button:

http://toolbar.google.com/buttons/add?url=http://www.yourdomain.name/yourbutton.xml

Publish this link and let the world add your button to their own Google Toolbar.


Step 4. This step is optional, but wont hurt. Submit your custom button to the Google Button Gallery


That’s it! You are all set. But please note that this is a basic button and you can do much more with API documented on the Google website. Check out the links below. If you have any questions I will be glad to help. Please let me know if this tutorial helped you.


Related Links

Google tutorial: Create your own buttons
Full Google Toolbar API