For a current project, we had to implement a custom Twitter widget. After some time searching the web, I found this article on David Walsh’s Blog. Even if its a bit outdated, it did the trick.

Based on the old class, I present the updated and extendend version!

var TwitterWidget = new Class({

	Implements: [Options, Events],

	options: {
		count: 3,
		insertElement: null,
		actionSeparator: '<span class=\"tweet_actions_separator\">.</span>',
		dateFormat: '%e %b'
	},

	initialize: function(username, options) {
		this.setOptions(options);
		this.username = username;
	},

	getTweets: function() {
		new Request.JSONP({
			url: 'http://api.twitter.com/1/statuses/user_timeline.json',
			data: {
				screen_name: this.username,
				count: this.options.count
			},
			onComplete: function(data) {
				data.each(function(tweet) {
					tweet.text = this.linkify(tweet.text);
				}, this);
				this.fireEvent('fetchComplete', [data]);
				this.insertTweets(data, this.options.insertElement);
			}.bind(this)
		}).send();
		return this;
	},

	linkify: function(tweet) {
		//totally stolen from Jeremy Parrish / David Walsh
		return tweet.replace(/(https?:\/\/\S+)/gi,'<a href="$1">$1</a>')
					.replace(/(^|\s)@(\w+)/g,'$1<a href="https://twitter.com/$2">@$2</a>')
					.replace(/(^|\s)#(\w+)/g,'$1<a href="https://search.twitter.com/search?q=%23$2">#$2</a>');
	},

	insertTweets: function(tweets, element) {
		if (element == null) {return;}
		tweets.each(function(tweet) {
			var tweetDate = Date.parse(tweet.created_at)
			var tweetContainer = new Element('div', {
				html: '<span>' + tweet.text + '</span>',
				'class': 'tweet'
			});
			new Element('div', {
				html: '<a href=\"https://twitter.com/' + this.username + '/status/' + tweet.id_str + '\">' +
					 tweetDate.format(this.options.dateFormat) + '</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/tweet?in_reply_to=' + tweet.id_str + '\">reply</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/retweet?tweet_id=' + tweet.id_str + '\">retweet</a>' +
					 this.options.actionSeparator +
					 '<a href=\"https://twitter.com/intent/favorite?tweet_id=' + tweet.id_str + '\">favorite</a>',
				'class': 'tweet_actions'
			}).inject(tweetContainer);
			tweetContainer.inject(element);
		}, this);
		this.fireEvent('insertComplete');
	}

});

Usage

Let’s say you have the following HTML snippet,

<div id="twitter_container">
</div>

and you want your recent 5 tweets in this container, then simply use the following code:

var widget = new TwitterWidget('yourveryownusername', {
    insertElement: $('twitter_container'),
    count: 5
}).getTweets();

But what if you don’t like the date format and want an other separator between reply, retweet and so on? No problem.

var widget = new TwitterWidget('yourveryownusername', {
    insertElement: $('twitter_container'),
    count: 5,
    dateFormat: '%B-%d-%Y',
    actionSeparator: '|'
}).getTweets();

(for the date format options head over to http://mootools.net/docs/more/Types/Date#Date:format)

That’s it! Simple.
But be aware that you need to add the Request.JSONP and the Date module if you are using Contao. These two things are not included in the Mootools-More pack by default.

On this page, you can see how it could look like on your website.

Have fun, and oh, please let me know if this could come in quite handy on any project you’re working on.