Mar 4th 2010 × Getting latest tweets through mootools JSONP
Nothing like being egocentric so here’s what you can do to add latest tweets of a particular user to your site through mootools. This class totally `forked` from a post by AppDen (Scott Kyle) so feel free to give him some love, he deserves it for being such a bright spark. You can also “play” with this live on JSFiddle
Request.twitterAPI = new Class({
// return json data with latest tweets form a particular user
Extends: Request.JSONP,
options: {
target: $empty(),
tweetBits: {
textClass: "tweetBody",
dateClass: "tweetDate"
},
maxTweets: 4,
autoLink: true,
url: "http://twitter.com/statuses/user_timeline/{user}.json"
},
initialize: function(user, options) {
this.parent(options);
this.options.url = this.options.url.substitute({user: user});
this.element = document.id(this.options.target);
if (!this.element)
return;
this.element.set("html", "Loading tweets...");
},
success: function(data, script) {
this.element.empty();
this.parent(data, script);
},
showPost: function(post) {
var creationDate = Date.parse(post.created_at).format("%x %X");
new Element("div", {
"class": this.options.tweetBits.textClass,
"html": this.options.autoLink ? this.linkify(post.text) : post.text
}).adopt(new Element("div", {
"class": this.options.tweetBits.dateClass,
"html": creationDate // + " via " + post.source.replace("\\",'')
})).inject(this.element);
},
addPosts: function(response) {
if (!response.length || !this.element)
return;
response.each(function(post, i) {
if (i < this.options.maxTweets)
this.showPost(post);
}.bind(this));
},
linkify: function(text){
// modified from TwitterGitter by David Walsh (davidwalsh.name)
// courtesy of Jeremy Parrish (rrish.org)
return text.replace(/(https?:\/\/[\w\-:;?&=+.%#\/]+)/gi, '$1')
.replace(/(^|\W)@(\w+)/g, '$1@$2')
.replace(/(^|\W)#(\w+)/g, '$1#$2');
}
});
// create an instance
new Request.twitterAPI("D_mitar", {
target: "myTweets", // target element to 'host' the tweets
onComplete: function(data) {
this.addPosts(data); // add all posts to element.
}
}).send();
Additionally, you can style the tweets by using 2 classes for the element:
div.tweetBody {
line-height: 1.1;
font-family: arial;
font-size: 12px;
margin-bottom: 10px;
}
div.tweetDate {
font-size: 10px;
color: #500;
text-align: center;
padding-top: 4px;
}
That’s it, it’s that simple. Happy tweeting.
3
no
3 Comments to Getting latest tweets through mootools JSONP
[...] Getting latest tweets through mootools JSONP | frag (frăg) [...]
This is great. Do you have something similar for facebook?
not thought about it but it would depend on the timeline, facebook permissions are not same as twitter
Would you like to leave a comment?
You must be logged in to post a comment.




