Google Gadget Update

I posted an entry a while back where I was looking into creating a Google Gadget for my blog’s RSS feed, here’s that post: http://www.cottonrohrscheib.com/blog/2007/10/30/project-how-to-make-a-google-gadget/.  I spent a little bit of time looking into this this morning and finally have something that will work using my Feedburner Feed, it looks like this…

Here’s the code for the gadget.  This will allow my RSS feeds to show up on any iGoogle Desktop or Google Reader that subscribes to them.  I have my iGoogle Desktop totally configured now w/ all of my favorite news sources and RSS Feeds and can’t remember what it was like before I started using it…. 

   1: <p><a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/cottonrohrscheib/pjCa"><img src="http://buttons.googlesyndication.com/fusion/add.gif" width="104" height="17" style="border:0" alt="Add to Google Reader or Homepage"/></a></p>

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=“jesse.feedback+googleblog@gmail.com”/>

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

Project: Google Gadgets API

I know that sooner or later we are going to have a client request that we develop a Google Gadget for them so I am probably fixing to dive into this and see what it’s all about.  What is a Google Gadget?  A Google Gadget is basically a feed that fits into a framework of sorts (Gadget API) that can be displayed on peoples iGoogle customized Desktop.  I had so many gadgets on my iGoogle screen that I had to open up a new tab the other day, it’s very useful if you have a few blogs or websites that you follow closely.  I will likely post back once I get this thing created with a link to my creation.  If you are interested in creating your own Gadget, here is a Link to Google Gadgets API – Overview