Javascript Twitter Badge with Up/Down

This is Javascript to make a twitter badge for your web page. I wanted a one line badge that allowed the user to access the history. You can see this one working on my index page.

I modified some code from Jon Aquino, implemented an up/down mechanism and got some arrow icon images from here. I used two versions of the arrow to indicate if you can go up or down, unfortunately they are slightly different sizes. Still, no one is perfect.

Instructions

The Main Script

I'm assuming that you are capable of making some simple changes to Javascript. For example, if you want to change the arrow images, just edit the filenames and change the size attributes.

Insert this script at the end of your web page, or stick it into an external file and load it.

<script type="text/javascript">
var elapsedTime = function(createdAt) {
    var ageInSeconds = (new Date().getTime() - new Date(createdAt).getTime()) / 1000;
    var s = function(n) { return n == 1 ? '' : 's' };
    if (ageInSeconds < 0) {
        return 'just now';
    }
    if (ageInSeconds < 60) {
        var n = ageInSeconds;
        return n + ' second' + s(n) + ' ago';
    }
    if (ageInSeconds < 60 * 60) {
        var n = Math.floor(ageInSeconds/60);
        return n + ' minute' + s(n) + ' ago';
    }
    if (ageInSeconds < 60 * 60 * 24) {
        var n = Math.floor(ageInSeconds/60/60);
        if(n > 1) return 'about ' + n + ' hours ago';
        else return '1 hour ago';
    }
    if (ageInSeconds < 60 * 60 * 24 * 7) {
        var n = Math.floor(ageInSeconds/60/60/24);
        return n + ' day' + s(n) + ' ago';
    }
    if (ageInSeconds < 60 * 60 * 24 * 31) {
        var n = Math.floor(ageInSeconds/60/60/24/7);
        return n + ' week' + s(n) + ' ago';
    }
    if (ageInSeconds < 60 * 60 * 24 * 365) {
        var n = Math.floor(ageInSeconds/60/60/24/31);
        return n + ' month' + s(n) + ' ago';
    }
    var n = Math.floor(ageInSeconds/60/60/24/365);
    return n + ' year' + s(n) + ' ago';
}

// Make date parseable in IE [Jon Aquino 2007-03-29]
function fixDate(d) {
    var a = d.split(' ');
    var year = a.pop();
    return a.slice(0, 3).concat([year]).concat(a.slice(3)).join(' ');
}

// Global variables
var myUpdates = new Array();
var updatenumber = 0;
var numupdates = 0;

function upUpdate() {
  updatenumber++;
  updatenumber = updatenumber % numupdates;
  update();
}

function downUpdate() {
  updatenumber--;
  if(updatenumber < 0) updatenumber = numupdates-1;
  update();
}

function update() {

  // I want the bit that says "Status" to be part of the script so if someone visits my web page with
  // javascript turned off they don't see Status and a blank line.
  var html = "<b>Status<\/b>:";

  // This is where I set the arrow images
  if(updatenumber < numupdates-1) html += ' <a href="javascript:void(null)" onClick="upUpdate()" title="previous update"><img src="Images/down46.gif" alt="down" width="8" height="8" border="0"><\/a>';
  else html += ' <img src="Images/down42.gif" alt="down" width="7" height="7">';
  if(updatenumber gt; 0) html += ' <a href="javascript:void(null)" onClick="downUpdate()" title="next update"><img src="Images/up46.gif" alt="up" width="8" height="8" border="0"><\/a>';
  else html += ' <img src="Images/up42.gif" alt="up" width="7" height="7">';
  html += ' : ' + myUpdates[updatenumber];

  document.getElementById('twitter_update_list').innerHTML = html;
}

function twitterCallback2(obj) {
  numupdates = obj.length;
  var regular = /\bhttp.*\b/;

  for (var i = 0; i < numupdates; i++) {
    var tweettext = "";
    var addresses = new Array(regular.exec(obj[i].text));

    for (var j = 0; j < addresses.length; j++) {
      tweettext = obj[i].text.replace(addresses[j], '<b><a href="'+addresses[j]+'">link ><\/a><\/b>');
    }

    myUpdates[i] = tweettext + ' : <a style="font-size: 85%" href="http://twitter.com/' + obj[i].user.screen_name + '/statuses/' + obj[i].id +'\">' + elapsedTime(fixDate(obj[i].created_at)) + '<\/a>';
  }

  update();
}
</script>

// My username is "doppio" : replace doppio in the next line with your username
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/doppio.json?callback=twitterCallback2&count=5"></script>

Notice on the very last line the parameter count=5. You can change this to get more or less tweets.

Preloading the Arrow Images

Insert the following script into the head of your web page. If you don't do this then when you click up/down you will have to wait to download the arrow image if it changes.

<script type="text/javascript">
// Preload image cache
imageup46 = new Image();
imageup46.src="Images/up46.gif";
imageup42 = new Image();
imageup42.src="Images/up42.gif";
imagedown46 = new Image();
imagedown46.src="Images/down46.gif";
imagedown42 = new Image();
imagedown42.src="Images/down42.gif";
</script>



Home