Project: How to make a Google Gadget

In my spare time I have been researching what all would be involved to create a Google Gadget.  I have posted my intentions in earlier blog entries but haven’t really had a lot of time to look at doing this.  What is a Google Gadget?  A Google Gadget allows you to place your “feed” onto the iGoogle page of people interested in your content.  The iGoogle page, or customized desktop is really taking on some momentum these days, I see a lot of my friends with customized desktops, no two are alike, that’s what is really cool about iGoogle.

I have found quite a few resources online, including the Google Gadget API.  There are even several example Gadget’s out there for developers to dissect, most I think are pretty cut and dry, but what I am wanting to do is to take my RSS feed from this Blog and create a running Gadget from that. 

The first place I have started looking is at the basic code for doing a “hello world” ap.  It looks something like this:

<?xml version=”1.0″ encoding=”UTF-8″?>
<Module>
<ModulePrefs title=”hello world example” />
<Content type=”html”><![CDATA[
Hello, world!
]]></Content>
</Module>

The idea behind this one is that you just take the Hello World out and enter in whatever HTML you need to put your Gadget together.  Google also provides you with a pretty cool online development environment for doing this all in: http://www.google.com/apis/gadgets/gs.html#Scratchpad.  There are some other examples on this page as well like Dynamic Tabs, Drag and Drop, etc.  All pretty cool examples, but still not anything close to what I am wanting to put together really.

I ran across another website that looks pretty informative, I am probably 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 interested in creating your own Gadget.  I figure this will be a popular topic since I don’t see anywhere where it’s been done before, or at least shared with the rest of the world.  If I am missing something and someone has actually done this before please let me know.

Oh, I did find where Google had posted an example Gadget that was constructed from an Atom Feed of the Google Blog, here is their source code for that:

<?xml version=“1.0” encoding=“UTF-8”?>

<Module>

<ModulePrefs title=“Google Blog” render_inline=“optional”

category=“news” category2=“technology”

author=“Jesse Shieh”

author_email=“[email protected]”/>

<UserPref name=“post” datatype=“enum” display_name=“Post Number” default_value=“1”>

<EnumValue value=“1”/>

<EnumValue value=“2”/>

<EnumValue value=“3”/>

<EnumValue value=“4”/>

<EnumValue value=“5”/>

<EnumValue value=“6”/>

<EnumValue value=“7”/>

<EnumValue value=“8”/>

<EnumValue value=“9”/>

</UserPref>

<Content type=“html”>

<![CDATA[

<!– load the NXSL library –>

<script src=“http://www.google.com/js/nxsl.1.js” type=“text/javascript”></script>

<div id=“content___MODULE_ID__”></div>

<script> _IG_RegisterOnloadHandler(function () {

var url = 'http://googleblog.blogspot.com/atom.xml';

_IG_FetchContent(url, function (response) {

var prefs = new _IG_Prefs(__MODULE_ID__);

var nxsl = xmlParse(''

+ '<div select="/feed/entry[' + prefs.getInt('post') + ']">'

+ ' <h3 select="title" content="."></h3>'

+ ' <div select="content" content="."></div>'

+ '</div>');

nxslProcess(xmlParse(response), nxsl);

var content = xmlText(nxsl);

content = content.replace(/</g, '<') .replace(/>/g, '>')

.replace(/&/g, '&')

.replace(/["]byline-author["]/g,

'"byline-author" style="font-size:84%;color:#666666;"');

_gel('content___MODULE_ID__').innerHTML = content;

});

});

</script>

]]>

</Content>

</Module>

Still not exactly what I am looking for, but I think that we are getting closer…