Section 8.2. JavaScript Display Parsers | Developing Feeds with Rss and Atom

8.2. JavaScript Display Parsers

The original use for RSS was to allow Netscape to display headlines and links on its My Netscape portal pages, and this sort of use remains very popular. But because you don't need any programming skills to build a web site, nor a server that can run scripts to make it public, right from the beginning there has been a need for RSS parsers that live on other people's servers and that web site authors can use without much trouble.

These JavaScript Display Parsers are still very popular, and there are many to go round. Each works pretty much the same way: you edit a snippet of JavaScript slightly and then place it inside a web page. Let's look at one of these.

8.2.1. RSS XPress

Andy Powell and Pete Cliff's RSS XPress system, found at http://rssxpress.ukoln.ac.uk/lite/, is an excellent example. Hosted by the U.K. Office for Library Networking at the University of Bath, it takes a feed's URL and returns XHTML directly to the browser's rendering engine. Example 8-1 shows a listing of a very basic web page that displays the RSS 1.0 file from my own weblog. Figure 8-1 shows how it looks in the Safari browser on Mac OS X.

Figure 8-1. A very basic web page invoking RSS Xpress

Example 8-1. A very basic web page invoking RSS Xpress

<html> <head></head> <body>  <script src="/books/1/114/1/html/2/http://rssxpress.ukoln.ac.uk/lite/viewer/?rss=http%3A%2F%2Fwww.     benhammersley.com%2Findex.rdf"></script> </body> </html>

The advantages of this sort of parser are plain to see. It's extremely easy to set up and doesn't require any more programming skill than a knowledge of cutting and pasting. It's also potentially much kinder on the publisher of the feed itself because sensible versions of this parser will include some form of caching at the server end. The disadvantages are that it is impossible to do anything other than display the data, and that you might not like the way the feed looks when you display it. The latter isn't too serious an objection, however, because most such parsers add div and span markup to the XHTML they return. You can, therefore, apply a stylesheet to them. In the case of the RSS Xpress service, this is very straightforward. Example 8-2 shows an HTML page with some CSS, and Figure 8-2 shows how that looks.

Figure 8-2. How the CSS changes the display of the feed

Example 8-2. An HTML listing to invoke RSS XPress, using CSS

<html>   <head>   <title>Test page - rssxpresslite</title>   </head>   <style>   <!--     /* A:link refers to all links on the page - not just the RSS content... */     A:link { color : yellow; font-weight : bold; }     A:visited { color : yellow; font-weight : bold; }     /* these are the RSS classes - you can adapt them as you see fit        values here override the defaults... */     .rssxpresschannel {       font-family : sans-serif;       text-align : center;     }     .rssxpresschtitle {       font-size : large;       color : #006393;     }     .rssxpresschdesc {       color : black;       text-align : center;     }     .rssxpressittitle {       font-size : 110%;       line-height : 120%;       background-color : #006393;     }      .rssxpressitdesc {       background-color : #c6c6de;       padding-bottom : 10pt;     }     .rssxpresstable {       text-align : center;     }     /* rssxpressdivider is a special case - it is a single pixel, single column row on the  rssxpress channel - to alter its color just change the background-color image. */     .rssxpressdivider {       background-color : black;     }   //-->   </style>   <body>   <h2>RSSxpressLite CSS demo page</h2>   <p><!-- <a href="cssdemo.html"> -->With CSS<!-- </a> --> | <a href= "cssdemowithout.html"><font color="blue">Without CSS</a></p>  <script src="/books/1/114/1/html/2/http://rssxpress.ukoln.ac.uk/lite/viewers/rss.cgi?rss=http://www.rdn.ac.uk/ news/rdnheadlines.xml"></script>   </body> </html>

A full rundown of the service's CSS markup is available on the RSS Xpress site, once you have chosen which URL you wish to parse.

That really is that, as far as JavaScript parsers go. They are very simple and easy to use and do a perfectly good job of displaying headlines from other sites within your own pages. These pages, of course, needn't be served from a web browser. Indeed, Figure 8-1 shows Example 8-1 being viewed as a file on my desktop. This is perhaps the simplest possible personal aggregator you can build.

8.2.2. Other Examples to Try

RSS XPress isn't the only JavaScript parser around. They all do much the same thing, so it's nice to spread the love a little bit.

RSS to JavaScript.com (http://www.rss-to-javascript.com/): Despite the name, this system can deal with all the syndication formats, with tentative Atom support also available. It's an exceptionally straightforward form system for styling up and creating code for a JavaScript snippet.
Infinite Penguins RSS Viewer (http://infinitepenguins.net): Check out the Infinite Penguins waddling in action with RSS and Atom. Again, it offers a nice form to configure your JavaScript snippet. The code for this parser is also available for download, so you can use it on your own site if you like. It's based on the MagpieRSS parser, in PHP, which we'll visit later.
Feedroll.com (http://www.feedroll.com/rssviewer/): This system also supports Atom and offers a nice form to style up your feeds.
Feed2JS (http://jade.mcli.dist.maricopa.edu/feed/): The Feed2Js service comes courtesy of Alan Levine at the Maricopa Community Colleges. It is also based on MagpieRSS and offers styling options.