|
|
|
Description: gAjax RSS Ticker
is a flexible RSS ticker that's extremely easy to set up to boot. Using the gAjax
RSS Displayer script engine, there's nothing to install or host on
your server. Furthermore, you can display results from multiple feeds
intermixed, sort them in a variety of ways, specify how many entries to
show at once, what portion of each entry to show etc.
Here's a summary of the features of this script:
-
Uses the gAjax RSS Displayer engine and 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.
-
Set the number of RSS entries to show at once (default is 1).
-
Specify which portions of each RSS entry to
show, such as its "
label", "date", "description", "snippet" and more.
- Supports multiple gAjax RSS ticker instances on the same
page.
Demo:
|
Example 1: (Single RSS feed, 10 entries, "date" field enabled, 1 entry per page
Example 2: (Two RSS feeds, 20 entries, "label", "datetime", and "snippet" fields enabled, 5 entries per page
|
Example 3: (Three RSS feeds, 8 entries, "datetime" and "snippet" fields enabled, 2 entries per page
|
Directions
Step 1: Insert the following code into the HEAD
section of your page:
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 (inherited
from gAjax Feed Displayer. No need to edit).
-
gajaxticker.js
(configure path to "loading" gif at the top)
-
 (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! 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
Below describes all the available methods at your disposal when
calling gfeedrssticker() class. Note that all except one of its
methods are inherited from the script
gAjax RSS Displayer, so if
you're familiar with that script, you'll feel right at home!
gfeedrssticker object and methods
| Constructor |
Description |
new gfeedrssticker("id", "cssclass,
pause,
"[optional_link_target]")Required |
Main gfeedrssticker() constructor function to
create a new instance of gAjax RSS Ticker.
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.
- pause: Integer that sets the pause between scrolling in
milliseconds (ie: 3000).
- [optional_link_target]: An optional parameter that lets
you set the link target for the RSS feed links.
Example:
var ticker=new gfeedrssticker("someid", "someclass",
2500, "_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:
instance.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: instance.displayoptions("datetime")
//eg2: instance.displayoptions("date label snippet")
//eg3: instance.displayoptions("datetime label description")
|
instance.setentrycontainer(TagName) |
Changes the element used to contain each RSS entry. By
default, it is a DIV element (<li>), so that
the RSS entries are individually wrapped in a DIV tag. You can, for example, pass
in "li" or "p" so the entries are
each wrapped around a DIV or P, respectively.
Parameter:
- TagName: Name of the HTML element you wish to encase each
RSS entry using. Default is "
div".
Examples:
//eg1: instance.setentrycontainer("li")
//eg2:
instance.setentrycontainer("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.entries_per_page(int)
Note: Non inherited method |
Sets the number of entries to show at once (per page).
Default is 1.
Parameter:
- int: An integer specifying the number of entries to
show per page. This value should obviously be smaller than the total
number of entries to show (see above).
Examples:
//eg1: instance.entries_per_page(2)
|
instance.init()Required |
Call this function at the very end to initialize the
gAjax RSS Ticker using the above settings. |
Styling the RSS Ticker
Every aspect of each RSS Pausing Ticker can be styled using
CSS. Structurally the ticker looks like this:
Main ticker DIV container
RSS entry 1
RSS entry 2
RSS entry 3
And so on...
The main purple DIV can be styled through the "id"
and/or "classname" attributes you assigned when calling
gfeedrssticker(). Then there are the yellow containers, defined using the
setentrycontainer() method (defaults to "div") and is
wrapped around each RSS entry individually. So for example, by calling
setentrycontainer("p") each yellow container is now a paragraph, and can
be accessed via the CSS:
#tickerid p{
background-color: yellow;
}
Of if you've called setentrycontainer("li")
instead, the yellow boxes can be style using:
#tickerid ul{
background-color: yellow;
}
#tickerid ul li{
margin-bottom: 5px;
}
Now, within each yellow box, you can style the various
components of the RSS entry via the CSS classes ".titlefield", ".labelfield",
".datefield".
|
XML and RSS