TwitterGitter

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.

Note: TwitterGitter requires Aaron Newton’s JSONP plugin which you may download here.

Download in Package Debut Article Example Usage

 

Plugin Code (Version 1.0)

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,'$1').replace(/(^|\s)@(\w+)/g,'$1@$2').replace(/(^|\s)#(\w+)/g,'$1#$2');
	}
});

/* 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: '' + user.name + ' ' + user.name + '
' + tweet.text + '
' + tweet.created_at + ' via ' + tweet.source.replace("\\",'') + '', 'class': 'tweet clear' }).inject('tweets-here'); }); } }).retrieve(); }); });

Options & Events

  • count: (defaults to 2) The number of tweets you would like returned.
  • sinceID: (defaults to 1) The baseline for the tweets to be returned.
  • link: (defaults to true) Want the class to linkify URLs, @ replies, and #topics?
  • onRequest: The function to execute when the TwitterGitter request is made.
  • onComplete: The function to execute when the TwitterGitter request is complete. This is where you want to put your tweet formatting.

Methods

retrieve

myGitter.retrieve();
  • Returns the twitter tweets object and a shortcut user object

Code Revisions & Bug Fixes

None.

Comments

  1. olivier

    Hey thanks for that plugin, exactly what I was looking for. However, it took me a while to figure what “JsonP” was. By looking at the code I understood it performed cross-domain JSON request and I remembered there was something like that on Clientcide, bingo. You should write it somewhere in the comments or something, because it may not be that obvious to everyone. Thanks again, going to save a lot of time.

  2. David Walsh

    Updated — great suggestion Olivier. Don’t know how I’d forgotten about that!

  3. Charley C.

    David,

    Is this the same script that you are using in the footer of your website to pull in your latest tweets?

    Thanks!

  4. David Walsh

    @Charley C.: The very same one.

  5. Charley C.

    Thanks. I have two questions:

    http://clientside.com/js – That link isn’t working…Is there a specific file I’m looking for on that page? I recall seeing two items listed JSONP.
    I downloaded the TwitterGitter script from the download package page. I’m really not sure how to implement this into my page or how to tell the script my Twitter username. I looked at the Example usage but couldn’t figure out how to run this. I would like to show only my latest tweet on my page, I don’t need to show my username or anything else.

  6. David Walsh

    Charley C: I’ve updated the ClientCide link. You can view the source code of my blog for another example usage of the plugin.

  7. Charley C.

    Thanks David. I was able to get this working on my site after taking a look at your source code. I have two questions:

    Using the format that you did, if I want to show the 5 latest tweets, besides the count variable, what else would I need to update?
    I’m trying to figure out how the tweet is formatted in the html page – is it just placed in the div as so: <div id=”first-tweet”>My Tweet Here</div> ? I tried putting a paragraph tag around it and it wouldn’t format to my css. I see that there is a span tag around it in this line: html: ‘<span>’ + tweet.text + ‘</span>’(I tried replacing the span tag with p).

  8. Chris

    Have you done something like this for the Facebook feed?

  9. David Walsh

    @Chris: No, I have not.

  10. Andy

    Hi David,

    this works fine with mootools v1.2

    however with versions after 1.2 i get the error “Uncaught TypeError: Object [object Object] has no method ‘setEvent’”

    from line: $(‘git’).setEvent(‘click’,function(e) {

    how would i get around that?

  11. David Walsh

    Where is “setEvent” used? You mean addEvent?

  12. Andy

    my apologies, I attempted set event as a work around,

    $(‘git’).addEvent(‘click’,function(e) {

    as you wrote it


Be Heard!

Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!

Name*:
Email*:
Website: