David Walsh Blog

MooTools TwitterGitter Plugin

Everyone loves Twitter. Everyone loves MooTools. That’s why everyone should love TwitterGitter, a MooTools plugin that retrieves a user’s recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of tweets to retrieve and returns an object containing the data provided by Twitter.

Twitter’s Response Object


JsonP.requestors.request_0.handleResults(
	[
		{
			"created_at":"Mon Feb 09 23:38:33 +0000 2009",
			"user": {
				"description":"",
				"url":"http:\/\/davidwalsh.name",
				"name":"davidwalshblog",
				"protected":false,
				"followers_count":639,
				"profile_image_url":"http:\/\/s3.amazonaws.com\/twitter_production\/profile_images\/57860553\/footer-logo_normal.jpg",
				"location":"Madison, WI, US",
				"screen_name":"davidwalshblog",
				"id":15759583
			},
			"in_reply_to_user_id":null,
			"in_reply_to_status_id":null,
			"in_reply_to_screen_name":null,
			"truncated":false,
			"text":"Just got home from work.  Enjoying a Heineken.  Going to write some articles.",
			"id":1193654096,
			"favorited":false,
			"source":"<a href=\"http:\/\/www.netvibes.com\/subscribe.php?module=Twitter\">Netvibes<\/a>"
		},
		{
			"in_reply_to_screen_name":null,
			"user": {
				"description":"",
				"screen_name":"davidwalshblog",
				"followers_count":639,
				"url":"http:\/\/davidwalsh.name",
				"name":"davidwalshblog",
				"protected":false,
				"profile_image_url":"http:\/\/s3.amazonaws.com\/twitter_production\/profile_images\/57860553\/footer-logo_normal.jpg",
				"location":"Madison, WI, US",
				"id":15759583
			},
			"created_at":"Mon Feb 09 21:58:00 +0000 2009",
			"truncated":false,
			"favorited":false,
			"in_reply_to_user_id":null,
			"text":"Yep, it's decided...writing articles tonight.",
			"id":1193352388,
			"in_reply_to_status_id":null,
			"source":"web"
		},
		//....
	]
);

Above is a sample of what is returned by Twitter.

The MooTools Plugin


var TwitterGitter = new Class({
	
	//implements
	Implements: [Options,Events],

	//options
	options: {
		count: 2,
		sinceID: 1,
		link: true,
		onRequest: $empty,
		onComplete: $empty
	},
	
	//initialization
	initialize: function(username,options) {
		//set options
		this.setOptions(options);
		this.info = {};
		this.username = username;
	},
	
	//get it!
	retrieve: function() {
		new JsonP('http://twitter.com/statuses/user_timeline/' + this.username + '.json',{
			data: {
				count: this.options.count,
				since_id: this.options.sinceID
			},
			onRequest: this.fireEvent('request'),
			onComplete: function(data) {
				//linkify?
				if(this.options.link) {
					data.each(function(tweet) { tweet.text = this.linkify(tweet.text); },this);
				}
				//complete!
				this.fireEvent('complete',[data,data[0].user]);
			}.bind(this)
		}).request();
		return this;
	},
	
	//format
	linkify: function(text) {
		//courtesy of Jeremy Parrish (rrish.org)
		return text.replace(/(https?:\/\/\S+)/gi,'<a href="$1">$1</a>').replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g,'$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
	}
});

Note: you will need to download Aaron Newton’s JSONP plugin here.

Parameters include:

Options of the TwitterGitter class include:

Events include:

Sample Usage


window.addEvent('domready',function() {
	$('git').addEvent('click',function(e) {
		e.stop();
		$('tweets-here').set('html','');
		//get information
		var myTwitterGitter = new TwitterGitter($('username').value,{
			count: 5,
			onComplete: function(tweets,user) {
				tweets.each(function(tweet,i) {
					new Element('div',{
						html: '<img src="' + user.profile_image_url.replace("\\",'') + '" align="left" alt="' + user.name + '" /> <strong>' + user.name + '</strong><br />' + tweet.text + '<br /><span>' + tweet.created_at + ' via ' + tweet.source.replace("\\",'') + '</span>',
						'class': 'tweet clear'
					}).inject('tweets-here');
				});
			}
		}).retrieve();
	});
});

Make sure to check out the demo. If you happen to use this, be sure to post a link — I’d love to see what you’ve done. Happy tweeting!