Software

Aggregate multiple RSS feeds with customized display features

Ryan Boudreaux demonstrates how to aggregate RSS feeds and create some customized display features using several scripts from Dynamic Drive and the Google AJAX Feed API Dynamic Feed Control.
Last week, I covered setting up a single RSS Feed Using Google Feed API and JavaScript and included a download file of the demonstration. In this segment, I will review aggregating RSS feeds from multiple sources and also creating some customized display features using several scripts from Dynamic Drive and the Google AJAX Feed API Dynamic Feed Control.

Dynamic Drive examples

Let's say you want to aggregate news from multiple RSS feed sources onto one web page. There are several tools and scripts available that take you beyond the single RSS feed demonstrated in the previous post; the first example includes a set of scripts from Dynamic Drive.

The first example is the XML- and RSS-based gAjax RSS Feeds Displayer, which allows you to specify multiple RSS feeds to display with the results intermixed, and includes options to sort them based on date, title, or a custom label assigned to each feed source. Examples include a single RSS feed with 10 entries, sorted by date and displayed in an unordered list, another example displays three RSS feed sources with 9 entries, sorted by source, then by date, and includes a description snippet. The RSS Feed Displayer includes a JavaScript file gfeedfetcher.js and code script snippets for placement within the head and body of the web page document along with the script calling for the Google API within the head as well.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

A modified snippet of HTML and JavaScript code is displayed below for the three RSS feed sources.

<h3>Example 3: (Three RSS feeds, 9 entries, "<code>datetime</code>" and "<code>snippet</code>" fields enabled, sort by <code>date</code>, display as <code>p</code>)</h3>
<h4>BBC Front Page News <br />MSNBC News<br />Yahoo News Top Stories</h4>
<script type="text/javascript">
var newsfeed=new gfeedfetcher("example3", "example3class", "_new")
newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed
newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed
newsfeed.displayoptions("label datetime snippet") //show the specified additional fields
newsfeed.setentrycontainer("p") //Display each entry as a paragraph
newsfeed.filterfeed(9, "label", "date") //Show 9 entries, sort by date
newsfeed.init() //Always call this last
</script>
The resulting quick and dirty output is displayed in Figure B from Chrome v 21.01 below, and of course, with more effort some styling could be added.

Figure B

Click to enlarge.

Another RSS feed from Dynamic Drive is the gAjax RSS Ticker, which allows multiple RSS feeds to display in a ticker instance allowing sorting by date, title, or label. And you can add each entry to show a label, date, date time, and description as well. Both of these Dynamic Drive RSS feed displayers including the code for HTML, CSS, and js files can be found on their website links listed above.

Google AJAX Feed API with Dynamic Feed Control

What I am really excited about is the functionality and options available with the Google Dynamic Feed Control, which in effect, is a fancy slide show tool for displaying RSS feeds. The options for implementation include the ability for you to set the number of results, the display time, fadeout time, disable the scrolling or fadeout feature, link the entries, set the results to horizontal or vertical mode, create a stacked vertical mode, and advanced CSS styling.

The straightforward format for adding this feature to your site involves three steps: first is loading the AJAX feed API and the Dynamic Feed Control, second is defining a location on the page for the feed control, and lastly, you create a GFdynamicFeedConrol and then you bind it to the web page.

#1 Load the AJAX feed API and the Dynamic Control Feed

Since a Google API key is no longer necessary, you simply add in these two lines of script code inside your <head>:

<!-- Scripts  -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
#2 Define where on the page you're going to place the slide show

Typically this is a <div> element, which is assigned an id="feedControl". You can have more than one slide show on the same page; the typical code looks like the sample below and is added to the body of my index.html file.

<div id="feedControl">Loading...</div>

Set your styling, if any, for the container and the elements and attributes enclosed within. I've added the following styles based on the Google API results. These are added to a CSS file I named gstyles.css, and these demonstration files are included in a download available at the bottom of this article.

#feedControl {
       width : 580px;
       height : 220px;
       padding: 8px 10px;
}
.gfg-title {
       font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
       font-size: 1.7em;
       color:#666;
       margin: -5px;
}
.gf-title {
       font-family::"Courier New", Courier, monospace;
       font-size: 1em;
       font-weight: 500;
       color: #900;
}
.gf-list {
       font-family: Verdana, Geneva, sans-serif;
       font-size: .85em;
       margin-top: 5px;
       color: #555;
       margin-bottom: 6px;
}
.gf-relativePublishedDate {
       font-weight:bold;
}
.gf-snippet {
       font-family: Verdana, Geneva, sans-serif;
       margin-bottom: 15px;
       color: #555;
       font-size: 1em;
       line-height: 1.3em;
}
#3 Create and configure the Dynamic Feed Control using the JavaScript function loadFeedControl.

In this example I am pulling from the NPR World News feed.

<script type="text/javascript">
  function loadFeedControl() {
    var feed  = "http://www.npr.org/rss/rss.php?id=1004";
    var fg = new GFdynamicFeedControl(feed, "feedControl");
  }
  /**
   * Use google.load() to load the AJAX Feeds API
   * Use google.setOnLoadCallback() to call loadFeedControl once the page loads
   */
  google.load("feeds", "1");
  google.setOnLoadCallback(loadFeedControl);
</script>
The resulting output (Chrome v 21.0.1) is displayed in Figure C below:

Figure C

By default the top four results for the given feed are displayed by the Dynamic Feed Control; the top of the feed displays the scrolling results at a timed interval of 5 seconds and includes the title and link, relative publish date, and a description of the text content. The four feed result titles and hyperlinks are displayed under the featured scroll.

Want to add another RSS feed to the same page? Just add in a new <div> with a unique id and create a new loadFeedControl with a new id. For example, let's say we want to add in an RSS Feed pulling results for iPhone5 using the Google news feed http://news.google.com/news?pz=1&cf=all&ned=uk&hl=en&q=iPhone5&cf=all&output=rss, the new <div> would look something like this:

  <div id="feedControlTwo">
  <p>Loading...</p>
  </div>

Make sure to add #feedControlTwo to your CSS for the styling.

And the loadFeedControl would look something like this:

 <script type="text/javascript">
  function loadFeedControl() {
    var feed  = "http://news.google.com/news?pz=1&cf=all&ned=uk&hl=en&q=iPhone5&cf=all&output=rss";
    var fg = new GFdynamicFeedControl(feed, "feedControlTwo");
  }
  /**
   * Use google.load() to load the AJAX Feeds API
   * Use google.setOnLoadCallback() to call loadFeedControl once the page loads
   */
  google.load("feeds", "1");
  google.setOnLoadCallback(loadFeedControl);
  </script>
The result is displayed in Figure D (Chrome v 21.0.1) below:

Figure D

The next segment in this series will review other options you can incorporate into your Dynamic Feed Control to modify the functionality including altering the number of results displayed, alter the display time of the featured result, modify the fadeout time, or disabling the scrolling on fadeout -- and other advanced features such as horizontal mode, and stacked vertical mode.

Download the code used in this segment.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks