New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

Displaying RSS feeds using SAG Scroller

SAG Scroller, apart from displaying inline or Ajax content, can also easily display RSS feeds without the need to install any server side scripts. It uses Google's Feed API to facilitate this:

RSS Scroller (5 entries, 1 source):

RSS Scroller (10 entries, 2 sources):

Setting up a RSS based SAG Scroller is identical to that of an ordinary SAG Scroller, except you need to throw in a reference to the Google Feed API script in the HEAD section of your page, plus define the "rssdata" option when calling new sagscroller(). All together, here's the full install instructions for the two RSS SAG scrollers you see above:

Step 1: Insert the below code in the <head> section of your page:

Select All

The above references the following a few external files plus two images, which you should download (right click, and select "Save As"):

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: Then, inside the BODY section of your page, to display the two RSS SAG scrollers, use the below example markup:

Select All

To customize the feed sources and how many entries within each source to display etc, look to the "rssdata" option within the initialization code of the HEAD section, for example:

var mysagscroller1=new sagscroller({
 id:'mysagscroller1',
 mode: 'manual',
 rssdata:{
  feeds: [
   ['CSS Drive', '
http://www.cssdrive.com/index.php/news/rss_2.0/']
  ],
 linktarget: '_new',
 displayoptions: 'date snippet',
 entries: 5 //<--no comma following last option
 },

 pause: 2500,
 animatespeed: 400 //<--no comma following last option
})

The "rssdata" option should be defined with the following sub options:

rssdata options
option Description
feeds An array containing one or more RSS feeds to show within the scroller. Each array element should be in the format: ["label", "full_url_to_feed"], for example:

  feeds: [
   ['CSS Drive', 'http://www.cssdrive.com/index.php/news/rss_2.0/']
  ],

or:

  feeds: [
   ['CSS Drive', 'http://www.cssdrive.com/index.php/news/rss_2.0/'],
   ['Yahoo News', 'http://rss.news.yahoo.com/rss/topstories''],
   ['BBC', 'http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml/'] //<-no comma!
  ],

The "label" field lets you specify the label associated with RSS entries from this feed when they are shown, and is also used when sorting the entries by label.

linktarget Sets the link target of the RSS entries. Standard HTML values such as "_blank" or "" supported.
displayoptions Sets which components of each RSS entry to show apart from the title itself. Enter one or more of the following keywords:  "date", "datetime", "label", "snippet", and/or "description". The difference between "snippet" and "description" is in the length of the description for each RSS entry shown, with the later being longer, and may include images.
groupbylabel Boolean that if set to true causes entries from the same source to be shown together. By default entries are shown based on their date (newest first), irregardless of their source.
entries Sets the number of entries for each RSS feed to show. The total number of entries shown then is the number of feeds multiplied by the number of entries specified.

There is another option, "refreshsecs", that can be used in conjunction with "rssdata" (or "ajaxsource" for that matter) to automatically get the contents of the RSS feeds again every x seconds. The following defines an RSS based SAG Scroller that automatically reloads the contents every 5 minutes:

var mysagscroller1=new sagscroller({
 id:'mysagscroller1',
 mode: 'manual',
 rssdata:{
  feeds: [
   ['CSS Drive', 'http://www.cssdrive.com/index.php/news/rss_2.0/']
  ],
 linktarget: '_new',
 displayoptions: 'date snippet',
 entries: 5 //<--no comma following last option
 },
 pause: 2500,
 refreshsecs: 60,
 animatespeed: 400 //<--no comma following last option
})

Do not set this option to too low a value, such as 5. It could mean unnecessary trips to the server, and in the case of the RSS option, may cause you to violate Google's TOS (by making too many requests to Google Ajax API in such a short time period). Also, note that Google Feed API has its own minimum time before it refreshes the specified RSS feeds, so there's no point to setting "refreshsecs" to too low a value.

Relevant CSS classes for styling a RSS based SAG Scroller

For RSS based SAG Scrollers, the description of each entry is wrapped in a DIV with CSS class "rsscontent", and the label following it a DIV with class "rsslabel". Inside sagscroller.css, the default styles for them are defined as follows:

.sagscroller ul li .rsscontent{ /*div containing body of each RSS entry*/
font-size:90%;
}

.sagscroller ul li .rsslabel{ /*div containing label of each RSS entry*/
margin-top:5px;
background: #eee;
font-size:12px;
clear: both;
}

Table Of Contents

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