| Blog | Status Updates | About | Contact | Advertise

August 20, 2007 / Filed under: Mac OS X, Web Development, Tutorials

Mac OS X Dashboard widgets are extremely useful for checking information "at a glance." And what better utility to check at a glance than an RSS feed?

Using Apple's SampleRSS widget, you can modify the existing code to have the widget pull any RSS feed.

This tutorial is for beginner widget developers, who don't want to go as far as setting up a full-scale development environment with XCode tools, but would like the ability to quickly create Dashboard widgets from any RSS feed.

The widget example here is very basic, and only demonstrates how easy it is to modify an existing widget. If you'd like to learn how to create new Dashboard widgets, Apple's tutorial on developing Dashboard widgets is a good start.

Download, unpack, and install

First, download the SampleRSS widget, unpack it, and install the widget to your Dashboard.

By default, the widget will appear with a sample design and headline:

We're going to modify this so it pulls our preferred RSS feed, and we'll be able to adjust the colors and design as well.

View the widget files

Once the widget is installed, go into the Widgets folder in the Finder, which is located at: \Users\[username]\Library\Widgets. Once there, Control-click on the Sample RSS.wdgt file, and choose Show Package Contents:

Each widget is really just a bundle of files, merged into one. You'll notice an HTML file, CSS, JavaScript, and a few more. We can edit any of these files, to customize the sample widget.

Open the widget in Safari

To view changes that we make to the widget, it's best to view the widget in Safari. Open the SampleRSS.html file in Safari. After we make changes, we can simply refresh the page to view our progress.

Change the RSS feed source

To change the RSS feed source, open the SampleRSS.js file in a text editor.

Scroll down to line 70, which starts with: var feed = {.

Change the part that says url:"http://rss.mac.com/imasample/iWeb/Site/Blog/rss.xml" to reflect your preferred RSS feed. For this example, we'll use an RSS feed for this site: http://www.matthom.com/feed/matthom.xml.

Save the file and close it.

Refresh your Safari page, and you should immediately see the latest posts from the RSS feed:

Change the title

To change the displayed title of the widget from "The .Mac Example Blog,": open the SampleRSS.html file in a text editor.

On line 84, you'll see this:

<div id="feed" onclick="clickOnFeedTitle(event);">The .Mac Example Blog</div>

Change the text to whatever you'd like:

<div id="feed" onclick="clickOnFeedTitle(event);">matthom Latest Posts</div>

Save the file and close it. Refresh the widget page in Safari.

Other modifications

At this point, you can get as creative as you'd like. Depending on your knowledge of editing HTML, CSS, and JavaScript files, the sky is the limit.

You can also edit the individual PNG files, in order to alter colors, shading, etc. Perhaps put in a logo for your company, make the widget smaller or larger, etc.

Here's an example widget I created for Pain in the Tech:

Please note

This example modifies already distributed code by Apple. If you reproduce, modify, or redistribute this example, you must keep the original disclaimer intact.