Display RSS Feed with jQuery & JSON
If you want to avoid having to cache your parsed RSS or Atom feeds, using JavaScript is a good alternative. By using the JSON feed available for some feeds, you will get the very latest updates as they happen.
This technique can be used for various RSS feeds, but in this example we will use my Google Reader shared items feed as an example. This is the example URL for the JSON feed: http://www.google.com/reader/public/javascript/feed/http://www.google.com/reader/public/atom/user%2F13279602483212565421%2Fstate%2Fcom.google%2Fbroadcast?callback=?. To use your own Google Reader shared items feed simply change the 20 digit numeric code to your own unique code in the URL.
To see this jQuery feed parsing in action (right-hand sidebar), please click here.
How to do it
1. Create an HTML page as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>RSS/Atom Feed Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://www.yourdomain.com/js/greader-json.js" type="text/javascript"></script> </head> <body> <div class="grJSON"> <!--// Google Reader shared items feed will be displayed here //--> </div> </body> </html>
From the above code you will notice that the jQuery framework has been called within the head of the HTML page, along with a file called greader-json.js. Also notice the empty div with the class grJSON. When the JSON feed is pulled in, it will be placed within this div.
2. Now we need to create the external JavaScript file to handle the JSON feed. In the above example the file is called greader-json.js.
$(document).ready(function() {
var url = "http://www.google.com/reader/public/javascript/feed/http://www.google.com/reader/public/atom/user%2F13279602483212565421%2Fstate%2Fcom.google%2Fbroadcast?callback=?";
$.getJSON(url,
function(data) {
for(var i = 0; i < data.items.length && i < 3; i += 1)
$('.grJSON').append('<li>' + '<h5>' + '<a href="' + data.items[i].alternate.href + '">' + data.items[i].title + '</a>' + '</h5>' + '<br />' + data.items[i].content);
$('.grJSON').append('<li>' + '<a href="http://www.google.com/reader/shared/yourusername">Subscribe to my Google Reader shared items »</a>' + '</li>');
$('.grJSON').wrapInner('<ul></ul>');
$('.grJSON').before("<h4>Articles I\'m Reading</h4>\n<br />");
});
});
3. From the above code, edit the following line of code by replacing the 20 digit numeric code with your own 20 digit numeric code. (You can use another RSS or Atom feed here but check that the feed is available in JSON format first):
var url = "http://www.google.com/reader/public/javascript/feed/http://www.google.com/reader/public/atom/user%2F13279602483212565421%2Fstate%2Fcom.google%2Fbroadcast?callback=?";
4. To control the number of items to display, change the following line of code (currently set to three):
for(var i = 0; i < data.items.length && i < 3; i += 1)
5. To include the feed URL for your shared items change the URL in the following piece of code:
$('.grJSON').append('<li>' + '<a href="http://www.google.com/reader/shared/yourusername">Subscribe to my Google Reader shared items »</a>' + '</li>');
Once you have personalised the greader-json.js file above, upload the HTML file, and the external JavaScript file (making sure you refer to the correct location on your server for the external JavaScript file within the HMTL file).
Credit & further reading: Ardoris
This is really very nice code!! Thanks for sharing.
Really cool, thank you very much for sharing
Does this work with the Facebook notifications RSS feed?
Hi Jeremiah, I haven’t tried it with a Facebook feed, but it should work. You would need to change the URL shown above in step 3 to the RSS feed you want to use. You would also need to end the URL string with
?callback=?as it shows in step 3.I’m too busy to give it a whirl, any chance of a functional demo?
I’ll try to get a demo up soon AJacks