19:09
Admin
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, we show you how to harness Google Ajax Feed API to fetch a RSS feed and display it on your site.
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.
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><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>
In this tutorial, we show you how to harness Google Ajax Feed API to fetch a RSS feed and display it on your site.
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.
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><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>
