I set about recently to try to get a RSS feed parsed using only Javascript. Not as easy as I had thought it would be. I had figured that there would be several Javascript library’s around, and I thought for sure that someone would have a jQuery plugin for it. Well, I did find jFeed, but it suffers from a rather large issue. It can’t access sites from a different domain from where it is running. This is really a Javascript security feature. I did a simple AJAX test, and sure enough, Javascript stops us from directly accessing another domain (to prevent cross site scripting attacks).

How do you get around this issue? Well, a php based proxy is one solution. You call via AJAX, this php file that then makes the request to the real feed, and sends it back. That didn’t seem like a simple or elegant enough solution.

I found RssToHtml, which is a PHP script that you can use the parse the RSS feed. Using this, you can even use an server side¬†include to get the feed. This¬†didn’t work on my machine¬†that would only¬†run cgi scripts from the include.¬†

I had just about given up when I stumbled upon the Google AJAX Feed Api. Google to the rescue again.

Note: for these examples, the simplest thing was to include an image example, not a running example inline. The WordPress editor (even in html mode) keeps sticking in formatting and killing the javascript. There are links to example pages.

The first thing I tried was a wizard that created feed code for you. It presents a cool little AJAX box that can rotate through a feed list. This is what it looks like for one feed (see example page also) :

This is what it looks like for multiple feeds (see example page also) :

But this still wasn’t quite what I wanted. It was a little too flashy. I really just wanted a list of posts, with links to them. I then found the API page (that I mentioned above) and some more basic examples.

This is what I got (see example page also) :

There we go. That is what I was looking for. Ok, so what do you have to do to get this same result? First you should get a google api key. If you are grabbing code from me, don’t use my google code. Get your own, or use “key=notsupplied-wizard” instead.

You really need three pieces. You need to point to the google search API:

Then you need the javascript that will do the work. I will explain it in a minute.

That javascript can be included in a head statement. It doesn't need to be inline with your presentation. Last, you need a DIV that the feed will show up in.

So you can see where I gave my feed url in the javascript. Change that to whatever you want the feed to be. The rest of the javascript is used to create some code on the fly. It is added to the div "feed". That can be any div you want. Just change the "document.getElementById("feed");" code to what ever your div is called instead of "feed".

The basic example on the site does not show links. I had to build that. The result that comes back is a json object that contains info about the feed. I discovered that for every "entry" there was not only a "title" but a "link". I used the "link" property to build an anchor tag to wrap the title. Now when the list is presented, a viewer can click on the text and go to the post. If you want to present more info, "publishedDate" and "content" are two other attributes you may want to use.

It works pretty well. Google caches the feeds too. Not sure how that is done, or how fast it is refreshed, but it sure is darn fast. I like it. Give it a try.