When I came across the Twitter HTML widget, just thought why not I tweak it a little and customize it to show the User Info like User Picture, User Name, Following, Followers and their tweets count etc. along with their recent tweets displayed.

So just explored Twitter API, and built this twitter widget with Basic HTML, Javascript and CSS.

I just made it as a wire-frame, which makes it easy to tweak the CSS to apply your own color schemes which suits your website or blog look and feel.

Here is how it looks like (Click on the image to see the demo).

Tweet Us At WittySparks Twitter Widget

Here is the CSS:

#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;}

Here is the 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]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return ''+url+'';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+''+reply.substring(1)+'';
    });
	if (i==0){
		statusHTMLI.push('Tweet Us at '+username+'
Followers: '+FollowersCount+' | Following: '+FriendsCount+' | Tweets: '+StatusesCount+'');
	}
	statusHTML.push('
'+relative_time(twitters[i].created_at)+'
'+status+'
');
  }
  document.getElementById('twitter_info_ws').innerHTML = statusHTMLI.join('');
  document.getElementById('twitter_update_list_ws').innerHTML = statusHTML.join('');
}

Here is the HTML Code to build Tweet Us at wittysparks custom Twitter Widget:

loading…

Here is the Javascript placed before the closing tag or at the end of the above HTML code:

%MINIFYHTML02be4eea1241c2820c5c4cebc5665c1213%

In the above Javascript make sure you change “wittysparks” and replace it with your twitter Username.

And make sure you download the code instead of using the code displayed above, some parts of code is not rendered properly in code view.

You can [ download ] the code now, explore and you are free to make some more tweaks to it and would be great if you could share your custom Twitter Widget.

If you like our “Tweet Us at wittysparks custom Twitter Widget” don’t forget to spread the article and never forget to Follow Us on Twitter at http://www.twitter.com/wittysparks

Happy tweeting