Javascript RSS parser

November 28, 2011

When you want to feed something to your site, you usually end up using the other sites RSS feed.

This gives you three options, all of them having advantages and disadvantages.

A. Use PHP realtime

You can use PHP to retrieve the feed realtime, for each pageview, parse it, and return it to the user.

The bad thing with this approach is that 1. you need to fetch the file everytime, adding bandwidth, 2. The user will have to wait for you to download and parse the feed, some feeds can take many seconds before they have been downloaded.

B. Use PHP with cron

PHP retrieves, parses and saves the data to the server everytime cron calls on it. The good thing with this approach is you have searchable content, dating far back, and the user doesn’t have to wait on a third party server. The disadvantages are that you might not have cron available on your host, and you use up space (not much though).

C. Use Javascript with php

Javascript uses ajax to fetch a feed, because of domain restrictions though, you can only fetch documents from the same domain as the javascript resides on, the solution to this is adding a php proxy, which only fetches the rss feed and echos out the complete request, javascript then parses and displays the result for the user. Advantages, no need for cron, doesn’t use space and the user doesn’t have to wait on the thirdparty server because of asynchronous requests. Downsides, just as in example A. php will waste bandwidth on every pageview, user needs to have javascript enabled.

My goal with this project was to get an aggregated feed from multiple sources which would then be sorted chronologically correct.

Now usually I’d opt for alternative B. there’s more upsides than downsides with it. But I haven’t parsed RSS/XML with javascript before, so I thought I’d give it a go, in other words, I opted for alternative C., parse with javascript and proxying with php. When I started this I opted to only support “valid” RSS feeds, feeds that are formated like this, but I noticed some sites used atom instead of RSS (flickr for example) so I have limited support for it, though it shouldn’t be a problem to implement a more robust solution. (I didn’t plan on fighting with attributes in the XML, but because atom uses attributes on the link tag, I save the complete object instead.)

As for the PHP part I use a simple switch statement, if I’d only use a direct proxy, people would be able to browse “anonomously” through the proxy file. You can also limited the bandwidth and speed up the requests if you instead use either cron to fetch the real source and save it to the DB every, say, five minutes. In the example code I’ve choosen to just save the data to a php session (Don’t do this on a production server).

The socialplugin.prototype.js has been “optimized for” (read: Tested and developed for) the following four social media networks: Twitter, vimeo, youtube and flickr. I also added xboxlive (because I found a feed) but it hasn’t been tested that much.

Browser support atm: Internet Explorer 9, Firefox 6.0.2 and Chrome 15 (Haven’t tested it on anything else).

As always I’ll release the complete source code.

rssparser (41.43 kB)

This is the structure in the .zip document.

index.html – The document where you can view the final result, initialize JS script embedded.

output.php – The PHP “proxy”, proof of concept.

socialplugin.prototype.js – This prototype builds a table, sorts the data and outputs it to the user. (Frontend)

rssparser.prototype.js – This prototype parses the RSS/XML data. (Backend)

icons/

icons/twitter.jpg

icons/flickr.jpg

icons/youtube.jpg

icons/vimeo.jpg

icons/xboxlive.jpg

Aaand of course a live demo.

Tags