One RSS Feed
One of the great things about using the Goggle Feed API method is that an API key is no longer required. If you have previously set up a Google Feed API method, you can now remove the call to your API key; however, it should continue to work just fine if you decide to keep the API key in your script. Just strip out the key equals section of the script as shown in the examples below. The second snippet below is added to the header of your web page.Previous script
Next, you will need to load the Feed API into the header of your web page with the google.load(module, version, package) where the module calls the specific API you wish to use on your page. In this case the version is the specific version number you wish to load ( 1), and the package indicates the specific elements package you wish to load, which in this case, is Feed. The example script Feed API is displayed in the snippet below.
For more information on google.load, check out the Google Loader Developer Guide.
If you are concerned with the version number getting updated or compliance, you can always check the Google AJAX API Discussion Group. Notifications of any version updates will be posted there along with any code changes that might require you to update your URLs. The nice think about the Google API is that their team periodically makes bug fixes and updates that do not require a version number change, and these remain mostly transparent; however, should you ever find that your API client is not working you may need to review or report any issues using the API discussion group.
Using the API
The first section of the script sets the variables ‘var' with the feed container getting the element by id equals feed. Then, the feed URL is declared and the feed limit is set to 10; the RSS output is set to a second level heading and starts an unordered list as displayed below. In this example, I will use the NPR Business News RSS feed URL of http://www.npr.org/rss/rss.php?id=1006 and set it to pull the last ten feeds, which is just one of over fifty NPR RSS Feeds.
var rssoutput="<h2>Latest NPR Business News:</h2><ul>"
The next section sets the function RSS feed setup (rssfeedsetup() ) with the variable feed pointer set to Google feeds (google.feeds.Feed(feedurl) ), the feed pointer set to the number of entries (feedpointer.setNumEntries(feedlimit) ), and then it loads the feed display (feedpointer.load(displayfeed) ).
var feedpointer=new google.feeds.Feed(feedurl)
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></li>"
alert("Error fetching feeds!")
And then the window onload function calls the RSS feed set up.
The following HTML goes within the body of the web page:
<h1>RSS Feeds Demonstration</h1>
<div id="feed"></div>Along with some styling including a box shadow and anchor hover styling, the resulting output for the NPR Business news feed is displayed in Figure B, as displayed in Chrome v 21.01.
The example HTML and CSS utilized in this demonstration is available for download.
The next segment on this topic will cover ways to pull multiple RSS feeds and how to implement dynamic feed control including customizations that control the way feeds are displayed.