Google Gadget

I’m Mike What else do you need to know? • • •

Home About Contact

•

Twitter: @eston I've been better...

How to make a Google Gadget in 15 minutes or less Google, Web Development April 25th, 2007 - 42,730 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: <Module> <ModulePrefs title="hello world example" />

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=. 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.

Related Posts • • •

How to turn your feed into a Google Gadget Monitor stories from your website appearing on digg.com Hacking Google Spell Checker for Fun and Profit

27 Responses to “How to make a Google Gadget in 15 minutes or less” 1. Mike Says: April 26th, 2007 at 11:15 pm

Nice explanation.. Submitted in queue @ tweako ( http://www.tweako.com ) 2. All in a days work… Says: April 29th, 2007 at 9:35 am

[...] How to make a Google Gadget in 15 minutes or less (tags: Google_Gadgets) [...] 3. I’m Mike » Blog Archive » Monitor stories from your website appearing on digg.com Says: 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 [...] 4. Paul Knegten Says: 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://ww w.dapper.net/transform.php%3FdappName%3DCorkdDemo%26transformer%3D GoogleGadget%26extraArg_gadgetName%3DCorkd%2520Wine%2520Search% 26extraArg_gadgetDesc%3DThis%2520gadget%2520searches%2520wine%2520 reviews%2520on%2520Corkd.com%26extraArg_fields%5B%5D%3DFrom%26e xtraArg_fields%5B%5D%3Drating%26extraArg_fields%5B%5D%3DWine_Na me%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! 5. Carmelo Lisciotto Says: May 16th, 2007 at 8:31 am

Nice page you detail the gadget process better than Google does. Carmelo Lisciotto 6. vamshik Says: May 17th, 2007 at 7:53 am

Good Explanation. Good site to share with others. 7. Jeremy Says: May 22nd, 2007 at 6:26 am

I have a hosting site for gadgets if you want. 8. I Google, e você? « talqualmente Says: 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 [...] 9. Paul Says: 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 10. mike Says: June 30th, 2007 at 2:37 pm

@Paul Check out my new post on how to turn a feed into a Google Gadget 11. How to turn your feed into a Google Gadget - I’m Mike Says: 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 [...]

12. Paul Says: 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! 13. mike Says: 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 :). 14. Fast Links Collection - Num 54 | MondoBlog Says: July 6th, 2007 at 8:05 am

[...] Come creare un Google Gadget in meno di 15 minuti [...] 15. Ori Anavim Says: July 14th, 2007 at 8:34 am

hey mike, let me know what you think, any comments?

16. Ori Anavim Says: July 14th, 2007 at 8:35 am

http://fusion.google.com/add?moduleurl=http%3A//www.matchmypet.com/Integr ations/Google/GoogleWidget.xml 17. Ori Anavim Says: 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 18. Chris Says: 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. 19. jigiba Says: September 29th, 2007 at 11:29 pm

i still dont get how to make a gadget 20. The Cotton Club » Blog Archive » Project: How to make a Google Gadget Says: 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 [...] 21. Foto Says: December 3rd, 2007 at 9:24 pm

thank u for the advice 22. Xanthous Says: 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.g modules.com/ig/gadgets/file/102468289763290298613/mottos.xml 23. Darshan Chande Says: 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 24. John Says: 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 25. M.R.Mohan Kumar Says: March 22nd, 2008 at 1:13 am

Please any one let me know how to create gadget.xml 26. Vacanze Says: 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. 27. John Says: 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!

Leave a Reply Name (required) Mail (will not be published) (required) Website

Notify me of followup comments via email

•

•

Entries RSS •

Recent Posts o

OAuth on the iPhone

o o o o • • •

Popular This Month Frequent Commenters Categories o o o o o o o o o o o o o o o o o o o

•

Blogging (11) Database (3) Design Patterns (1) Google (9) Hacks (2) Interviews (1) Linux (10) Lists (4) MySQL (2) Networking (2) Programming (23) Random (5) Security (4) Software (7) Software Patterns (3) SQL (1) Tutorials (9) Uncategorized (4) Web Development (21)

Archives o o o o o o o

•

XHTML 2 vs. HTML 5 Why is VoIP cheaper than a standard telephone line? 5 tools every PHP programmer should know about Database Design: Choosing a Primary Key

September 2008 February 2008 August 2007 July 2007 June 2007 May 2007 April 2007

Links o o o

Ted’s Musings Vino2Vino.com Ryan Powell

Most Popular Posts •

5 Regular Expressions Every Web Programmer Should Know 04-06-2007

•

Single line of HTML crashes IE 6 08-06-2007

•

5 tools every PHP programmer should know about 08-15-2007

•

The absolute bare minimum every programmer should know about regular expressions 04-06-2007

•

Flash Sucks 07-31-2007

Recent Comments • • • • •

Richard Crowley: On the desktop Flickr Uploadr we stuck hard to the browserb... mike: Ben, I thought the auth flow worked really well too. I think... David Ulevitch: I installed the pownce application yesterday and I thought t... Ben Ward: And the important paragraph I left out there, was to say tha... Ben Ward: So, my base viewpoints are that : 1. Performing the auth ...

About This site is supposedly standards compliant... you know - XML, CSS, and all that crunchy goodness. YMMV. Read more on my about page. Stats So far I've written 40,522 words in 60 posts. 1,517 comments have been posted, with a total of 86,746 words. Copyright © 2007 - Mike Malone / Icons by N.Design Studio Entries RSS Comments RSS Log in