Dynamic Drive DHTML Scripts- gAjax RSS Feeds Displayer (hosted)

gAjax RSS Feeds Displayer (hosted)

Author: Dynamic Drive

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 components 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 components of each RSS entry to show, such as its "label", "date", "description", "snippet" and more.
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 1: (Single RSS feed, 10 entries, "date" field enabled, sort by title) Example 2: (Two different RSS feeds, 6 entries, "label", "datetime", and "snippet" fields enabled, sort by label)

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

Directions

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

Select All
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"> </script> <script type="text/javascript" src="gfeedfetcher.js"> /*********************************************** * gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> <style type="text/css"> .labelfield{ /*CSS for label field in general*/ color:brown; font-size: 90%; } .datefield{ /*CSS for date field in general*/ color:gray; font-size: 90%; } #example1 li{ /*CSS specific to demo 1*/ margin-bottom: 4px; } #example2 div{ /*CSS specific to demo 2*/ margin-bottom: 5px; } #example2 div a{ /*CSS specific to demo 2*/ text-decoration: none; } #example3 a{ /*CSS specific to demo 3*/ color: #D80101; text-decoration: none; font-weight: bold; } #example3 p{ /*CSS specific to demo 3*/ margin-bottom: 2px; } code{ /*CSS for insructions*/ color: red; } </style>

IMPORTANT: Notice the "YOUR-API-KEY" portion at the very top of the code. You need to replace that with your free Google API Key. Go to this page and enter your site's domain (aka the domain you wish to display this script on). A key that is super-long is generated. Replace "YOUR-API-KEY" with this key!

The generate key will work on any page within the specified domain. If you need to use this script on another domain, generate another key.

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

Select All
<h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, sort by <code>title</code>)</h3> <script type="text/javascript"> var cssfeed=new gfeedfetcher("example1", "example1class", "") cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed cssfeed.displayoptions("date") //show the specified additional fields cssfeed.setentrycontainer("li") //Display each entry as a list (li element) cssfeed.filterfeed(10, "title") //Show 10 entries, sort by date cssfeed.init() //Always call this last </script> <br /><br /> <h3>Example 2: (Two RSS feeds, 6 entries, "<code>label"</code>, "<code>datetime</code>", and "<code>snippet</code>" fields enabled, sort by <code>label</code>)</h3> <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.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 </script> <br /><br /> <h3>Example 3: (Three RSS feeds, 8 entries, "<code>datetime</code>" and "<code>snippet</code>" fields enabled, sort by <code>date</code>)</h3> <script type="text/javascript"> var newsfeed=new gfeedfetcher("example3", "example3class", "_new") newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed newsfeed.displayoptions("datetime snippet") //show the specified additional fields newsfeed.setentrycontainer("p") //Display each entry as a paragraph newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date newsfeed.init() //Always call this last </script>

That's it! Make sure you've entered a valid Google code API key inside the code of Step 1, or you won't have lift off.

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

**gfeedfetcher object and methods**
Constructor	Description
`new gfeedfetcher("id", "cssclass, "[optional_link_target]")` *Required*	Main `gfeedfetcher()` constructor function to create a new instance of gAjax RSS Displayer. Parameters: id: An arbitrary but unique string to be used as the CSS "id" attribute of the outermost container DIV. cssclass: An arbitrary string to be used as the CSS "class" attribute of the outermost container DIV. [optional_link_target]: An optional parameter that lets you set the link target for the RSS feed links. Example: `var myrss=new gfeedfetcher("someid", "someclass", "_new")`
Method	Description
`instance.addFeed("label", "feedurl")` *Required*	Adds a feed to be retrieved and shown (based on its full URL). Call this function more than once to add multiple feeds. Parameters: label: An arbitrary string used to "label" this feed (ie: "Slashdot"). This label can then be optionally shown alongside each entry, or to sort multiple feeds based on their label. feedurl: The full URL to the feed. Example: `myrss.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot")`
`instance.displayoptions(space_delimited_keywords)`	By default, only the title of each RSS entry is shown. Specify additional fields such as each entry's date and description by calling `displayoptions()` and passing in specific keywords, each separated by a space, for example, "`datetime label description`". Parameter: space_delimited_keywords: A list of keywords representing the additional fields of each entry you wish to show, separated by a space. The list of valid keywords are "`date`", "`time`", "`datetime`", "`label`", "`snippet`", and "`description`". Example: `//eg1: myrss.displayoptions("datetime") //eg2: myrss.displayoptions("date label snippet") //eg3: myrss.displayoptions("datetime label description")`
`instance.setentrycontainer(TagName)`	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. Parameter: TagName: Name of the HTML element you wish to encase each RSS entry using. Default is "`li`" (HTML list). Examples: `//eg1: instance.setentrycontainer("div") //eg2: instance.setPersist("p")`
`instance.filterfeed(int, ["sortby"])` *Required*	Sets the number of entries to retrieve and display. An optional second parameter lets you sort the results by "`date`", "`label`", or "`title`". Parameter: int: An integer specifying the total number of entries to fetch and display. If multiple feeds are defined, this number is distributed amongst the feeds. For example, if you've specified a value of `"6"` and there are 2 RSS feeds, each feed will show 3 entries. ["sortby"]: An optional second parameter lets you sort the results in a variety of ways. The valid keywords are "`date`", "`label`", or "`title`". Default is by "date". Examples: `//eg1: instance.filterfeed(6, "date") //eg2: instance.filterfeed(5, "label")`
`instance.init()` *Required*	Call this function at the very end to initialize the gAjax RSS Feed Displayer using the above settings.

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:

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.