Adding custom buttons to the new Google Toolbar



January 30th, 2006

OK, in this post I'm going to show you how to create a simple custom button for the new [tag]Google Toolbar beta 4[/tag].  I'll base this short article on the custom button that I created for this site earlier today (download here).

That these buttons do is allow you to create a button that lets the user search your site through the [tag]Google Toolbar[/tag] - they type in a search criteria and then click the Go button and it returns a search for your site.

OK, you need a few things before you start:

  • A text editor (Windows Notepad will do)
  • A 16 x 16 icon to act as the button (optional)

I'll start by showing you the XML file that adds the button for this site:

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
 <site>http://www.pcdoctor-guide.com/</site>
 <title>Search PC Doctor!</title>
 <description>Search PCDoctor-Guide.com</description>
 <search>http://www.pcdoctor-guide.com/wordpress/index.php?s={query}</search>
 <icon mode="base64" type="image/x-icon">
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAABMLAAATCwAAAAAA
AAAAAAD////c////7f///+3////t////7f///+3////t////7f///+3////t////7f///+3////t
////7f///+3////c////8v/////////////////////////////////////f1s//q5KB/+bh4P//
////////////////////////8v///+3///////////////////////////7///+4p57/yJtw/5ts
Sf/a1tf//////////////////////////+3////t///////////+////3tfU/76to/+ji3z/nXdY
//bMn/+fdFX/hWld/76wrP/29PT////////////////t////7f/////29PT/xLKk/66Qdf+6mHj/
0a6K/+nNqv/83rj/3ruW/6+IZf+CWDn/eVdG/9LJxv//////////7f///+329fT/x7Og/8mtkf/w
1bb//efG/82Xff/MeFD/zYBT/+K0jv/74Lz/6Mil/6yGY/9sRC7/1c7M/////+39/f7t2Mu//9C5
ov/548n//+nN///t0v/eybL/gxgA/55IJ//46Mr//+TE///hwP/017j/qINj/4ZpXP/7+/vt9/Tz
7dDAr//z4c3//+7Y///p0v//79j/5tbB/4cjA/+oWjz///LY///kyf//5Mn//+bJ/+bLr/+KaFT/
7Orq7fX18+3Wyr3//O/e///w3///7dz///fk/+bWyP+IHAD/p1Y4//724P//6tP//+jQ///q0//z
3cT/lHZk/+rn5u339vTt2tHI//v16v//9en///To//r15/+re2n/hi8g/55jU//++Oj//+/d///s
2P//9OL/8d/L/6uThP/19PTt/v387eXg2//v6+f///35///58f/9+PD/6N/Z/+PItf/t3tH///ju
///y5P//9+z///zy/9rItv/Vy8b/////7f///+359/X/5+Pf//Px8P////3//////9PCwP95GAH/
sW1X//7++////vr//vz5/+7k2f/e1c7//P39/////+3////t//////r5+P/t6+n/7+7t//j5+P/v
6+n/qZaV/9DCwP/8+/r/9fPy/+zm4f/v6uf//f7+///////////t////7f///////////v7+//Tz
8v/08vD/9/b2///////9////9fLv//Du7P/5+fn/////////////////////7f////L/////////
//////////////////////////////////////////////////////////////////////L////c
////7f///+3////t////7f///+3////t////7f///+3////t////7f///+3////t////7f///+3/
///c//8AAP8fAAD+HwEA8A8AAOADAADAAQAAgAEAAIAAAACAAAAAgAEAQIABAMDAAwAA4AcBAPAf
AAD//wAA//8AAA==
 </icon>
    <update>http://www.pcdoctor-guide.com/wordpress/files/pcdoc.xml</update>
  </button>
</custombuttons>

If you take a look at this file you'll see that the structure is pretty simple and you can easily modify this to suit your needs.

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>

This is just header stuff - no changes needed there.

 <site>http://www.pcdoctor-guide.com/</site>

Here you specify the site that the button refers to.

 <title>Search PC Doctor!</title>

Title for the button.  Change as required.

 <description>Search PCDoctor-Guide.com</description>

Short description of what the button does.

 <search>http://www.pcdoctor-guide.com/wordpress/index.php?s={query}</search>

This is the search URL for your site.  If you have a WordPress powered site then the search URL will take on the following format:

http://www.example.com/index.php?s=

If you use Movable Type then the syntax of the search URL will be:

http://www.example.com/cgi-bin/movabletype/mt-search.cgi?IncludeBlogs=1&search=

You will need to check up on the right search parameter for your site (easiest way is to carry out a search - that will show you what it should be).

 <icon mode="base64" type="image/x-icon">
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAABMLAAATCwAAAAAA
AAAAAAD////c////7f///+3////t////7f///+3////t////7f///+3////t////7f///+3////t
////7f///+3////c////8v/////////////////////////////////////f1s//q5KB/+bh4P//
////////////////////////8v///+3///////////////////////////7///+4p57/yJtw/5ts
Sf/a1tf//////////////////////////+3////t///////////+////3tfU/76to/+ji3z/nXdY
//bMn/+fdFX/hWld/76wrP/29PT////////////////t////7f/////29PT/xLKk/66Qdf+6mHj/
0a6K/+nNqv/83rj/3ruW/6+IZf+CWDn/eVdG/9LJxv//////////7f///+329fT/x7Og/8mtkf/w
1bb//efG/82Xff/MeFD/zYBT/+K0jv/74Lz/6Mil/6yGY/9sRC7/1c7M/////+39/f7t2Mu//9C5
ov/548n//+nN///t0v/eybL/gxgA/55IJ//46Mr//+TE///hwP/017j/qINj/4ZpXP/7+/vt9/Tz
7dDAr//z4c3//+7Y///p0v//79j/5tbB/4cjA/+oWjz///LY///kyf//5Mn//+bJ/+bLr/+KaFT/
7Orq7fX18+3Wyr3//O/e///w3///7dz///fk/+bWyP+IHAD/p1Y4//724P//6tP//+jQ///q0//z
3cT/lHZk/+rn5u339vTt2tHI//v16v//9en///To//r15/+re2n/hi8g/55jU//++Oj//+/d///s
2P//9OL/8d/L/6uThP/19PTt/v387eXg2//v6+f///35///58f/9+PD/6N/Z/+PItf/t3tH///ju
///y5P//9+z///zy/9rItv/Vy8b/////7f///+359/X/5+Pf//Px8P////3//////9PCwP95GAH/
sW1X//7++////vr//vz5/+7k2f/e1c7//P39/////+3////t//////r5+P/t6+n/7+7t//j5+P/v
6+n/qZaV/9DCwP/8+/r/9fPy/+zm4f/v6uf//f7+///////////t////7f///////////v7+//Tz
8v/08vD/9/b2///////9////9fLv//Du7P/5+fn/////////////////////7f////L/////////
//////////////////////////////////////////////////////////////////////L////c
////7f///+3////t////7f///+3////t////7f///+3////t////7f///+3////t////7f///+3/
///c//8AAP8fAAD+HwEA8A8AAOADAADAAQAAgAEAAIAAAACAAAAAgAEAQIABAMDAAwAA4AcBAPAf
AAD//wAA//8AAA==
 </icon>

This next chunk is your 16x16 icon converted into base64 (you can carry out the file encoding at this web site).

    <update>http://www.pcdoctor-guide.com/wordpress/files/pcdoc.xml</update>

The last real line of code gives the location of the XML file on your web server (plan this in advance).

  </button>
</custombuttons>

Finally you close a few elements.

Now all you need to do is save the file, remembering to give it the .XML file extension.  Once you've done this upload it to the server (to the location you specified in the line with the <update> tag.

Finally, you want a way for users to install the custom button.  This is done using a crafted hyperlink that you put into a web page:

http://toolbar.google.com/buttons/add?url=http://www.pcdoctor-guide.com/wordpress/files/pcdoc.xml

That's in!  All that's left for you to do is try it out!  Here's my custom button installed into the Google Toolbar:

Create custom Google buttons 

For more information visit the Google custom button page.

Once you've created a button you can submit it to Google (guidelines here).

This entry was posted on Monday, January 30th, 2006 at 17:55 and is filed under PC Doctor Programming. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Comments are closed.