Adding overlay notification icons to Twitter’s taskbar icon in IE9

IE9 allows you to pin sites to the taskbar. I find this feature useful, and various sites, including Twitter and Facebook make use of it to make site functionality more accessible. One feature that Twitter is currently missing, however, is notification of new tweets in the icon itself. So I’ve put together a quick little bookmarklet you can use to add this functionality to the official Twitter site on your machine.

Here’s what it looks like with 1 outstanding tweet. If more than 5 tweets are unread, I class this as an error condition and show a red X error graphic instead (okay, okay, the real story is I couldn’t be bothered making my own icons, so I’ve used some from a sample from the IE9 demo site, and they only go up to 5!)

Right click Twitter Overlay Icon (IE9 only!) and click Add to Favorites to create the bookmarklet.

Formatted code for the bookmarklet:

(function() {

var fLastCount = -1;

window.setInterval(function()
{
  try
  {
   var res = document.title.match(/^\((\d+)\)/);
   if(res) {
      var nNewCount = res[1];
      if(nNewCount != fLastCount) {
        var ico = nNewCount > 5 ? 'error' : 'num_'+nNewCount;
        window.external.msSiteModeSetIconOverlay('http://ie.microsoft.com/testdrive/Browser/tweetfeed/Images/'+ico+'.ico', nNewCount+' unread tweets');
        fLastCount = nNewCount;
      }
    }
    else if(fLastCount != 0) {
      window.external.msSiteModeClearIconOverlay();
      fLastCount = 0;
    }
  } catch(e) { }
}, 1000);

})();

Have fun!

Leave a Reply

Your email address will not be published.