How to Add Rss Feed Using Google Web Designer

Ryan Boudreaux explains how to use the Google Feed API and JavaScript to display an RSS feed on a website.

You or your client's website might require displaying links to current events and news from local, national, or international sources. With Really Simple Syndication also known as Rich Site Summary (RSS), you can provide linking to recent updates from websites that provide the RSS service. Typically most Internet users that receive RSS feeds utilize an RSS reader or news aggregator to keep up to date on their favorite websites or news resources, either from within their desktop, web-based device, or mobile-based device. This series will demonstrate several approaches in which you can present RSS feeds from one source or more using simple JavaScript and the Google Feed API method. Browser support for the Google Feed API currently includes Chrome, Firefox 1.5+, IE6+, Opera 9+, and Safari.

One RSS Feed

Consider adding an RSS feed to your website using this simple model for the Google Feed API, the instructions include explanations of the API's configurable JavaScript components.

Load the JavaScript API

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

<script type="text/javascript" src="http://www.google.com/jsapi?key=%Your-API-Key%">

</script>

Current script

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

</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.

<script type="text/javascript">

   google.load("feeds", "1")

</script>

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

Next, we need to add the Google Feed API to the body of our web page, and this requires an asynchronous call to a server with a callback to exchange the data between the feed URL (through loading the feed using feedurl) and RSS output (rssoutput variable function). The next code snippet is modified and inspired by JavaScript Kit, in particular the DHTML and DOM reference to RSS feeds.

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.

<script type="text/javascript">

var feedcontainer=document.getElementById("feed")

var feedurl="http://www.npr.org/rss/rss.php?id=1006"

var feedlimit=10

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) ).

function rssfeedsetup(){

var feedpointer=new google.feeds.Feed(feedurl)

feedpointer.setNumEntries(feedlimit)

feedpointer.load(displayfeed)

}

If there is an error displaying any of the RSS feed the JavaScript alert message, "Error fetching feeds!" gets displayed.

function displayfeed(result){

if (!result.error){

var thefeeds=result.feed.entries

for (var i=0; i<thefeeds.length; i++)

rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></li>"

rssoutput+="</ul>"

feedcontainer.innerHTML=rssoutput

}

else

alert("Error fetching feeds!")

}

And then the window onload function calls the RSS feed set up.

window.onload=function(){

rssfeedsetup()

}

</script>

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.

Figure B

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.

How to Add Rss Feed Using Google Web Designer

Source: https://www.techrepublic.com/blog/web-designer/how-to-work-with-rss-using-google-feed-api-and-javascript/

Share this post