Wednesday, May 27, 2009

Google Feeds API - jQuery plugin

This jQuery plugin utilizes Google’s Feeds API and builds an abstraction layer that makes Google feed API easier to use for jQuery developers. The advantage of using this lightweight jQuery plugin is that you don’t have to learn and go through new API documentation.

Download Google Feed API jQuery plugin – jGFeed.

Here is how to use the plugin:

$.jGFeed('http://feeds.feedburner.com/jQueryHowto',
function(feeds){
  // Check for errors
  if(!feeds){
    // there was an error
    return false;
  }
  // do whatever you want with feeds here
  for(var i=0; i<feeds.entries.length; i++){
    var entry = feeds.entries[i];
    // Entry title
    entry.title;
  }
}, 10);

Available plugin arguments list:

jQuery Google Feed API plugin lets you specify the following settings:

  • url – URL of the feed that you want to load
  • callback – callback function to call after RSS feed is loaded
  • num (optional) – number of blog entries to load (defaults to 3)
  • key (optional) – Google API key to use while loading RSS feeds.

The plugin returns false if there was an error while AJAX loading your feed or the following feed object on success:

{
  "title":"Blog Title",
  "link":"http://www.example.com",
  "author":"Author Name",
  "description":"Blog description.",
  "type":"RSS type (atom10, etc.)",
  "entries":[
    {
      "title":"Blog entry title 1",
      "link":"http://www.example.com/entry-1.html",
      "author":"Post Author Name",
      "publishedDate":"Mon, 25 May 2009 07:07:00 -0700",
      "contentSnippet":"Short blog post snippet ...",
      "content":"Longer snippet of the blog post",
      "categories":[
        "category 1",
        "category 2",
        "category 3"
      ]
    },
    {
      "title":"Blog entry title 2",
      "link":"http://www.example.com/entry-2.html",
      "author":"Post Author Name",
      "publishedDate":"Mon, 25 May 2009 07:07:00 -0700",
      "contentSnippet":"Short blog post snippet ...",
      "content":"Longer snippet of the blog post",
      "categories":[
        "category 3",
        "category 2",
        "category 1"
      ]
    },
    ...
}

If you don’t specify a URL it will also return false. If you want to use your own Google Feed API key you can get one here.

14 comments:

  1. Nice and simple code. Thanks for this great code.
    I am waiting for more from you.

    ReplyDelete
  2. Is there a way to specify more than one feed for this?

    ReplyDelete
  3. @Dawn, Currently you can specify only one URL, but you can easily rewrite the plugin code to take more than one URL and combine their entries...

    ReplyDelete
  4. Thank you fot this code.
    Just a question : could we use the element "image" of channel ?

    ReplyDelete
  5. This is very good code. Thank you for providing it.

    ReplyDelete
  6. @Anonymous, you can investigate the returned object and see if there is a channel image there.

    ReplyDelete
  7. Clayton, thanks so much for your comment, I was having the exact same problem with passing query strings. Adding encodeURIComponent(url) was such an easy fix.

    ReplyDelete
  8. Hi Clayton, very mice plugin.
    Would there any caching happening on the client side as my rss are not being refreshed, although when I browse the original (not google sourced) RSS its miles different.

    Thanks.
    George

    ReplyDelete
  9. Is there any reason this wouldn't work on internal servers?

    ReplyDelete
  10. is it possible that this doesn't work with facebook rss?? If I use a facebook rss url it just says "data.responseData is null
    fnk.call(this, data.responseData.feed); "

    Doesn't happen if I use any other rss

    ReplyDelete
  11. Yes, another thanks to Clayton - I was having the same trouble.

    ReplyDelete
  12. It seems to be stripping the target=_blank code from my links inside the description when calling entry.content. Is there any way to change this?

    ReplyDelete