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 + '
' + 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
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
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.
Updated — great suggestion Olivier. Don’t know how I’d forgotten about that!
David,
Is this the same script that you are using in the footer of your website to pull in your latest tweets?
Thanks!
@Charley C.: The very same one.
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.
Charley C: I’ve updated the ClientCide link. You can view the source code of my blog for another example usage of the plugin.
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).
Have you done something like this for the Facebook feed?
@Chris: No, I have not.
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?
Where is “setEvent” used? You mean addEvent?
my apologies, I attempted set event as a work around,
$(‘git’).addEvent(‘click’,function(e) {
as you wrote it