Displaying Rss Feeds Easily Using Google Ajax Feed Api - Webmasters

Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,151,139 members, 7,811,206 topics. Date: Sunday, 28 April 2024 at 06:35 AM

Displaying Rss Feeds Easily Using Google Ajax Feed Api - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Displaying Rss Feeds Easily Using Google Ajax Feed Api (7503 Views)

Rss Feeds, How To Get It On My Blog / Nigerian Stock Exchange Api, Rss Feeds & Widgets :: / Nigerian Rss News Feeds (2) (3) (4)

(1) (Reply) (Go Down)

Displaying Rss Feeds Easily Using Google Ajax Feed Api by Nobody: 2:07am On Jan 08, 2009

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


<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


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)? "
"+thefeeds[i].content : /snippet/i.test(this.showoptions)? "
"+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.

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api by Nobody: 2:11am On Jan 08, 2009

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:


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


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

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api by Nobody: 9:47pm On Jan 08, 2009

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

Source code:

index.html


<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


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)? "
"+thefeeds[i].content : /snippet/i.test(this.showoptions)? "
"+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)
}

//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions"
//new rssdisplayer("adiv", "http://www.cssdrive.com/index.php/news/rss_2.0/", 5, "date, description"

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api by Nobody: 9:49pm On Jan 08, 2009

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

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api by switchmax8: 10:55am On Jan 09, 2009

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.

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api by Nobody: 6:49pm On Jan 09, 2009

switchmax8:

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.

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api by allimercy: 12:46am On Jan 12, 2009

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.

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api by Nobody: 1:53am On Jan 12, 2009

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.

Re: Displaying Rss Feeds Easily Using Google Ajax Feed Api by SkyeAyers: 6:34pm On Aug 12, 2021

I was glad to find this tutorial which teaches Displaying RSS feeds easily, I have been visiting serp api to find a solution to this for many years but I have not been able to find anything concrete.

(1) (Reply)

Hacking: How To Back Up Your Wordpress Site To Google Drive And Restore Easily / Most Effective Ways To Do SEO For A New Website Or Blog / Reasons Why You Should Date A Blogger

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 52
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.