• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Sept 20th, 12': Version 2 release. Adds support for templating of entries' output, search and replace via regular expressions of any RSS field.

Description: This script is the fastest way to display RSS feeds from other sites on your own, period. It uses Google's Ajax Feed API to host the desired RSS feeds on Google's servers, so all that's left for you is to insert some code on your page to show them. Using gAjax RSS Feeds Displayer, you can display results from multiple feeds intermixed, sort them in a variety of ways, specify which fields of each RSS entry to display, and more. No more hurdles in your way to showing RSS feeds on your site!

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

• Uses Google Ajax Feed API to host/cache the desired RSS feeds, so you don't have to install or host anything on your own server.
• Specify multiple RSS feeds to display, with the results intermixed.
• Sort the results either by "date", "title", or a custom "label" assigned to each feed (ie: "Digg" then "Slashdot").
• Set the number of total RSS entries to show. If multiple feeds are specified, that number is spread out evenly amongst the feeds.
• Specify which additional fields of each RSS entry to show, such as its "label", "date", "description", "snippet" and more.
• Search and replace any text within each RSS entry using regular expressions to mold the output to your exact specifications. v2.0 feature
• Customize the order of each field when they are output using the built in template feature. v2.0 feature
• Ability to refresh the contents of the feeds on the fly without reloading the page.
• Supports multiple gAjax RSS displayer instances on the same page.

Demo:

Example 3: (Three different RSS feeds, 8 entries, "datetime" and "snippet" fields enabled, sort by date)

Example 4: (One RSS feed, use of definetemplate() method to alter display order of the involved fields, so to display description field first, followed by title field. The former is also manipulated to be hyperlinked to entry URL)

Directions

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

Step 2: Download the below .js file and image, which are also referenced by the code above,  and upload to your site:

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

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

Step 3: Finally, to display the desired RSS feeds, just add the below sample HTML to your page, which illustrates 3 different examples using various feeds (Slashdot, Digg, CSS Drive, CNN etc):

That's it!

Documentation

Here comes the part you dread, but will come to love soon enough- the documentation section.

var socialfeed=new gfeedfetcher("someid", "someclass", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.init() //Always call this last

Styling your RSS entries

Upon output, each entry within your RSS feed(s) is automatically formatted in a way that makes it easy to style its various fields. Specifically, each field is wrapped around its own SPAN tag with a specific CSS class name:

Sample Entry Output:

So the "Title Field" of each entry for example is always wrapped in a SPAN element carrying the CSS class "titlefield", and so on for the other fields, and in that order. The entire entry is wrapped in a "LI" element by default, or as dictated by the setentrycontainer(tagName, [cssclass]) method (see above table). With that said, you might have the following CSS to style your RSS entries:

.titlefield{ /* CSS for title field in general */
font-weight: bold;
}

.labelfield{ /* CSS for label field in general */
color:brown;
font-size: 90%;
}

#example1 .datefield{ /* CSS for date field of the RSS feed with id="example1" */
color:gray;
font-size: 90%;
}

The ID selector "#example1" above is used to let us further target a specific RSS feed instance's date field, where the ID derives from that specified when calling new gfeedfetcher("id", "cssclass, "[optional_link_target]") to instantiate a RSS feed displayer.

Now, you can also alter the order in which the various fields appear via the definetemplate() method, and do a search and replace of text inside any of them via addregexp(). That's further discussed in the Supplimentary Page.

Refreshing the contents of the feeds on the fly

After the desired RSS feeds are shown on your page, you can actually refresh its contents on the fly, without reloading the page. You do this by calling instance.init() again. For example:

<script type="text/javascript">

var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed
socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
socialfeed.init() //Always call this last

</script>

<a href="javascript:socialfeed.init()">Refresh Feed Contents</a>

Bear in mind, however, that Google Feeds API caches the specified RSS feeds on their servers, and only refreshes them around once every hour. This means it's usually futile to be calling the init() function every few minutes, as the same content will most likely be returned.

Table Of Contents

This script consists of an index page plus one supplementary pages:

• Script Index Page
• customizing the display order of each rss entry's fields, search and replace text