Google Ajax Feeds Fun

Often times when new things come out, I am aware of them, but for whatever reason, they don’t really click with me. I heard about Google’s Ajax libraries a while back and I remember thinking whoop-dee-freakin-doo.

Today, somehow, I ended up on the docs page for Google’s Ajax Feed API and it clicked.

On RailsTips, I show the latest quick tips (ruby and rails related links) in the footer on every page. I didn’t want to customize Mephisto to spit out the link list, so I set out to find a client-side solution. I ended up creating a Yahoo Pipe with a JSON callback to show the list on page load. This worked fine, but it annoyed me that I had to manually create a Yahoo Pipe each time that I wanted to do this on a site.

The Solution

Today, when I randomly ended up browsing the documentation, I realized that the Google Feed API would be a better solution for what I needed. In just a few minutes, I ended up with a really simple solution.

RailsTips.QuickTips = {
  load: function() {
    var feed = new google.feeds.Feed("http://feeds2.feedburner.com/railsquicktips/");
    feed.setNumEntries(12);
    feed.load(function(result) {
      if (!result.error) {
        var list = jQuery('#more_quick_links');
        for (var i=0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          list.append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>')
        }
      }
    });
  }
}

The Live Demo

No need to login to Yahoo Pipes, create a pipe and copy the URL. All I need to do now is just include Google’s AJAX Feed API and tell it which feed I would like to display. Of course, being the astute gentleman that I am, I created a demo for you to check out.

If you are curious about my previous solution, using a Yahoo Pipe, Snook just wrote a little bit on it, so feel free to head over there.

The ability to show feeds on a website using JavaScript is really cool. The possibilities are endless. Anything that is in feed form can now be shown on any site with no hardcore programming needed. Pretty crazy. Next you’re going to try tell me that in the future we can use multiple background images on a single element. Ha, you’re funny!