Creating Dynamic RSS Feeds with Ajax / Page 2

Creating Dynamic RSS Feeds with Ajax [con't]

Displaying the RSS Feed

Linking to the JavaScript File

In order to display the feed on the page, we need to execute the JavaScript code in the 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 <head></head> tags.

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:

First, we created a div and 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)

RSS_id: The array key of the RSS feed you set-up in the bridge.php file.
cachetime: The length of time to cache the feed in seconds (0 for no cache).
divId: ID of the div to display the ticker in. It is dynamically created by the script.
divClass: Class name of the ticker, used for styling purposes.
delay: The amount of time between message changes, in milliseconds.
optionalswitch: The string used to control which parts of a feed item to display: date or date+description.

Let's look at how the first feed was created. In the bridge.php file we have the following line in the array:

    "WR" => "https://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:

    new rssticker_ajax("WR",)

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

    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:

Review

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.

Conclusion

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

[prev]