Create a HTML Twitter Widget For Your Blog Using JavaScript and CSS

(this is just a screenshot, see a live demo link at the end of the post)

1. The CSS (if you use Blogger, you need to place this before the ]]></b:skin> tag in your template / for other platforms, place this code inside your main .css file):

#twitter_div_ws {font-family:Arial, Helvetica, sans-serif; font-size: 13px; border: 1px solid #CCCCCC; padding: 5px; width:300px; background-color:#FFF; margin: 0 auto;}
ul#twitter_update_list_ws {padding:0; margin:0; list-style: none; display:block;}
ul#twitter_update_list_ws li {list-style: none; min-height:50px; border-top: 1px solid #CCCCCC; padding:5px 0px;}
ul#twitter_update_list_ws li span {font-style: italic; display: block;}
ul#twitter_update_list_ws .timeago {display:inline-block;}
ul#twitter_update_list_ws .timeago a {font-size:10px; color: #999999; text-decoration: none;}
#twitter_div_ws b a {font-weight: bold; text-decoration: none; text-transform:uppercase}
#twitter_info_ws {border-bottom: 5px solid #CCCCCC; padding-bottom:10px;font-size: 10px;}
#twitter_info_ws b {font-size: 15px; line-height:30px;}
#twitter_info_ws img {padding: 0 5px 0 0; width: 50px; border:0px;}

2. The JavaScript (place it above your tag inside your template):

<script type="text/javascript">
function relative_time(time_value) {
var time_lt1min = 'less than 1 min ago';
var time_1min = '1 min ago';
var time_mins = '%1 mins ago';
var time_1hour = '1 hour ago';
var time_hours = '%1 hours ago';
var time_1day = '1 day ago';
var time_days = '%1 days ago';

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 time_lt1min;
} else if(delta < 120) {
return time_1min;
} else if(delta < (60*60)) {
return time_mins.replace('%1', (parseInt(delta / 60)).toString());
} else if(delta < (120*60)) {
return time_1hour;
} else if(delta < (24*60*60)) {
return time_hours.replace('%1', (parseInt(delta / 3600)).toString());
} else if(delta < (48*60*60)) {
return time_1day;
} else {
return time_days.replace('%1', (parseInt(delta / 86400)).toString());
}
}

function twitterCallback1(twitters) {
var statusHTML = [];
var statusHTMLI = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;

var FollowersCount = twitters[i].user.followers_count;
var FriendsCount = twitters[i].user.friends_count;
var ProfileImageUrl = twitters[i].user.profile_image_url;
var StatusesCount = twitters[i].user.statuses_count;

pic = twitters[i].user.profile_image_url;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
if (i==0){
statusHTMLI.push('<a href="http://www.twitter.com/'+username+'"><img align="left" src='+ProfileImageUrl+'></a><b>Tweet Us at <a href="http://www.twitter.com/'+username+'">'+username+'</b></a><br/>Followers: '+FollowersCount+' | Following: '+FriendsCount+' | Tweets: '+StatusesCount+'');
}
statusHTML.push('<li><div class="timeago"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></div><span>'+status+'</span></li>');
}
document.getElementById('twitter_info_ws').innerHTML = statusHTMLI.join('');
document.getElementById('twitter_update_list_ws').innerHTML = statusHTML.join('');
}
</script>

3. The HTML (place it where you want the widget to be displayed):

<div id="twitter_div_ws">
<div id="twitter_info_ws"></div>
<ul id="twitter_update_list_ws">
<li>loading…</li>
</ul>
</div>

4. Second JavaScript code (place it right after the above HTML code (presented in step 3):

<script src="http://twitter.com/status/user_timeline/YOUR_TWITTER_USERNAME.json?count=5&callback=twitterCallback1" type="text/javascript"></script>

In this code, replace YOUR_TWITTER_USERNAME with... your Twitter username :)


Credits: Wittysparks | Live Demo.