Millions and millions of people have (and use) the Google Toolbar. You probably even have one on your own browser, just like the one above. But did you know you could use this to communicate with your customers? Yes really!And now, below we will show you step by step how… First off, let us tell you about our awesome custom toolbar button for Mark8t which you can download right here. Not only will you be able to stay up-to-date on the newest articles, should you wish to explore an idea or item further, all you need to do is click the “8″ button after highlighting some text on any web page you visit to begin a search at Google.

Okay so on with the fun. Let’s say you want your customers to be able to search your site straight from their Google toolbar, but you also want to keep them up-to-date on the latest products you have this is something simple that can be done quickly just by modifying my code below. When finished, it will be on your toolbar, just like so (notice the Freescale logo):

This first part, is just the standard stuff, you can modify the title and the description to your liking:

<custombuttons xmlns=”http://toolbar.google.com/custombuttons/”>
<button>
<title>Freescale</title>
<description>Freescale Custom Google Toolbar Button by Mark8t.com</description>

Then comes the search part

<search charset=”UTF-8″ method=”post”>http://www.freescale.com/webapp/search/Serp.jsp?&QueryText={query}&</search>

This allows you customer to custom search you website. You need to place {query} where the word in your search would normally appear in the address bar. For example let’s say when they go your site, and you search “FPGA”. If the resulting the address would be www.yourco.com/search?=FPGA, you would replace “FPGA” to whatever term your customer would search such as www.yourco.com/search?={query}. If you site uses any ampersands (the symbol “&”) in the address, you need to fix this to be “&”, or it will not work. To be used, all the customer needs to do is select to search you site with whatever term they wish. Such as below:

The next bit to handle the site that someone will go to on clicking the button and the icon displayed on the Google Toolbar:

<site>http://www.freescale.com</site>
<icon>
AAABAAEAEB…..
</icon>

To create the icon, use an image file which is 16 x 16. Most image types works including BMP, ICO, GIF, and JPEG images. You just need to encode them into ASCII text using base64 encoding. There are several sites on the Internet that will do the encoding for you — for instance, this one. On that 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. Just cut and paste the result in between the ICON tags.

Next you want to add the feed which will have product info, news alerts or more. Your feed needs to be a standard xml or rss feed. We will cove info about RSS feeds later, but for now, what you need to know is a feed, is a list written in XML, with a title, a descption, and a link to an article. A sample of correct RSS syntax is below:

<?xml version=”1.0″ encoding=”ISO-8859-1″ ?>
<rss version=”2.0″>
<channel>
<title>Your News Item</title>
<link>http://www.linktostory.com</link>
<description>What it is about</description>
<item>
<title>Your Second News Item</title>
<link>http://www.anotherlink.com</link>
<description>More details</description>
</item>
<item>
Each item you want in between the “item” tag….
</item>
</channel>
</rss>

So in Freescales case, they have a feed, which we will now call and add some functunality to:

<feed menu=”true” refresh-interval=”3600″ refresh-menuitem=”true”>

http://feeds.freescale.com/FSL_RECENTDEV?format=xml</feed>

The first portion of the “feed” tag allows, for a feed menu, so poeple can select stories, or see them. Not having this option set to “true” would make this a simple button. Next is the refresh interval, which allows you to set how often the toolbar should check for updates, that number is in seconds. The next item, allows the customer o refresh more often if the wish. To turn it off, you can delete it, or make set it to “false”. Next come the feed to check, and it is closed with the “feed” tag.

Next comes the most important item in the code. The update tag.

<update>http://www.mark8t.com/tools/sample/freescale-toolbar-sample.xml</update>

This is where the file is hosted, and where, if need be updates can be made. When the user wants to check for new version, they can request an update. Otherwise the file is hosted locally in their browser. That being said, make sure to test it extensively before offering it for download.

The last step is then to close the file:

</button>
</custombuttons>

And now you’re done. To see it in action, you can download an example of our Freescale bar from here.

When you finish your own toolbar button you should create the link to work from http://toolbar.google.com/buttons/add?url=http://www.yourwebsite.com/toolbar.xml and offer a link to it on your site

Should you have questions or want to explore more ways to add functionality to your button, you can read all about how to configure your Custom Google Toolbar Button here.

Good luck!