Thursday, April 13, 2006

Adding RSS Feeds to Blogger

Blogger is very cool! It's just so easy to setup a nice looking site, manage your content, and tweak your template until everything is just right.

Once I decided to resurrect this blog, I looked at my templated and decided to spice things up, a bit. In particular, I really wanted to make my links dynamic, so that they would automatically reflect my current interests and areas of research. Luckily, I already have this content on del.icio.us. The question is, how can I get it to automatically update in my sidebar. Adding an RSS feed from del.icio.us was the obvious answer. You can see the results on in the sidebar, on the right side of the page.

I started by looking around Blogger for the ability to add RSS feeds to my blog from the Settings tab. Imagine the ability to go to "RSS Feeds", add a feed by entering a name, a link, and a number of items to display, and having the feed show up in a pre-determined area on my site (e.g. the sidebar). No such luck.

My next thought was to find client-side solution to displaying a third-party RSS feed in Blogger. I found two general approaches: an AJAX-based solution and an on-demand JavaScript-based solution. I chose the AJAX solution. Why? I really wanted to play around with AJAX. I will probably end up giving the on-demand JavaScript approach a try, as well.

A quick search produced an article from AJAX Magazine about how to build an AJAX-based RSS reader, complete with sample code. Testing and fine-tuning the sample code on my local computer was a breeze and I was consuming my del.icio.us RSS feed in minutes.

However, when I plugged the AJAX code into my Blogger template and previewed the page, I received error messages... an no del.icio.us feed. What happened?

I soon discovered that for security reasons, the JavaScript XMLHttpRequest object, on which AJAX is largely based, is only allowed to make calls back to the originating domain. I read some of the debate about whether or not this security measure makes sense. But all debate aside, I just wanted to make my feed work!

I searched again and found a great article on XML.com that outlines three approaches to working around the originating domain limitation in the XMLHttpRequest object.

  • Write a proxy that runs on the originating domain that can be invoked by XMLHttpRequest (requires the ability to run scripts on the originating domain)
  • Use Apache mod_proxy (requires access to the Apache httpd.conf file)
  • Use on-demand JavaScript that can be invoked using an HTML <script> tag, bypassing the XMLHttpRequest object, alltogether.

Since I already had an AJAX RSS reader and I could only access a limited set of PHP functions on my host, I chose to write a proxy that can be invoked by the XMLHttpRequest object. A few more minutes, thanks to the sample code in the article, and my del.icio.us proxy was working!

It's a bit slow, since I haven't thought about caching the feed, either in the client or the proxy. Next, I'll add some simple caching to the proxy to test performance. I'll also test Feed2JS, a free, hosted on-demand JavaScript solution to embedding RSS feeds in Blogger.

2 comments:

tosin ajibowo's blog said...

Scottopia,

cool man and thanks for a piece like this on adding rss feeds to blogger.

one thing though, i still need additional help with the appropriate steps to follow like as in a-b-c to adding rss feeds to my blog such as in tweaking my html code stuff.

Thanks man & cheers

tosin (nigeria)
www.gsmsolutions.blogspot.com

Matthew Carleton said...

This is useful for my blog, http://theinsatiablevoid.blogspot.com/
I will have to look into it more. Thanks for the info.