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:

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

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 XHTML 2 vs. HTML 5
o Why is VoIP cheaper than a standard telephone line?
o 5 tools every PHP programmer should know about
o Database Design: Choosing a Primary Key
• Popular This Month
• Frequent Commenters
• Categories
o Blogging (11)
o Database (3)
o Design Patterns (1)
o Google (9)
o Hacks (2)
o Interviews (1)
o Linux (10)
o Lists (4)
o MySQL (2)
o Networking (2)
o Programming (23)
o Random (5)
o Security (4)
o Software (7)
o Software Patterns (3)
o SQL (1)
o Tutorials (9)
o Uncategorized (4)
o Web Development (21)
• Archives
o September 2008
o February 2008
o August 2007
o July 2007
o June 2007
o May 2007
o April 2007
• Links
o Ted’s Musings
o Vino2Vino.com
o 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 browser-
b...
• 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