jQuery Get RSS Feed Live Reader

Use jQuery get rss (with JavaScript) to get a blogs (or websites) display rss feed on your web page. Use Google Ajax Feed API to retrieve the feed items and returns them as a list of feed items to be displayed. The feed can then be customized with your styles to suit your look – for example it could be used as a jQuery news aggregator.

jQuery RSS Viewer Demo Real World Demo

jQuery RSS Plugin Features

  • Automatically load rss feed when your web page loads
  • Refresh button to refresh the jQuery rss feed reader live
  • You can add mutiple rss feeds
  • You can specify a limit of feed items that are returned
  • Displays a loading button while reading rss feeds


Download Source Files

The jQuery RSS Plugin Code

The jQuery RSS Plugin mainly uses JavaScript to call google.load(feed) to get the rss feed items.
var gfeedfetcher_loading_image="/images/page-images/loader.gif" //Full URL to "loading" image. No need to config after this line!!

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

function gfeedfetcher(divid, divClass, linktarget){
    this.linktarget=linktarget || "" //link target of RSS entries
    this.feedlabels=[] //array holding lables for each RSS feed
    this.feeds=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
    this.feedsfetched=0 //number of feeds fetched
    this.showoptions="" //Optional components of RSS entry to show (none by default)
    this.sortstring="date" //sort by "date" by default
    document.write('<div id="'+divid+'" class="'+divClass+'"></div>') //output div to contain RSS entries
    this.itemcontainer="<li>" //default element wrapping around each RSS entry item

gfeedfetcher.prototype.addFeed=function(label, url){

gfeedfetcher.prototype.filterfeed=function(feedlimit, sortstr){
    if (typeof sortstr!="undefined")

    this.showoptions=parts //set RSS entry options to show ("date, datetime, time, snippet, label, description")

gfeedfetcher.prototype.setentrycontainer=function(containerstr){  //set element that should wrap around each RSS entry item

    this.feedsfetched=0 //reset number of feeds fetched to 0 (in case init() is called more than once)
    this.feeds=[] //reset feeds[] array to empty (in case init() is called more than once)
    this.feedcontainer.innerHTML='<p><img class="textmiddle" src="'+gfeedfetcher_loading_image+'" /> Loading blog feeds...</p>'
    var displayer=this
    for (var i=0; i<this.feedurls.length; i++){ //loop through the specified RSS feeds' URLs
        var feedpointer=new google.feeds.Feed(this.feedurls[i]) //create new instance of Google Ajax Feed API
        var items_to_show=(this.feedlimit<=this.feedurls.length)? 1 : Math.floor(this.feedlimit/this.feedurls.length) //Calculate # of entries to show for each RSS feed
        if (this.feedlimit%this.feedurls.length>0 &amp;&amp; this.feedlimit>this.feedurls.length &amp;&amp; i==this.feedurls.length-1) //If this is the last RSS feed, and feedlimit/feedurls.length yields a remainder
            items_to_show+=(this.feedlimit%this.feedurls.length) //Add that remainder to the number of entries to show for last RSS feed
        feedpointer.setNumEntries(items_to_show) //set number of items to display
            return function(r){
                displayer._fetch_data_as_array(r, label)
        }(this.feedlabels[i])) //call Feed.load() to retrieve and output RSS feed.

gfeedfetcher._formatdate=function(datestr, showoptions){
    var itemdate=new Date(datestr)
    var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : (showoptions.indexOf("time")!=-1)? itemdate.toLocaleTimeString() : ""
    return "<span class='datefield'>"+parseddate+"</span>"

gfeedfetcher._sortarray=function(arr, sortstr){
    var sortstr=(sortstr=="label")? "ddlabel" : sortstr //change "label" string (if entered) to "ddlabel" instead, for internal use
    if (sortstr=="title" || sortstr=="ddlabel"){ //sort array by "title" or "ddlabel" property of RSS feed entries[]
        var fielda=a[sortstr].toLowerCase()
        var fieldb=b[sortstr].toLowerCase()
        return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
    else{ //else, sort by "publishedDate" property (using error handling, as "publishedDate" may not be a valid date str if an error has occured while getting feed
            arr.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})

gfeedfetcher.prototype._fetch_data_as_array=function(result, ddlabel){ 
    var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
    if (thisfeed==""){ //if error has occured fetching feed
        alert("Some blog posts could not be loaded: "+result.error.message)
    for (var i=0; i<thisfeed.length; i++){ //For each entry within feed
        result.feed.entries[i].ddlabel=ddlabel //extend it with a "ddlabel" property
    this.feeds=this.feeds.concat(thisfeed) //add entry to array holding all feed entries
    this._signaldownloadcomplete() //signal the retrieval of this feed as complete (and move on to next one if defined)

    if (this.feedsfetched==this.feedurls.length) //if all feeds fetched
        this._displayresult(this.feeds) //display results

    var rssoutput=(this.itemcontainer=="<li>")? "<ul>\n" : ""
    gfeedfetcher._sortarray(feeds, this.sortstring)
    for (var i=0; i<feeds.length; i++){
        var itemtitle="<a rel=\"nofollow\" href=\"" + feeds[i].link + "\" target=\"" + this.linktarget + "\" class=\"titlefield\">" + feeds[i].title + "</a>"
        var itemlabel=/label/i.test(this.showoptions)? '<span class="labelfield">['+this.feeds[i].ddlabel+']</span>' : " "
        var itemdate=gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions)
        var itemdescription=/description/i.test(this.showoptions)? "<br />"+feeds[i].content : /snippet/i.test(this.showoptions)? "<br />"+feeds[i].contentSnippet  : ""
        rssoutput+=this.itemcontainer + itemtitle + " " + itemlabel + " " + itemdate + "\n" + itemdescription + this.itemcontainer.replace("<", "</") + "\n\n"
    rssoutput+=(this.itemcontainer=="<li>")? "</ul>" : ""


<div id="rssfeed-wrap">
<script type="text/javascript">
var newsfeed=new gfeedfetcher("rssfeeds", "rssfeedsclass", "_new")
newsfeed.addFeed("JQUERY BLOG", "http://www.jquery4u.com/feed/");
newsfeed.addFeed("BLOGOOLA's Blog", "http://blogoola.com/blog/feed/");
newsfeed.displayoptions("label datetime snippet");
newsfeed.filterfeed(10, "date");
<p><a class="darklink" href="javascript:newsfeed.init()">Refresh live blog posts</a></p>

CSS Code

/** RSS FEED **/
.labelfield{ color:brown; font-size: 90%; }
.datefield{ color:gray; font-size: 90%;}
#rssfeeds a{ color: purple;text-decoration: none;font-weight: bold;}
#rssfeeds p{ margin-bottom: 2px;}
code{ color: red;}
#blogoolafeed, #blogoolafeed a { color:white; }
#blogoolafeed a:hover{ color:#8E7BD3; }
#blogoolafeed ul { margin-left:-15px }
#rssfeed-wrap { text-align:left; margin-left:15px; }

Plugin source: http://www.dynamicdrive.com