kuujinbo_dot_info

Posted 2009-08

Working on a project where the customer wanted to display RSS feeds. Initially figured just write a HTTP Handler and be done with it, when I stumbled upon Google AJAX Feed API. How easy can Google possibly make it???

Actually I didn't even have to read though all of the documentation, since there's a jQuery Google Feed Plugin written by Mike Alsup. So all I ended up doing was browsing through Google's Developer's Guide and Class Reference, then speding a couple of minutes on the jQuery Google Feed's Options and Manually Adding a Feed documentation sections. Mike Alsup has some of the most useful jQuery Plugins out there!

Step 1

Include the Google & jQuery plugin JavaScript files: 

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript' src='jquery.gfeed.js'></script>

Step 2

Choose your feeds - we're using SELECT, with each menu OPTION's value attribute storing the URL of each RSS feed we want: 

<select id='gfeeds_select'>
<option value=''>Select...</option>
<option value='http://feeds.feedburner.com/jquery/'>jQuery Blog</option>
<option value='http://feeds.feedburner.com/ajaxian'>Ajaxian</option>
<option value='http://www.maxdesign.com.au/feed/'>Max Design</option>
</select>
<div id='feeds' style='height:280px;padding:0;overflow:auto;'> 
</div>

Step 3

Use the jQuery magic: 

<script>
$(function(){
  $('#gfeeds_select').change(function(){
    var url = $(this).val();
    var txt = $(this).find('option:selected').text();
    // sanity check
    if (url && txt) {
      $('#feeds')
        .empty()
        .gFeed({  
          url:url, 
          title:null,
          max:20
        })
        .css({'margin':'0 0 12px 0'})
        ;
    }
  })
  .css({'margin':'8px 0'})
  ;
});
</script>

Documentation