jQuery Twitter 'mini' plugin

Here's a little jQuery plugin for displaying a twitter feed into a web page. The goal was to put my latest 'tweets' on my blog, and also learn jQuery. Ended up making a 'mini' jQuery plugin that can easily be added into any web page.

Demo:

For the code:

$(function() {
  $('#tw').click(function() {
    $('#tw').twitter({'user':'al3xandr3','count':2});
  });
});
click me

The plugin is running on the sidebar of this blog under the 'ON TWITTER' title.

How It Works

It makes an Ajax request to twitter that returns json data of the feed. That data is then read and injected into the selected html element(s).

See in:

$.ajax({
  url: "http://twitter.com/status/user_timeline/" + settings.user + 
       ".json?count="+ (settings.count+1) +"&callback=?",
  dataType: 'json',
  success: function (data) {
  $.each(data, function (i, item) {
            
    //text
    $this.hide().append("<p id=" + item.id + ">" + 
                        replaceURLWithHTMLLinks(item.text) + 
                        "&nbsp&nbsp</p>").fadeIn('slow');
            
    //date
    if (typeof prettyDate(item.created_at) !== "undefined") {
      $("<br>").appendTo("#" + item.id); //line break
      $("<a>" + prettyDate(item.created_at) + "</a>").attr( {
        'href':   ('http://twitter.com/' + settings.user + 
                      '/status/' + item.id),
        'target': '_blank'
      }).css("font-size", "75%").appendTo("#" + item.id);
    }
  });}
});

jQuery is a very nice designed lib, simple and powerfull. Some say its just like a functional programming Monad.

Full source code is available in github: http://github.com/al3xandr3/jquery-twitter-plugin

No comments: