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.
[…] 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