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.


9 comments:

mupet said...

Nice articles, keep writing

Alaa Al-Hussein said...

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

Dawn said...

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

Uzbekjon said...

@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...

Anonymous said...

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

clayton said...

Nice plugin! I did encounter one potential problem. If the feed's URL includes a query string, the plugin does not work properly. My workaround was to replace url with encodeURIComponent(url) to the statement that creates gurl.

Anonymous said...

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

Uzbekjon said...

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

Jim Hanifen said...

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.

Post a Comment