RSS Feeds via JavaScript

Alan Levine, Oct 14 2003

Implementing RSS feeds into your own site is doable if the code is built into a system such as Radio or MovableType, but who knows how to sit down and write code to parse XML? Not me.

Here is a strategy you can do quite easily to insert dynamically updated RSS into any web page, blog, or Course Management System.

It makes use of a PHP script (demo version running on our server) that parses the XML feed, and returns a JavaScript set of write commands that insert the information into your page. All you need to do is to insert a simple JavaScript line of code in the part of your page where you want the feed. The only other thing to tidy it up is to link or insert a sytle sheet to format the output.

Example

Here is the first sample feed, the 10 newest item in the Maricopa Learning eXchange:

The code to put this in your page is:

where the value of "src=" is the URL for the RSS feed. Note that we provide a NOSCRIPT option for users with JavaSCript disabled or those using screen readers.

Additional Options

We have added some more parameters to control the output of your feed.

Show/Hide Channel Information (chan=yes|no|title)
The default is to display the channel title and description (chan=yes). You can also specify to display the title of the channel only (chan=title). To hide this display or to set it to title only, add the parameter to your URL:

Limit number of items returned (num=X)
The default is to display all items in the feed. To return only a given number of items, specify it as:

The default value or specified as num=0 is to display all items.

Show/Hide Item Descriptions (desc=yes|no)
The default is to hide the descriptions of items. To display the item description, add the parameter to your URL:

Show/Hide Item Posting Date (date=yes|no)
The default is to hide the date stamp of items. To display the item posting date, add the parameter to your URL:

Build a Feed!

No need to mess around writing the code! This form will help you build a feed. All you need is the URL for the RSS source.

See it in action...
Here is an example of using all paramaters, to show the title only from the channel information (chan=title), to limit the items to 3 (num=3), to show item descriptions (desc=yes), and show the posting date (date=yes):

View RSS feed

Making it Pretty

Insert a link to this external style sheet or put the contens directly into your HTML file, in between <style> ... </style> tags. Edit to match your design dreams (need some muscle with CSS, not much to tinker with fonts and colors).

More Than One is Fun

You can have multiple feeds on the same page, here is one from my blog and following is one from D'Arcy Norman, who helped with the code too:

View RSS feed

The PHP Parsing Code

It is not rocket science, brain surgery, or even tax return level code. The parses uses the Onyx-RSS code from ReadingEd, which does all of the hard work and even sets up optional cache directories.

For the code minded (please, run it on your server not mine ;-), here is the rss2js.php script and the rss2html.php script (for noscript linked alternatives) or a zip archive with the code and the other pieces.

Where is it in Use?

infoZine News RSS Syndication
http://www.infozine.com/news/stories/op/storiesView/sid/1338/

Version History

Oct 14, 2003 Added code to deal with RSS tags of <guid> elements for item URLs and <pubDate> for RSS 2.0 item published dates. Also added a trp to post "no title" if no title tag exists for items

Oct 13, 2003 Cleaned up code for naming cache files, with many feeds from this site, many were be overwritten by similar feeds names from other sites (previously, the cache fiels were base don the path of the feed, now it is the whole URL)

Sep 15, 2003 Changed Javascript output for items link with a TARGET= option so items would open in a separate browser window.

Aug 8, 2003 Added a NOSCRIPT alternative that provides a link to a HTML version of the feed.

May 14, 2003 Added the web form above for generating previews and the JavaScript syntax for feeds.

May 14, 2003 Added item posting date feature suggested by D'Arcy Norman (who also cleaned up some loop variable madness), and adding channel option for title only display.

May 13, 2003 Update to take care of accessing variables from $_GET array, and add optional paraemters for output control, thanks to suggestions by Randy Brown.

May 7, 2003 modifications in output and cache file setting thanks to D'Arcy Norman.

May 5, 2003 first version