Building a Live.com Gadget

  • Article

For those of you that missed the announcement (shame on you!), Microsoft announced Windows Live and Office Live back in November of last year:

Designed to deliver rich and seamless experiences to individuals and small businesses, the new offerings combine the power of software plus services and provide compelling enhancements to Microsoft Windows® and Microsoft Office products. In particular, Windows Live helps bring together all the elements of an individual’s digital world while Office Live helps small companies do business online. In the same way that Xbox Live® enhanced the value of Xbox® by marrying the power of the Internet with the richness of software and hardware, these new offerings will deliver similar value to customers.

One aspect of Windows Live that caught my eye was Live.com, the Windows Live home page described as:

...a software-powered service that enables consumers to build a fully personalized home page that automatically delivers the information they want, no matter who published it, so they can stay on top of the news, blogs, RSS feeds and other information they really care about. Live.com will become the place to seamlessly access other Windows Live services and will serve as a great place to experience Windows Live Search. Live.com will deliver a new, innovative, search-driven experience that will make it an effective place to perform Internet searches. It includes features such as searching for RSS feeds (news, for example), and allows a user to easily add these feeds directly to the page as well as saving persistent searches. Live.com will also be a platform for third-party developers to build and deliver customized services, called “gadgets,” to customers.

Sound a little bit like Start.com ? Well spotted! Here's a comparison of my start.com page vs my live.com page.


One place to keep on top of news, blogs and other things I care about. Terrific - and I expect it to get better and better from here. So Live.com is now my IE home page. But the last sentence in the description above is what I really want to talk about here: “Live.com will also be a platform for third-party developers to build and deliver customized services, called “gadgets,” to customers.” That sounds interesting. And investigating further it turns out that these gadgets will also be able to "live" in the Vista sidebar. More and more interesting...

My colleague Mike Taulty and I have been wrestling (that's a polite word for it) with the problem of access to our MSDN Nuggets. The page itself is becoming very unwieldy, there's no search and no good way to filter it. From a customer perspective it's not good enough. The trouble is we don't have direct control over the page so we face the prospect of a long and arduous struggle to get it the way we'd like it or find an alternative solution. As the "alternative solution" involved writing a bit of code and trying out some different technologies, we opted for that route. Mike knocked up (sorry, designed and implemented) a suitable database, web service and RSS feed with the idea being we'd come up with a range of client solutions that could be used to give easy access to the MSDN Nugget videos (either download or stream). Mike suggested (yes, I hold him fully accountable for the hair loss I've suffered) that I create a Live.com gadget. Great idea I thought.... Where do I go to find out how to do that?

Well, the honest answer is that information is somewhat limited at the moment. But here's a reasonable starting point if you want to find out how to build your own gadget.

It you want to build a Live.com gadget, you're going to need to know something about JavaScript, DHTML and CSS. No getting around it, you're going to be writing client script to handle your business logic and create and update your UI with all the fun, joy and heartache that can bring. Don't worry though, my thoughts will be with you 100% of the way... Just don't ask me why something doesn't work; I have enough problems with my own code! Anyway, there are essentially 4 elements to a Live.com gadget:

  1. The Live.com platform that hosts your gadget for you (no need for us to worry about that, some nice people at Microsoft have built it for us)
  2. A manifest file that describes your gadget and its dependencies. A URL pointing to the manifest is what Live.com expects to load your gadget.
  3. A JavaScript file that implements the functionality you want.
  4. A CSS file that allows you to control the styling of your gadget.

Your gadget is hosted in its own IFRAME on Live.com and can be mixed with other Live.com gadgets (both internal and external). Building a simple gadget for Live.com describes all this in much more detail but to give you an idea, a simple manifest is shown below:

<?xml version="1.0" ?><rss version="2.0" xmlns:binding="https://live.com">   <channel>      <title>This is the name of your gadget on Live.com</title>      <description>Description of what the gadget is / does</description>      <language>en-us</language>      <pubDate>Mon, 7 Nov 2005 01:00:00 GMT</pubDate>      <binding:type>Defines the entry point JavaScript class to load</binding:type>      <item>         <link>URL pointing to your JavaScript file</link>      </item>      <item>         <link binding:type="css">URL pointing to your CSS file</link>      </item>   </channel></rss>

You'll notice the manifest file is XML and the schema is RSS. Some things to note. <Title> defines the name your gadget will have in Live.com. <binding:type> points to the class in your JavaScript file that will be loaded to start your gadget. There is then a link to the JavaScript file Live.com should load and a link to the CSS file used to style the gadget. That's your manifest.

Next step is the JavaScript file. I'll cover that in my next post when we build a very, very simple Live.com gadget using the techniques outlined above...