YJL: jQuery lifestream plugin

I found this jquery-lifestream plugin on GitHub and it’s fairly easy to use, here is a quick example of my blog feed, GitHub, and Google Code updates:

It already has support for more 20 or 30 services (it’s a long list, didn’t count), and you can write your template for layout which fits in with your design. The following code is the setup, you can see I add blog post author name for the output:

$("#lifestream").lifestream({
  limit: 15,
  list: [
    {
      service: "blogger",
      user: "yjlv",
      template: {
        posted: '${author.name} posted <a href="${origLink}">${title}</a>'
      }
    },
    {
      service: "github",
      user: "livibetter"
    },
    {
      service: "gcode",
      user: "http://code.google.com/feeds/u/115422682039760465813/updates/user/basic"
    }
  ]
});

You can even add more services without adding to the original code. For example, it does not support Google Code but you can see I have the updates from my Google Code account listed above. The updates on Google Code uses Atom feed, but jquery-lifestream doesn’t support it. But that’s fine, because you can easily expand jquery-lifestream:

(function($) {
  $.fn.lifestream.feeds.gcode = function( config, callback ) {

    parseFeed = function( input ) {
      var output = [], list, i = 0, j;
      if(input.query && input.query.count && input.query.count > 0) {
        list = input.query.results.entry;
        j = list.length;
        for( ; i<j; i++) {
          var item = list[i];

          output.push({
            url: config.user,
            date: new Date( item.updated ),
            config: config,
            html: item.title.content
          });
        }
      }
      return output;
    };

    $.ajax({
      url: $.fn.lifestream.createYqlUrl('select * from atom where url="'
        + config.user + '"'),
      dataType: 'jsonp',
      success: function( data ) {
        callback(parseFeed(data));
      }
    });

  };
})(jQuery);

You can rewrite the parser, do some advanced tasks, such as filter or extraction of some data from feed. For example, you can use jQuery to parse the html and extract the image, so it can be used as thumbnail. If you know about JavaScript, you can enrich the results easily.

I think this can be used in many cases and it doesn’t have to be your contents. You can add some blogroll, photo collection of multiple Flickr account, or updates from all kinds of social networkings for a project. Or just a gadget for your blog, which gathers your photos, tweets, etc. It can keep your blog or webpage cleaner.

1 comment: