Creating A Custom ButtonCreating A Custom Button

This article is a simple step-by-step guide for webmasters who want to create a Google toolbar "push button" with an icon that navigates to a site, displays an RSS feeds of that site in a drop down menu; host the button and make it available on their website. This type of button is a great way to gather all the sites of interest to you in one place in an attractive way.

A custom button is an .XML file (like feeds) and its properties and behavior are defined with a <*custombuttons> element.

The XML file elements we are going to use are following:
title- is the name of the button;
description- acts as a tooltip;
site- defines a link to a website;
icon- 16x16 .ico file which many sites use as their favicon.ico file and it has to be base64 encoded;
feed- adds the ability to open a dropdown menu with RSS feed titles and links.

As an illustrative example, we are going to use www.mygiftgadgets.com website, because this site has feeds and an icon.

The following basic XML produces a button that, when clicked, opens www.mygiftgadgets.com in the current browser window, has a title and displays a tooltip:

<*?xml version="1.0" encoding="utf-8"?>
<*custombuttons xmlns="http://toolbar.google.com/custombuttons/*">
<*button>
<*site>http://www.mygiftgadgets.com<*/site>
<*title>MyGiftGadgets.com<*/title>
<*description>Shopping for Gifts and Gadgets<*/description>
<*/button>
<*/custombuttons>

Now that we have the main button elements in place we need an icon. You can draw a small picture using any picture editing program you may have and save the picture file to your desktop, so that you would find it easily. As mentioned before the size of the icon needs to be 16x16 pixels. The easiest way to accomplish this would be by first, generating a favicon.ico from the picture (which you can do here: www.chami.com/html-kit/services/favicon) and saving the file to your desktop. Second, encode the favicon.ico file into ASCII text using base64 encoding (www.motobit.com/util/base64-decoder-encoder.asp), which in the end produces a base64 string - a long line of letters and numbers. As you can see creating an icon doesn't require any program installations to your computer!

The base64 string (your icon) has to be placed between the <*icon> and <*/icon> elements as shown in the final XML file example.

MyGiftGadgets.com site also has feeds that can be shown in the dropdown menu of the custom button. In the XML file the feeds URL will be displayed between the <*feed> and <*/feed> elements like this:

<*feed refresh-interval="3600" refresh-menuitem="false">

http://www.mygiftgadgets.com/wordpress/wp-rss.php<*/feed>

where the feed elements are:

refresh-interval - number of seconds to wait before reloading the feed, the default is 3600 (1 hour);
refresh-menuitem="false" - hides the refresh menu item any time a successful connection is made to the server.

Adding the icon and feed elements to our basic XML structure will complete the button file and the final XML file of MyGiftGadgets.com custom can be seen here: www.mygiftgadgets.com/mggbutton.xml

Now we are going to save the text file as mggbutton.txt and upload it to our website hosting root directory, then change the file name into mggbutton.XML and we're done with the file!

The next step is to link to the button from our site. To do that we have to create an installation link by using the following URL syntax for our mggbutton.XML file:

http://toolbar.google.com/buttons/add?url=http://www.mygiftgadgets.com/mggbutton.xml

When a user clicks on this link, the MyGiftGadgets.com button is installed in their Google toolbar. If the user doesn't have a compatible version of the toolbar, they'll be prompted to install it and the custom button will automatically be added.

After we've made sure that the custom button that we've created works (to make sure try adding it to your toolbar!) it is time to add the button to the Button Gallery by filling out the button gallery submission form (www.google.com/support/toolbar/bin/request.py?contact_type=button).

Note: "*" element is not part of the encoding and needs to be removed when using in a .xml file. It's here so that the article can be displayed properly.

by Katrin Konno
References and Bibliography

MyGiftGadgets.com online shopping site for gifts, gift ideas and gift gadgets. URL: http://www.mygiftgadgets.com

Rated:NR/0 Votes
3 Views
Add To My Article Reading List
Add To My Article Reading List
Print Article
Print
More Article By Katrin Konno
More Article by Katrin Konno
Share
More Articles From Web Development
More Articles From Web Development
Related Articles and Readings
Killer Proofreading Skills Put that Final Draft to Bed By: Dina Giolitto
It's FINALLY here... your final, final draft of that project you've been slaving over for months. Just a quick proof is all it takes. You breeze through, make a few corrections, and pass it off to your trusty assistant for the quadruple-check final once-over. But horror of horrors, when she ...
History of Final Fantasy XI By: Hunter Crowell
The Final Fantasy series is a superb set of games that have become an important part of video game history. Final Fantasy XI is an especially strong title. It is a terrific modern update on the series, advancing it and taking it into exciting new territory.Final Fantasy XI is an ...
Understanding Image Resolution By: TJ Tierney
Resolution is a term used a lot in photography these days - regardless which type of photography you do, or which type of camera you use, understanding image resolution, pixels and the different properties attributed to them is so important.Whether you are printing, scanning or sending an image by e-mail, ...
Beginners Guide to Music File Formats By: Gary Hendricks
Are you confused by the various types of music file formats out there? Most of you would have heard of the popular MP3 format, but are you aware there are other alternative digital music formats like WAV, WMA, RA and MIDI? Some of these give better sound quality than MP3 ...
Final Expense Insurance Leads - Unveil the Hidden Profits Novice Insurance Agents Tend to Overlook By: Todd Erwin
When you're an insurance agent, you have all kinds of options to sell; each kind of policy has its positives and its negatives Some policies will be easy to sell; some will provide you with high monetary ...
The information provided in this article and/or the comments is the sole responsibility of their respective authors and does not necessarily reflect the opinion of ezinepost.com. ezinepost.com  does not endorse any article and/or comments published by our web users unless otherwise noted. 

Member Panel

login to submit articles and more

StatisticsEZINEPOST.COM

  • » Active Categories: 419
  • » Active Articles:252603
  • » Active Authors:31917
  • » Active Members: 38237
  • » Statistics Updated:
    - Tue Sep 1st, 2020 09:28AM EST