Creating a custom button for your blog to be used on the Google Toolbar is a great way to promote your blog. Once installed, the button can act as a graphical bookmark to your site. You and your readers can search your site using the search bar in the Google toolbar, without having to be on your site. In fact, you can highlight any text on any web page, click on your custom icon in the browser, and you will perform a search the text you just highlighted on your blog. The custom button can even list your last several entries, with data pulled from your feed.
I recently updated my Google toolbar for Simply Recipes and created a new one for a new site, Food Blog Search. (If you want to see the Google Toolbar in action, follow the instructions to add a button on the Food Blog Search site.) Google's instructions for making a custom button can be convoluted and overwhelming. It took me several hours over several days to work out the correct code for the toolbars. So to save any of you similar pain, I'm presenting the steps here.
Step 1: Install Google Toolbar
The Google Toolbar requires using either IE or Firefox for your browser. Go to this page at Google to install it.
]]>
Step 2: Create an Icon for Your Toolbar Button
Your Toolbar button is a graphical icon, 16x16 pixels in size. A favicon works well for this use; if you use a gif file, you can make the background transparent. (See more tips in Google's How to make good looking icons.) You will need to display this graphic as code in the next step. To do that, go to this site. Use the "Browse..." button to select the file you want to encode, then click the "Convert the source data" button to start the encoding. Copy and paste the resulting code someplace where you can get to it for the next step.
Here is the encoded output for this icon example 
:
R0lGODlhEAAQAOYAAAAAAP///4AZG3sYGYkcHZUfIaEiJJwhIrcoKaYkJsYsLcYsLsMrLcIrLMIr
LbspLLYoKtEvMMwuL8wuMMotL8ktLsktL8gtLsctL8UsLcQsLcQsLsMsLcErLMArLM8vMMsuL8Yt
LsIsLVEMD1MOEWsUF3oYG3AWGo8dIIwdIqEiJSsEBhMCA1gOEoMbIHkZHjAGCQgBAoJ0d19WWAMA
AQ4KDFRSVD48P6OjpBgeIIiOjmZoaJiamqSlpYCBgVVcWyQmJSQ0KTE4MyAxJBk9IVRZVSBFJTRs
PCxXMihTLUB7RxIvFBo9HQcaCCFKIgACAAABAAIIAgcaBwEDARoeGkdJR3t8e7Cxq1VVRmFfT7e2
r6OinHp0VqWgjg0LBVlSP3x2aW1rZ1VCN5aNiQkEA0AHA1E+PRsBAC8FA60lILUnIxwBASkEBEII
B6klJcwuLpiXl7u7u6KiomZmZmVlZV5eXlpaWlBQUDU1NS4uLv///wAAAAAAAAAAAAAAAAAAACH5
BAEAAHoALAAAAAAQABAAAAe5gHqCgnF2g4eIVgBSU3KIj1RGSE88gj5Aj3o2TkpNOHpBS3iZekNH
STdCTEWkejleRFFQVZk6NWgEEAIrAD90eXc9gnBlbiEgCiAeKS8nLiQ0O3ozaiAcDSINGhQgIBIS
CWd1MmkLHCIODg3q6g0RJnNjBRbt6dftEyNbWi0f9ugc2FUwQEYQCxVvGLRrcA7DhjVdBsVAwWDC
hQwaLkjo0AYLIjAwSqh4gODAADZZSF0JY0bMFy6IAgEAOw==
Create a ToolBar XML file
You will be creating an XML file that Google will access when a reader requests to add your toolbar button. If you are using Movable Type, you may as well create an index template in MT for this task. It's not necessary, but it will make it easier to troubleshoot and edit.
The basic XML template is structured like this:
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Blog Title</title>
<description>Blog Description</description>
<site>URL</site>
<search>Search results page and search query</search>
<send>Search results page and text selection query</send>
<feed refresh-onclick="true">Feed URL</feed>
<icon mode="base64" type="image/x-icon">Base64 encoded graphic icon</icon>
</button>
</custombuttons>
Copy and paste the above code into your new index template.
The following is an (untested) example of template that uses MT tags.
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title><$MTBlogName$></title>
<description><$MTBlogDescription$></description>
<site><$MTBlogURL$></site>
<search>SearchURL?q={query}</search>
<send>SearchURL?q={selection}</send>
<feed refresh-onclick="true">Feed URL</feed>
<icon mode="base64" type="image/x-icon">Base64 encoded graphic icon</icon>
</button>
</custombuttons>
Whether you use MT tags or whether you just write in the information, the first part of the template is pretty straight forward. Write out the blog title, the blog description, and the URL where your blog is located. The feed URL is pretty straightforward too.
The tricky part is what comes between the <search></search> and <send></send> tags.
To best figure out the correct code to put between those tags, do the following.
If you are using Google Search on your site (as many of us do), make sure you are using either IE or Firefox, right-click in the search field bar of your search bar, and scroll down to where it says "Generate Custom Search"
Click on that. Select "Add" when prompted to add this Custom Button to your Google Toolbar. You will remove this button later. This is only to test what search string gets generated when you use the Google Toolbar to do a search with the button. Type something into the Google search field in the Toolbar and click on your new site toolbar button (the one that just got added). This should launch a search.
Copy and paste the URL that appears for your search in a safe place. In the case of my example, the URL that I get when I do a search for apple pie is the following:
http://foodblogsearch.com/food-blog-search-results.php?cx=003084314295129404805%3A72ozi9a0fjk&q=apple+pie&cof=FORID%3A11#1287
Note the query "q=apple+pie" in my example. You will do something with that shortly.
To use this string in your XML file, you need to encode everything that comes after the question mark. The encoder I use the most can be found here.
Doing that, my string now looks like this:
http://foodblogsearch.com/food-blog-search-results.php?cx=003084314295129404805%3A72ozi9a0fjk&q=apple+pie&cof=FORID%3A11#1287
The next step is to swap out "q=apple+pie" for "q={query]" so that my final string looks like this:
http://foodblogsearch.com/food-blog-search-results.php?cx=003084314295129404805%3A72ozi9a0fjk&q={query]&cof=FORID%3A11#1287
Place this line of code between the search tags in your XML template.
Next copy the same line of code and place it between the send tags in the XML template, but replace the word "query" with "selection".
Here is my Food Blog Google Toolbar XML template, ready to go:
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Food Blog Search</title>
<description>Search over a thousand fabulous food blogs</description>
<site>http://foodblogsearch.com/</site>
<search>http://foodblogsearch.com/food-blog-search-results.php?cx=003084314295129404805%3A72ozi9a0fjk&q={query}&cof=FORID%3A11#1320</search>
<send>http://foodblogsearch.com/food-blog-search-results.php?cx=003084314295129404805%3A72ozi9a0fjk&q={selection}&cof=FORID%3A11#1320</send>
<icon mode="base64" type="image/x-icon">R0lGODlhEAAQAOYAAAAAAP///4AZG3sYGYkcHZUfIaEiJJwhIrcoKaYkJsYsLcYsLsMrLcIrLMIr
LbspLLYoKtEvMMwuL8wuMMotL8ktLsktL8gtLsctL8UsLcQsLcQsLsMsLcErLMArLM8vMMsuL8Yt
LsIsLVEMD1MOEWsUF3oYG3AWGo8dIIwdIqEiJSsEBhMCA1gOEoMbIHkZHjAGCQgBAoJ0d19WWAMA
AQ4KDFRSVD48P6OjpBgeIIiOjmZoaJiamqSlpYCBgVVcWyQmJSQ0KTE4MyAxJBk9IVRZVSBFJTRs
PCxXMihTLUB7RxIvFBo9HQcaCCFKIgACAAABAAIIAgcaBwEDARoeGkdJR3t8e7Cxq1VVRmFfT7e2
r6OinHp0VqWgjg0LBVlSP3x2aW1rZ1VCN5aNiQkEA0AHA1E+PRsBAC8FA60lILUnIxwBASkEBEII
B6klJcwuLpiXl7u7u6KiomZmZmVlZV5eXlpaWlBQUDU1NS4uLv///wAAAAAAAAAAAAAAAAAAACH5
BAEAAHoALAAAAAAQABAAAAe5gHqCgnF2g4eIVgBSU3KIj1RGSE88gj5Aj3o2TkpNOHpBS3iZekNH
STdCTEWkejleRFFQVZk6NWgEEAIrAD90eXc9gnBlbiEgCiAeKS8nLiQ0O3ozaiAcDSINGhQgIBIS
CWd1MmkLHCIODg3q6g0RJnNjBRbt6dftEyNbWi0f9ugc2FUwQEYQCxVvGLRrcA7DhjVdBsVAwWDC
hQwaLkjo0AYLIjAwSqh4gODAADZZSF0JY0bMFy6IAgEAOw==</icon>
</button>
</custombuttons>
Once you have built your XML template, save and publish it. Pick an output file name like toolbar_button.xml.
For more customizations and information about what kinds of toolbar buttons you can create, see Google's Guide to Making Custom Buttons.
Test Your Toolbar Button
Publish a link promoting your toolbar on your site. Use the following structure for the link:
<a href="http://toolbar.google.com/buttons/add?url=<$MTBlogURL$>toolbar_button.xml">add this blog's button to your Google toolbar</a>
Then try out the link to see if it works. If you get an error message, then something isn't working right in your XML code. All the fields listed do need to be filled in. For example, make sure you have a description between the description tags. You might have to troubleshoot the code between the search and send tag sets.
Promote Your Toolbar Button
Google maintains a gallery of toolbar buttons which is a great place to promote your button. Use Google's submission form to submit your button to the gallery.
Links:
Guide to making custom buttons for Google Toolbar 5
]]>
