Create a twitter application with javascript

Twitter is a free social networking and micro-blogging service that enables its users to send and read messages. Without a doubt its a nice way to share and discover what is happening right now.

The API offers many different ways to connect to your details including XML, JSON, Atom and RSS. We can use these apis to create budgets and applications that interacts with twitter.
In this tutorial we will learn how to create your own twitter application with twitter REST API.We are here creating a twitter application that access given users profile data(image and followers), and compare with other user.

The API

The Twitter REST API Method: statuses user_timeline returns shared data of a given user in desired format (json or xml). we will use it to retrieve user data in json format and then compare the no of followers. we will call -

http://twitter.com/statuses/user_timeline.json

The HTML

Create a user form to take two twitter user ids.

<input type="text" id="user1" >
<input type="text" id="user2" >
<input type="button" onclick="javascript:compareTwitter();" value="compare" id="btn"/>

The Javascript

User enters two twitter ids to compare and click on compare button. On this user event get details for both users and copare the no of followers. Show the user above who has more no of followers.

<script type="text/javascript">
var fc1, fc2 = 0;
var statusHTML = [];
var data1, data2 = '';

function callback1(twitters) {
statusHTML = [];
for (var i=0; i<twitters.length; i++){
fc1 = twitters[i].user.followers_count;
data1 =('<a href="http://twitter.com/'+twitters[i].user.screen_name+'"><img src="'+twitters[i].user.profile_image_url+'" style="border:none;"/></a><br /><b>'+twitters[i].user.screen_name+'</b><br />'+twitters[i].user.followers_count+' followers.<br />');

}
}
function callback2(twitters) {
for (var i=0; i<twitters.length; i++){
fc2 = twitters[i].user.followers_count;;
data2 =('<a href="http://twitter.com/'+twitters[i].user.screen_name+'"><img src="'+twitters[i].user.profile_image_url+'" style="border:none;"/></a><br /><b>'+twitters[i].user.screen_name+'</b><br />'+twitters[i].user.followers_count+' followers.<br />');
}

if(parseInt(fc1)>parseInt(fc2)){
document.getElementById('results').innerHTML =  data1 + data2 ;
}
else{
document.getElementById('results').innerHTML = data2 + data1 ;
}
}

function compareTwitter(){

document.getElementById('results').innerHTML='Please wait we are fetching results...';

var user1 = document.getElementById("user1").value;
var user2 = document.getElementById("user2").value;

var src1 = "http://twitter.com/statuses/user_timeline/"+user1+".json?callback=callback1&count=1";
var src2 = "http://twitter.com/statuses/user_timeline/"+user2+".json?callback=callback2&count=1";

var s1 = document.createElement('script');
var s2 = document.createElement('script');

s1.setAttribute('src',src1);
s2.setAttribute('src',src2);

document.getElementsByTagName('head')[0].appendChild(s1);
document.getElementsByTagName('head')[0].appendChild(s2);

}

</script>

Demo

You can see this application in action here.

Related posts
Show twitter avatar on web
Call apis with javascript without ajax.