Categories:

A robust RSS Feed displayer

With all the technical details out of the way, it's high time for some fun. Lets combine Google Ajax Feed API with a little bith of Object Oriented ingenuity to create a robust RSS feed displayer capable of displaying more than one feed on the page, each with its own settings.

<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>

<script type="text/javascript" src="rssdisplayer.js"></script>

<style type="text/css">
#msndiv{
width: 80%;
}
</style>
</head>

<body>

<script type="text/javascript">

//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
new rssdisplayer("msndiv", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml", 4, "date, description")

</script>

<br style="clear: both" />

Here's the output:


To use this script, just call:

new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")

where you wish the feed to be displayed on the page, It should be initialized with the following four parameters:

  1. "divid": The ID of the DIV that will house the RSS feed. DIV is dynamically created.
  2. "rssurl": The full URL to the valid RSS feed on the web.
  3. numberofitems: The number of entries to fetch from the feed.
  4. "displayoptions": Optional string that sets whether to show the "date" and/or "description" portion of each entry. Valid values are any combination of "date", "description", and "snippet", for example: "date, snippet". Note that the difference between "description" and "snippet" is that the later trims the description to less than 120 characters and no HTML.

Sometimes instead of the full description of each RSS entry, you may want to show the abbreviated version instead, without the HTML tags and shortened. In such cases, instead of passing in "description" for the 4th parameter above, use "snippet" instead:

new rssdisplayer("msndiv", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml", 4, "date, snippet")

Lets use this script now to just display the headlines of a feed, in this case, CSS Drive:

<script type="text/javascript">

//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
new rssdisplayer("cssdrive", "http://www.cssdrive.com/index.php/news/rss_2.0/", 10, "date")

</script>

Here's the output:

rssdisplayer.js source

Obviously this script references the external .js file rssdisplayer.js. For your convenience, here's the source:

google.load("feeds", "1") //Load Google Ajax Feed API (version 1)

function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description")
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed...</div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}


rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}


rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="<a href=\"" + thefeeds[i].link + "\">" + thefeeds[i].title + "</a>"
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}

//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
//new rssdisplayer("adiv", "http://www.cssdrive.com/index.php/news/rss_2.0/", 5, "date, description")

And with that we come to an end of this tutorial. Hope it makes life easier for you when it comes to showing RSS feeds on your site.