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:
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:
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:
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: [ or: feeds: [ 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: