Creating Dynamic RSS Feeds with Ajax [con't]
Displaying the RSS Feed
rssticker.js file so it can interact with the
bridge.php file. To do that, you need to place the following code within the head section of the page, which is between the
Be sure to leave the credits intact.
Creating the Feeds
The feeds can be placed inside a
div, with the body of the document (between the
<body></body> tags). This will be styled later using CSS. In the example above, the code looks like this:
divand gave it a class name of
feedClass. Then, we placed the title of each feed within a paragraph and gave each feed title a class name for styling purposes. (We'll discuss the CSS styling in the next section.)
Finally, we set up each feed to create a new instance of the
rssticker_ajax object, and gave each one specific parameters for displaying the feed. The parameters for each feed are:
rssticker_ajax(RSS_id, cachetime, divId, divClass, delay, optionalswitch)
- The array key of the RSS feed you set-up in the
- The length of time to cache the feed in seconds (0 for no cache).
- ID of the
divto display the ticker in. It is dynamically created by the script.
- Class name of the ticker, used for styling purposes.
- The amount of time between message changes, in milliseconds.
- The string used to control which parts of a feed item to display:
Let's look at how the first feed was created. In the
bridge.php file we have the following line in the array:
"WR" => "http://www.webreference.com/webreference.rdf",
To create the new instance of the
rssticker_ajax object on the Web page, we first entered
WR, which is the array key for this feed:
Next, we set the cache time at 1,200 seconds (20 minutes):
new rssticker_ajax("WR", 1200,)
We then specified the name of the ID of the dynamically created
new rssticker_ajax("WR", 1200, wrbox,)
The class name we used for styling was then entered:
new rssticker_ajax("WR", 1200, wrbox, wrclass,)
Next, we set the delay time:
new rssticker_ajax("WR", 1200, wrbox, wrclass, 7500,)
Finally, we used the
description switch to pull only that field, along with the title and link, from the RSS feed:
new rssticker_ajax("WR", 1200, wrbox, wrclass, 7500, "description")
Now, let's take a look at how we styled these feeds.
Styling the Feeds Using CSS
Here's the CSS we used for the feeds:
Let's stop for a moment and look at what's happening here. Once you understand the layout on the Web page, it will be easy to create your own.
First, we placed a link in the head section to the
rssticker.js file. This file interacts with the
bridge.php file, which in turn calls the
lastRSS.php file. Together, these files parse the RSS feed and format it for placement on our Web page. Then, we created the feeds on the page and used CSS to style them to fit in with the rest of the page/site design.
If you're wanting to place RSS feeds on your Web pages, and don't want to have to learn how to scrape pages, this method should work well. While these scripts only display one feed item from each list at a time, you can use the lastRSS script to format it in other ways. We'll look at some of those ways in a future tutorial.
If you're interested in Web development feeds, be sure to check out the Jupitermedia RSS feeds.
Original: July 18, 2008