Make a Google Tool-bar Button

by cheesywillie in Circuits > Websites

1434 Views, 2 Favorites, 0 Comments

Make a Google Tool-bar Button

Learn how to make a "Button" for the Google tool-bar.

Get the Tool-bar

Go to http://toolbar.google.com/T4/ to pick-up the Google tool-bar Beta.

Find the Folder

The default folder where we will be storing our buttons is located at:
"C:\Documents and Settings\Administrator\Local Settings\Application Data\Google"

See an Example

A good example of a button file is file-named:
toolbar.google.com_FRNRZS14FPC8C1RSTOMW
If you right click it and select edit you will see the following text (DO NOT BE AFRAID):

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Dictionary (Google)</title>
<description>Look up a definition</description>
<search>http://www.google.com/search?hl=en&lr=&q=define%3A+{query}</search>
<send>http://www.google.com/search?hl=en&lr=&q=define%3A+{selection}</send>
<site>http://www.google.com/language_tools</site>
<icon mode="base64" type="image/x-icon">
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOjgzcClWOP86ODNgAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOjgzMBZyQv8AxV3/Jlc67zo4MzAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOjgzEC1QN88Aw1z/ouLD/wu3aP80RDfPOjgz
EAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADo4M48ArVf/aOiu//Pz8/9wnoD/
Aq5g/zo4M68AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADo4M0AcfU//OeOZ//Pz8/+9
ubn/hIN3/12+jv8AmFH/Ojgznzo4M2A6ODO/OjgzUAAAAAAAAAAAAAAAAAAAAAA0TzzfJtKH/+v2
8//Dw8P/5+fn/316df+mopf/ddGk/wCYUf8cZ0D/G92J/yJgPf86ODMQAAAAAAAAAAAAAAAAOjgz
n2mnhv/Dw8P/5+fn/+Pq5f/z8/P/goF7/7m2sP932Kr/ANd3/0+ug/8Aq1X/Ojgzrzo4M0A6ODNA
OjgzIDo4M0BpaGf/5+fn//Pz8/+ouqz/8/Pz//Pz8/+RkI3/rq2n/8DAuf9XVlD/S6d3/wHBaP8I
hkn/CIZJ/y9ONu8AAAAAVVJO7+rw7P+uwrH/4+rl/6G1pv/z8/P/8/Pz/9HR0f97enL/u7iy/21s
aP+1saz/0dDN/4m4nv86ODOvAAAAADo4M4/MzMr/tse5/8zZzv/j6uX/tse5/8bRyP/Bvrb/s7Cm
//Xy8v/z8/P/ra2t/6enpf+EhIL/OjgznwAAAAA6ODMgYmBb7/Pz8/+2x7n/rsKx/8zZzv/OzMf/
pqKX/+3r6//z8/P/8/Pz//Pz8/+bmZf/Ojgznzo4MxAAAAAAAAAAADo4M2B4d3H/8PDs//Pz8//M
zMr/mZWJ/8PNwv+uwrH/3OXe/9je2P94d3H/OjgzcAAAAAAAAAAAAAAAAAAAAAAAAAAAOjgzQDo4
M686ODO/Ojgzv5qXj//N2M//vs7B/7C5sP9iYFvvOjgzQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAADo4MxA6ODOfXl1Y/2JgW+86ODOvOjgzIAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAA//8AAOP/AADB/wAAgP8AAID/AAAADwAAAAcAAAAAAAAAAAAAgAAAAIAAAACAAAAAwAMAAOAH
AAD8DwAA//8AAA==
</icon>
<update>http://toolbar.google.com/buttons/defs/google.com_define.xml</update>
</button>
</custombuttons>

looks scary, huh?

Lay-out of the Button

The button's XML is broken into five main parts:
1. Site- Where the button will link it's user to.
2. Title- What the name of the button will be
3. Description- Displayed when user hover's mouse over button.
4. Icon- the Base 64 icon code (will explain later)
5. Where it will be stored (optional)

The Basic "template" will look like this:
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://YOUR SITE HERE</site>
<title>TITLE HERE</title>
<description>DESCRIPTION</description>
<icon mode="base64">YOUR ICON CODE GOES HERE (WILL EXPLAIN LATER)=</icon>
<update>http://WHERE IT IS HOSTED (OPTIONAL)</update>
</button>
</custombuttons>

Write the Button

First, open up notepad. If you haven't alread, go ahead and copy and paste the template i have provided in the previous step. Fill in all the Cap letters with your own desired info. Now comes time to do the icon. You will need to convert a 64x64 icon into a base64 string (dont worry its simple). First get your icon. I have found that the best way to do this is to type in the name of the site and inject "/favicon.ico" after the site URL. For example:
www.makezine.com/favicon.ico
Right click the icon and select "Save image as...". Once saved on to your HDD, go to http://www.motobit.com/util/base64-decoder-encoder.asp and simply upload your image and press "Convert the source data". After it is done be sure and copy ALL of the BASE64 text. Now simply go to your notepad and paste all the base64 between the "<icon mode="base64">" and "</icon>" tags.

Final Stages and Tips