Displaying Rss Feeds Easily Using Google Ajax Feed Api

Nairaland Forum | Technology | Webmasters (Moderators: OmniPotens, yawa-ti-de) | Displaying Rss Feeds Easily Using Google Ajax Feed Api

Pages: (1)

Author

Topic: Displaying Rss Feeds Easily Using Google Ajax Feed Api (Read 942 views)

*dhtml

Displaying Rss Feeds Easily Using Google Ajax Feed Api

« on: January 08, 2009, 02:07 AM »

Displaying RSS feeds easily using Google Ajax Feed API

Displaying RSS feeds from other sites (ie: CNN or Digg) on your own is a nice way to show constantly updated content automatically. However, for the novice web developer, setting this up can be daunting, requiring both knowledge from you and your server's ability to host remote files. Google's Ajax Feed API changes all that, by basically enabling any webmaster to display RSS feeds on their sites using some JavaScript code. It hosts the desired RSS feeds on their servers for you, caches them, and returns the data in either JSON or XML format for you to utilize. All that's left is for you to use some JavaScript to parse this data and output it on your page.

In this tutorial, I'll show you how to harness Google Ajax Feed API to fetch a RSS feed and display it on your site.

Let's do a simple one:

index.html

Code:

<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA0e8RGYZwE5URQWc4oWJ3phSyNZmDXr_GxMr9-NzSzWzH7atsohQVQ1v1TrWuygNorMyOX33Ai5fAqw">
</script>

<script type="text/javascript" src="rssdisplayer.js"></script>

<style type="text/css">
#msndiv{width: 500px;}
</style>
</head>
<body>
<hr>
<script type="text/javascript">
//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
new rssdisplayer("msndiv", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml", 6, "date, description")
</script>
<hr>

rssdisplayer.js

Code:

google.load("feeds", "1") //Load Google Ajax Feed API (version 1)

function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description")
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed, </div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}

rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}

rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="<a href=\"" + thefeeds[i].link + "\">" + thefeeds[i].title + "</a>"
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : /snippet/i.test(this.showoptions)? "<br />"+thefeeds[i].contentSnippet : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}

Get your own google key to replace the one i used. The result will be shown below.

I will not bother myself to explain how the rss class work. And by the way, do not mistaken that prototype u are seeing with the jquery prototype framework - this one here is the generic prototype we use in javascript to create classes.

A brief explanation is that - there are 2 scripts involves, our own rss display class, and the external google ajax engine.

To learn more about this technique, please follow this link: http://www.javascriptkit.com/dhtmltutors/googleajaxfeed.shtml
Anything, you do not understand - just bring it here - i will explain as best as i can.

Untitled-5.gif (40.99 KB, 650x699 ) Untitled-5.gif (40.99 KB, 650x699 )

*dhtml

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api

« #1 on: January 08, 2009, 02:11 AM »

The 3 minute setup

Because Google's Ajax Feed API takes care of the most gruelling work for you- fetching and hosting the desired RSS feeds to show, your job is merely to learn how to use JavaScript to access and display that information. Regardless of what you're trying to do with the resulting data, the core process is the same. Let me explain it in 3 simple steps:

Step 1: Get your own (free) Google API key instantly, by going to their signup page, and entering your site's domain. A key that is super-duper-long is generated that will work only for that domain. Link to that is http://code.google.com/apis/ajaxfeeds/signup.html

Step 2: Insert the following script in the HEAD section of your page, which first references Google Code API (required), then loads version 1 (currently the latest version) of Ajax Feed API:

Code:

<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>

<script type="text/javascript">
google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
</script>
</head>

Step 3: Now that you have access to Google Ajax Feed API on your page, all that's left is to use JavaScript to load the desired RSS feed, then retrieve and display the results in the desired manner. For example:

Code:

<div id="feeddiv"></div>

<script type="text/javascript">

var feedcontainer=document.getElementById("feeddiv")
var feedurl="http://rss.slashdot.org/Slashdot/slashdot"
var feedlimit=5
var rssoutput="<b>Latest Slashdot News:</b><br /><ul>"

function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl) //Google Feed API method
feedpointer.setNumEntries(feedlimit) //Google Feed API method
feedpointer.load(displayfeed) //Google Feed API method
}

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!")
}

window.onload=function(){
rssfeedsetup()
}

</script>

*dhtml

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api

« #2 on: January 08, 2009, 09:47 PM »

Take a look at this: http://www.mwebng.net/rss

Source code:

index.html

Code:

<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA0e8RGYZwE5URQWc4oWJ3phSyNZmDXr_GxMr9-NzSzWzH7atsohQVQ1v1TrWuygNorMyOX33Ai5fAqw">
</script>

<script type="text/javascript" src="rssdisplayer.js"></script>

<style type="text/css">
#msndiv{
width: 500px;
}
</style>
</head>
<body>
<hr>
<script type="text/javascript">
//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
new rssdisplayer("msndiv", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml", 6, "date, description")
</script>
<hr>

rssdisplayer.js

Code:

*dhtml

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api

« #3 on: January 08, 2009, 09:49 PM »

You will find the full tutorial on: http://www.javascriptkit.com/dhtmltutors/googleajaxfeed.shtml

switchmax8

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api

« #4 on: January 09, 2009, 10:55 AM »

Hello,
Can you teach me the coding for rss feeds and how to display it on a webpage?if yes,send me the details to my email wealthyemah@yahoo.com and what it takes.

*dhtml

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api

« #5 on: January 09, 2009, 06:49 PM »

Quote from: switchmax8 on January 09, 2009, 10:55 AM

Hello,
Can you teach me the coding for rss feeds and how to display it on a webpage?if yes,send me the details to my email wealthyemah@yahoo.com and what it takes.

I am wondering if what you want to do is different from this one. Maybe you are tryin to create an rss feed for yourself, if that is the case just say so - maybe i can make a tutorial for that - problem is, i am never really idle - even these posts i make on nl - i make them while working - so for that reason - i dont do private tutorial - if u wish to learn - say so - if you are looking for a script then go to the script service thread and make your request. If you are looking for a complete solution, you can either download or pay me to do it for you - i think i am being more than fair? and you can contact me directly through www.contact.mwebng.net - i am still keeping my email address secret on NL - some ppl are hell bent on filling my box with obscenities - and they are nairalanders too (shameful) - luckily those were caught by my filters.

allimercy

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api

« #6 on: January 12, 2009, 12:46 AM »

I think this also has been simplified by Google when it acquired Feedburner recently.

Go to feedburner.com( Now free) and insert your RSS url into it, you will have the html scripts that can be included to your web page and will be updated automatically from time to time.

*dhtml

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api

« #7 on: January 12, 2009, 01:53 AM »

This one that google made too - it has a wizard somewhere that will help you to generate the stuff if you dont know how to code.
I am here on NL to teach ppl wat i know best - and that is coding - which can solve ALL your problems if you know how to use it well.

I Need Constructive Review Of This Site, Please Forum Website This Picture Keeps Enlarging Page 2

Pages: (1)