FF1+ IE8+ Opr8+

Local RSS/XML Feeds Displayer

Author: Dynamic Drive

Description: Local RSS Feeds Displayer takes one or more local RSS/ XML files on your own server and displays their contents on your site in a single output. Sort the output by "date",  title", or "feed", and control which fields get shown and in what order. You can also curtail the number of characters that get output inside certain long fields such as the "description" field.

Here's a summary of the features of this script:

  • Accesses and displays any local RSS feed on your site. A local feed is one that resides on the same server as the script outputting the RSS feed.
  • Ability to specify multiple RSS feeds to display as a single unit.
  • Sort the results either by "date", "title", or a custom "label" assigned to each feed (ie: "New" then "Trending").
  • Set the number of RSS entries to show per feed.
  • Optionally strip HTML and limit the number of characters shown inside either the "title" or "description" fields.
  • Customize the order of each field when they are output using the built in template feature.
  • Ability to display the output as a rotating slider.

Local RSS Feeds Displayer has one dependency, xmltojson.js. If a RSS feed is shown as a slider, then jQuery is also required.


Directions Developer's View

Step 1: Insert the following code into the HEAD section of your page:

Select All

Step 2: Download the below two .js files:

Inside the code of step 1 above, you'll also notice a reference to jQuery via cdn- you can remove this reference and further tighten up the script if you're not displaying the feed as a slider. More info below.

Step 3: Finally, to display the desired RSS feeds, define an empty DIV element, then initialize the script following it with the desired settings:

Select All

That's it!


Lets continue on to the equally important but not quite as glamorous documentation portion of the script.

- Initialization code

 The initialization call to display a local RSS feed on  your site looks like the following:

var whatsnew = new localrssdisplay('rssdiv') // initialize with ID of RSS DIV container
whatsnew.addFeed('CSS', 'new.rss') // addFeed("feed label", path_to_feed)
whatsnew.addFeed('DD', 'css.rss')
whatsnew.definetemplate('{title} {date} {label}<br />{description}')
whatsnew.striplimit('description', 100)

The variable "whatsnew" should be an arbitrary but unique variable for each instance of the script. The lines that follow call the various available public methods to customize the script in some way, concluding  with a call to the init() method to finally display the output.

- Syntax for specifying the path to your local RSS/XML file on the server

 Before detailing all the available methods at your disposal, lets zoom in on the addFeed() method first, which defines the RSS file(s) on your server to retrieve and display. Its 2nd parameter should be the path to the RSS/XML file on your server to display:

variableinstance.addFeed('Feed Label', 'new.rss')

In the above case, the file "new.rss" is assumed to be in the same directory as the page the Local Feeds Displayer script is currently running in. Here are a couple of additional examples:

variableinstance.addFeed('Feed Label', 'myfeeds/new.rss') // sub directory
variableinstance.addFeed('Feed Label', 'http://' + location.hostname + '/somepath/new.rss') // absolute URL to file on server

The last example is interesting- it specifies an absolute URL to the RSS file. This lets you use the same URL anywhere on your site where you may call the script. Due to Ajax's finicky same-origin restrictions, to define an absolute URL to the RSS file on your server, we should make the hostname portion of the URL dynamic so it reflects exactly what the browser is currently seeing (ie: www.dynamicdrive.com versus dynamicdrive.com). If your site is under SSL, you should also replace http: with https:

Available methods

 The following lists all the available methods of localrssdisplay():

localrssdisplay object and methods
Constructor Description
new localrssdisplay('id')


Main localrssdisplay() constructor function to create a new instance of Local RSS Feeds Displayertg.


  • id: The ID of the empty DIV on the page that proceeds the initialization code that will house the result.


var myfeed = new localrssdisplay("divid")



instance.addFeed("label", "feedurl")


Adds a feed on your server to be retrieved and shown. Call this function more than once to add multiple feeds.


  • label: An arbitrary string used to "label" this feed (ie: "News"). This label can then be optionally shown alongside each entry, or to sort multiple feeds based on their label.
  • feedurl: The full path to the RSS feed on your server. Due to Ajax's same-origin restriction, if you wish to specify an absolute URL to the feed on your server (instead of relative path), construct this URL dynamically. See Syntax for specifying path to RSS feed.


myfeed.addFeed("DHTML", "new.rss")


defaults to "date"

Sorts the results by one of three criteria: 'title', 'date', or 'label'.




defaults to "li"

Changes the element used to contain each RSS entry. By default, it is a li element (<li>), so that the RSS entries are displayed as a HTML list. You can, for example, pass in "div" or "p" so the entries are displayed as DIVs or paragraphs, respectively.


  • "TagName": Name of the HTML element you wish to encase each RSS entry using. Default is "li" (HTML list).



instance.striplimit(chars, "fieldtype")

defaults to undefined

Lets you strip any HTML inside a field and limit the number of remaining characters shown inside a particular field, most commonly, the "description" field.


  • chars: An integer specifying the maximum number of characters to show after any HTML has been stripped, suffixed by "..." at the end.
  • "fieldtype": The field of each RSS entry to apply the restriction- valid keywords are "title" or "description".

This method can be called more than once to apply the character restriction to both the "title" and "description" fields if needed.


/instance.limitlength(150, "description")


defaults to "{title} {label} {date}<br />{description}"


Allows you to change the display order of the various fields of each RSS entry as they are output. The default output structure is to put the "title", "label", and "date" fields all on one line, followed by the "description" field on the next. To rearrange this, plus add additional HTML tags to the output, enter a new template string, using the following keywords to designate the various fields:
  • {url}
  • {title}
  • {label}
  • {date}
  • {description}

The {url} keyword lets you display the destination URL of each RSS entry separately within your output. The following call to definetemplate() causes the output of each RSS entry to simply consist of the description field, hyperlinked:


instance.definetemplate("<a href='{url}'>{description}</a>")


defaults to undefined

Sets the number of entries to retrieve and display per feed.

defaults to {
 rotate: 3,
 pause: 1500,
 fxduration: 500,
 cycles: 3

When called, displays the result as a slider where messages are rotated by dismissing the top messages to the bottom until x number of cycles. Enter an object literal to configure one of four slider related options:
  • rotate: The number of messages to dismiss and rotate each time
  • pause: The pause in milliseconds before rotating
  • fxduration: The duration of the fade away effect, in milliseconds
  • cycles: The number of page cycles to go through before stopping the slider.


	rotate: 1, // dismiss one message each time
	pause: 2000,
	cycles: 5

Note: If you're not making use of this method to show the feeds as a slider, you can remove the jQuery script reference in the code of Step 1 to reduce the script's size footprint.



Call this function at the very end to initialize the gAjax RSS Feed Displayer using the above settings.

Styling your RSS entries

Upon output, every element within an RSS entry such as the "title" and "description" fields are automatically surrounded with a SPAN element that makes it easy to style them. The easiest way to see the exact structure of the output is to view the generated markup using your browser's built in Developer Tool, specifically, Page Inspector (F12):

Page Inspector screen shot

As you can see, each component consists of a SPAN element with a specific CSS class to help identify and style it, such as "rssdesc" for the "description" field of each entry. The outermost element of each entry carries a class of "rssentry".

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post