Display Twitter Status in Your Website Using Savvy.UI

Posted on the September 5th, 2008 under JavaScript, Programming, Savvy.UI, Tutorial by Zaki

This tutorial is a continuation of my previous tutorial Display Random Text in Your Website Using Savvy.UI but instead of random text this time we will display your latest Twitter Status. The tutorial is based on the Twitter Badge for HTML.

Twitter Object

Twitter Object which I created is actually based on the JavaScript provided by Twitter at http://twitter.com/javascripts/blogger.js with modification to allow better formatting and control of the script, below is the code for Twitter Object.

var twitter = {
	statusHTML: [], // store status as an array
	intervalId: null, // intervalId
	lastId: null,
	showMessage: function() {
		do {
			var i = Math.floor(Math.random() * this.statusHTML.length);
		} while(i == this.lastId);
		this.lastId = i;
 
		// now let display the selected text
		Js.widget.message.add({text: this.statusHTML[i]});	
	},
	callback: function(obj) {
		// that will always refer to this for twitter
		var that = this;
		var twitters = "";
		var username = "";
 
		// Use Savvy.UI Jrun.each to loop all the value in twitter array.
		Jrun.each(obj, function() {
			username = this.user.screen_name;
			twitters = this.text + '<br />';
			twitters += '<a style="font-size:85%" href="http://twitter.com/' + username + '/statuses/' + this.id + '">';
			twitters += that.relative_time(this.created_at);
			twitters += '</a>';
 
			that.statusHTML[that.statusHTML.length] = twitters;
		});
 
		// show the first message
		this.showMessage();
		// create an interval of 10 second
		this.intervalId = setInterval(function() {
			that.showMessage();
		}, 10000); 
	},
	relative_time: function(time_value) {
		// relative time based on twitter code
		// <http://twitter.com/javascripts/blogger.js>
		var values = time_value.split(" ");
		time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
 
		var parsed_date = Date.parse(time_value);
		var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
 
		var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
		delta = delta + (relative_to.getTimezoneOffset() * 60);
 
		if(delta < 60) {
			return 'less than a minute ago';
		} else if(delta < 120) {
			return 'about a minute ago';
		} else if(delta < (60*60)) {
			return (parseInt(delta / 60)).toString() + ' minutes ago';
		} else if(delta < (120*60)) {
			return 'about an hour ago';
		} else if(delta < (24*60*60)) {
			return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
		} else if(delta < (48*60*60)) {
			return '1 day ago';
		} else {
			return (parseInt(delta / 86400)).toString() + ' days ago';
		}
	}
};
 
Js.simplify();
$(document).ready(function() {
	var username = "crynobone"; // you can change this to your own username
	var counts = 10; // how many status you want to display
	Js.util.includer.script("http://twitter.com/statuses/user_timeline/" + username + ".json?callback=twitter.callback&count=" + counts);
});

a. showMessage

showMessage generate which Twitter’s Status will be selected to show using Js.widget.message for this interval. this.lastId help the code to avoid redundant status being show in a sequence.

showMessage: function() {
	do {
		var i = Math.floor(Math.random() * this.statusHTML.length);
	} while(i == this.lastId);
	this.lastId = i;
 
	// now let display the selected text
	Js.widget.message.add({text: this.statusHTML[i]});	
}

Alternatively you can also show Twitter’s Status in a sequence using by modifying the above code to the following.

showMessage: function() {
	if(Js.isnull(this.lastId) || (this.lastId >= this.statusHTML.length)) {
		this.lastId = 0;
	} else {
		this.lastId++;	
	}
	var i = this.lastId;
 
	// now let display the selected text
	Js.widget.message.add({text: this.statusHTML[i]});	
}

b. callback

callback function mimic the twitterCallback2 function from the original Twitter Badge script but instead of adding all the status into an HTML Element using innerHTML we will add it into this.statusHTML as an array (as we did in the previous tutorial).

callback: function(obj) {
	// that will always refer to this for twitter
	var that = this;
	var twitters = "";
	var username = "";
 
	// Use Savvy.UI Jrun.each to loop all the value in twitter array.
	Jrun.each(obj, function() {
		username = this.user.screen_name;
		twitters = this.text + '<br />';
		twitters += '<a style="font-size:85%" href="http://twitter.com/' + username + '/statuses/' + this.id + '">';
		twitters += that.relative_time(this.created_at);
		twitters += '</a>';
 
		that.statusHTML[that.statusHTML.length] = twitters;
	});
 
	// show the first message
	this.showMessage();
	// create an interval of 10 second
	this.intervalId = setInterval(function() {
		that.showMessage();
	}, 10000); 
}

c. relative_time

relative_time code is as exactly as use in the Twitter Badge.

Executing The Code

Twitter have provide an easy API for us to load recent Twitter’s Status using this format.

Js.simplify();
$(document).ready(function() {
	var username = "crynobone"; // you can change this to your own username
	var counts = 10; // how many status you want to display
	Js.util.includer.script("http://twitter.com/statuses/user_timeline/" + username + ".json?callback=twitter.callback&count=" + counts);
});

No Responses to 'Display Twitter Status in Your Website Using Savvy.UI'

Subscribe to comments with RSS or TrackBack to 'Display Twitter Status in Your Website Using Savvy.UI'.

Mior Muhammad Zaki: PHP & JavaScript Programmer