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.

Demos:

Directions

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

Step 2: Download the below two .js files:

• localrssdisplayer.js (right click and choose "Save As").

• xmlToJSON.js (project page)

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:

That's it!

Documentation

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)
whatsnew.setentriesperfeed(5)
whatsnew.init()

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():

instance.setslider({
	rotate: 1, // dismiss one message each time
	pause: 2000,
	cycles: 5
})

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".