How to make a Google Gadget in 15 minutes or less
Google, Web Development April 25th, 2007 - 59,624 views
A Google Gadget is a small XML file that generates a widget on a Google Personalized Homepage. Google has excellent documentation describing how to make a Gadget, but it’s so verbose that it hides just how simple it is to make your own Gadget, especially if you already have a widget or feed on your website that you’d like to Gadgetize (TM). It’s really, really easy! And it can generate a ton of traffic for your site.
Step 1. Figure out what you want to gadgetize
First things first, you need to figure out what you want to turn into a Gadget. You could use a simple RSS feed, but it’s cooler if you have some sort of visualization using javascript or flash. The best gadgets update frequently so that they stay fresh as users visit their homepage throughout the day.
Creating the gadget HTML/javascript is probably the hardest part and, unfortunately, I can’t be of much assistance since your content will probably differ a great deal from mine. But keep in mind that it’s the same old HTML and javascript you’re used to working with on your website, so you don’t need to learn anything new.
I’ll be using a Wine Review Widget that I created for a project I’ve been working for. It’s visual, well contained (it loads within an iframe) and updates frequently with newly added content.
Step 2. Create the Gadget XML File
A Google Gadget is built from a simple XML descriptor file that looks like this:
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="hello world example" /> <Content type="html"><![CDATA[ Hello, world! ]]></Content> </Module>
All you need to do to make a working gadget is replace “Hello, world!” with the HTML necessary to display your content. Google provides a handy scratchpad that allows you to preview your gadget before publishing it. You can put pretty much any HTML tag inside the XML wrapper, including script tags containing javascript and iframes. Thus, you can do some pretty nifty visual effects.
Google also recommends that you add some descriptive information to your Gadget XML file before submitting it, including a title, description, thumbnail image and author contact information, among other things. This information is provided through attributes on the ModulePrefs tag. The only required attributes are title, description, author, and author_email - which are all pretty self explanatory. Check out this section of the Gadgets documentation for descriptions of all of the suggested attributes.
Step 3. Submit your Gadget
Once you’re satisfied with the functionality of your Gadget you can submit it to Google for inclusion in their Gadget Directory. The submission process is simple - just enter the URL of your Gadget’s XML file in an input box and hit Send (all of the contact and description information is in your Gadget’s XML file).
The moderation process for new gadgets is apparently manual, so it takes Google some time before they approve new submissions. But you don’t have to wait to use your new Gadget. Simply go to the Gadget Directory and click “Add by URL” next to the search button at the top of the page. Enter the URL for your Gadgets XML file, hit submit, and confirm that you want to add the gadget your page.
You can also market your new gadget by sending users to a link in the form of http://www.google.com/ig/add?moduleurl=<your gadget URL>. You can try it out with the Gadget I created.
That’s it! If you make anything cool be sure and leave a comment with a link so I can check it out. I think you’ll find that creating a Google Gadget is an excellent way to market your website for free with very little effort. Keep in mind that there’s a lot more you can do with Google Gadgets than I’ve discussed here. Check out Google’s developers guide to learn more.
April 26th, 2007 at 11:15 pm
Nice explanation..
Submitted in queue @ tweako
( http://www.tweako.com )
April 29th, 2007 at 9:35 am
[...] How to make a Google Gadget in 15 minutes or less (tags: Google_Gadgets) [...]
April 30th, 2007 at 11:44 am
[...] my recent foray into google gadgets I realized that a simple google gadget could solve both problems, so I wrote one. It’s based [...]
May 16th, 2007 at 3:26 am
Or, make a Gadget in like 2 minutes with Dapper! For example, I made this Corkd search gadget:
http://fusion.google.com/ig/add?synd=open&source=ggyp&moduleurl=http://www.dapper.net/transform.php%3FdappName%3DCorkdDemo%26transformer%3DGoogleGadget%26extraArg_gadgetName%3DCorkd%2520Wine%2520Search%26extraArg_gadgetDesc%3DThis%2520gadget%2520searches%2520wine%2520reviews%2520on%2520Corkd.com%26extraArg_fields%5B%5D%3DFrom%26extraArg_fields%5B%5D%3Drating%26extraArg_fields%5B%5D%3DWine_Name%26extraArg_showInputForm%3D1%26variableArg_0%3D
It was done by simply going to Dapper.net, specifying pages from Corkd that resemble search results, and telling Dapper I want a Gadget. Really easy, free, etc. check it out!
May 16th, 2007 at 8:31 am
Nice page you detail the gadget process better than Google does.
Carmelo Lisciotto
May 17th, 2007 at 7:53 am
Good Explanation.
Good site to share with others.
May 22nd, 2007 at 6:26 am
I have a hosting site for gadgets if you want.
June 10th, 2007 at 4:19 am
[...] noção de programação, basta criar um e disponibilizar no iGoogle. Tem dicas (em inglês) nesse site. Ou, caso você não saque de códigos, faça um [...]
June 28th, 2007 at 1:05 pm
So how could I make a gadget that would take WordPress feed and display items? any help would be greatly appreciated
June 30th, 2007 at 2:37 pm
@Paul
Check out my new post on how to turn a feed into a Google Gadget
June 30th, 2007 at 2:38 pm
[...] explaining this process several times, and looking over the search terms that have led people to my article on making Google Gadgets, I’ve decided to answer this question once and for all. Turning a supported feed (Atom 0.3 or [...]
June 30th, 2007 at 3:54 pm
tks Mike.. I really had in mind how to create a gadget (Google Gadget API) that can be distributed and added to content directory. Your suggestion will add a feed to your iGoogle page (In a form of a gadget) still great that you took time and explained this in details.. good job!
June 30th, 2007 at 4:02 pm
No problem. I believe that if enough people add your feed to their iGoogle/Personalized Homepage it will show up as a Gadget in the content directory. Even a “genuine” gadget, as described in this post, will not immediately show up in the content directory. Google won’t add a Gadget to the directory until it’s already in use by a number of people. In other words, you have to do some marketing yourself before Google will do it for you :).
July 6th, 2007 at 8:05 am
[...] Come creare un Google Gadget in meno di 15 minuti [...]
July 14th, 2007 at 8:34 am
hey mike, let me know what you think, any comments?
July 14th, 2007 at 8:35 am
http://fusion.google.com/add?moduleurl=http%3A//www.matchmypet.com/Integrations/Google/GoogleWidget.xml
July 14th, 2007 at 8:36 am
hey mike, its impossible to add a link here, so here is the link to our new widget. we are looking to get some reviews.
http://www.matchmypet.com/Integrations/Google/GoogleWidget.xml
August 30th, 2007 at 9:37 am
Does anyone out there have a gadget for YetiSports 5 (golf)?? Now that would be cool to have.
September 29th, 2007 at 11:29 pm
i still dont get how to make a gadget
November 1st, 2007 at 10:03 pm
[...] going to sit down this weekend and review what Mike has to say about creating a Gadget, here is a Link to How to make a Google Gadget in 15 minutes or less - I’m Mike. Once I get it figured out I will post an update here for all of you Wordpress Users [...]
December 3rd, 2007 at 9:24 pm
thank u for the advice
January 5th, 2008 at 5:01 pm
This is pretty cool! From you and other links I managed to put something simple together, but it seems to do the trick:
http://www.google.com/ig/adde?source=ignsrc1&moduleurl=http%3A//hosting.gmodules.com/ig/gadgets/file/102468289763290298613/mottos.xml
January 12th, 2008 at 2:55 pm
that’s a great article. i am thinking of creating a gadget myself. will surely use your tips and am sure i will come out creating something good. thanks a lot for sharing this important bit of information
January 30th, 2008 at 3:18 pm
Hello,
Can anyone here build me a nice Google Gadgets for our HighEndJobs.com. Need the gadgets to show new jobs while is being posted and need gadgets user to have option to see from setting like; Country, State, City and then types of jobs they are looking for…
Thank you,
HighEndJobs.com
March 22nd, 2008 at 1:13 am
Please any one let me know how to create gadget.xml
April 14th, 2008 at 12:22 pm
Google won’t add a Gadget to the directory until it’s already in use by a number of people.
September 6th, 2008 at 10:06 pm
Great tutorial!! I am using this to create a gadget for my review website http://www.ReviewPage.com. Keep up the great work and thanks for the help!