Here’s a simple one that uses JQuery to get the feeds and then loop through them to output them to the browser window.

First, create an XHTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>RSS Reader</title>
</head>
<body>
</body>
</html>

Then, download my favorite JavaScript API, JQuery.

Link the JS file in by adding this tag in the head:

<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>

Created <div> elements to act as wrappers/containers for the page’s content.  Use an <img> to put a nice graphic header in the page, then added some semantic XHTML elements, an <h1> for the text header, a <form> tag to hold a <select> menu populated with a few of favorite Blog RSS Feeds as the <option> elements setting their URLs as the value attributes for those, and of course a <label> to let everyone know they should “Select a Feed” via that menu. (You can also make user enter an RSS Feed link using a textbox and Dorm element). After the tags are closed, put one more div after the form to contain the feed results after they are retrieved.

Add id attributes liberally throughout the tags, to style them or use them in my JQuery reader soon.

If you’re following along, your code probably looks something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>RSS Reader</title>
	<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>
</head>
<body>
<div id="container">
<a href="visualrinse.com"><img src="http://www.killerweb20.com/webdesign/wp-content/themes/smooth-dirt-10/header_08v2.jpg" alt="Killer RSS" title="Killerweb.com" /></a>
<div id="ui">
<h1>Feed Reader</h1>
<form id="selectParser" action="">
<label>Select a feed:</label>
<select id="diffFeeds">
	<option value="">Select</option>
	<option value="http://feeds.feedburner.com/dassnagar">Aral Balkan</option>
	<option value="http://www.bit-101.com/blog/?feed=rss2">Bit-101</option>
	<option value="http://feeds.feedburner.com/arazzaq/">Peter Elst</option>
	<option value="http://www.gskinner.com/blog/index.xml">Grant Skinner</option>
	<option value="http://blog.andre-michelle.com/feed/">Andre Michelle</option>
	<option value="http://feeds.feedburner.com/flashmagazine/rss2">Flash Magazine</option>
	<option value="http://casario.blogs.com/mmworld/rss.xml">Marco Casario</option>
	<option value="http://www.sephiroth.it/weblog/index.xml">Sephiroth</option>
	<option value="http://www.quasimondo.com/index.xml">Quasimondo</option>
	<option value="http://feeds.feedburner.com/sebleedelisle">Seb Lee-Delisle</option>
	<option value="http://osflash.org/feed.php">OS Flash</option>
</select>
</form>
</div>
<div id="feedContent">
	&nbsp;
</div>
</div>
</body>
</html>

Cool… So, time to add the interactivity. We’re going to add a script tag to the head area and begin writing a Javascript function. I called mine “get_rss_feeds()”. The basic idea behind the function is to use the JQuery api’s “get()” function to grab the URL of the selected item from feedList (the name of our select menu, remember?), then run through each item in the RSS feed, putting those tasty XML elements from the feed like title, pubdate and description into HTML and popping them on the page. Between runs, we’ll need a way to clear out the div containing the content, so each time a new feed loads, the old content is removed.

So to do this, let’s put the following code in the Javascript block:

function get_rss_feed() {
	//clear the content in the div for the next feed.
	$("#feedContent").empty();
 
	//use the JQuery get to grab the URL from the selected item, put the results in to an argument for parsing in the inline function called when the feed retrieval is complete
	$.get($('#diffFeeds').val(), function(d) {
 
		//find each 'item' in the file and parse it
		$(d).find('item').each(function() {
 
			//name the current found item this for this particular loop run
			var $item = $(this);
			// grab the post title
			var title = $item.find('title').text();
			// grab the post's URL
			var link = $item.find('link').text();
			// next, the description
			var description = $item.find('description').text();
			//don't forget the pubdate
			var pubDate = $item.find('pubDate').text();
 
			// now create a var 'html' to store the markup we're using to output the feed to the browser window
			var html = "<div class=\"entry\"><h2 class=\"postTitle\">" + title + "<\/h2>";
			html += "<em class=\"date\">" + pubDate + "</em>";
			html += "<p class=\"description\">" + description + "</p>";
			html += "<a href=\"" + link + "\" target=\"_blank\">Read More >><\/a><\/div>";
 
			//put that feed content on the screen!
			$('#feedContent').append($(html));
		});
	});
 
};

Now, besure to add the get_rss_feed function call to the feedList’s onchange event and you are good to go. With a catch, of course. This will only work when accessed locally via the “file://” protocol. IN order to use this online, you’ll need to circumvent the browser security sandbox and use a middleware proxy to grab the XML and make it local. Here’s the PHP:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

Slick, eh? To use it, simply prepend the proxy’s URL used in the $.get call, like this:

$.get('proxy.php?url='+$('#diffFeeds').val(), function(d) {

So, there you go. Add some CSS in there and it’s all stylish. You can the feed reader in effect here.

Hope you enjoyed this.