How to add clickable hashtags to your twitter widget

A few weeks ago Twitter finally added clickable hashtags to twitter.com. However if your one of the many people who make use of the html/js widget provided by twitter to display recent tweet on your own website then you will have noticed that you still don’t get clickable hashtags in the list of tweets that get displayed. Luckily this is pretty easy to fix if you want to, and you aren’t freaked out at the thought of modifying a little javascript.

UPDATE: This article is no longer relevant, twitter have completely changed their widgets (which you can grab here), and the new widgets now support hashtags out of the box. Looks like any existing widgets should continue working as they just use the user_timeline API method which hasn’t changed.

Below is the default javascript function that is called by the default HTML Twitter widget, you can grab the widget code here or look at the full javascript file here.

There isn’t much to it, just the callback function, and a function to format the timestamp for each tweet. I’m only focusing on the callback in this post as that is all we need to play with to get clickable hashtags working. The default callback runs through the list of tweets that have been returned and using a couple of regular expressions (regex) it pulls out urls and @mentions and links them up.

Original blogger.js

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    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>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

What you’ll need to add is just a couple of extra lines, highlighted below, this adds another regex check to find any hashtags and link them up to a default twitter search.

Freshly modified blogger-mod.js

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    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>';
    }).replace(/\B#([_a-z0-9]+)/ig, function(hashtag) {
      return '<a href="http://twitter.com/search?q=%23'+hashtag.substring(1)+'">'+hashtag+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

Ok, that’s super, but what do I do with it?

Right, since you can’t modify the blogger.js file on twitter’s server, you’ll need to download a copy for yourself. Once you’ve done that you can add the extra code outlined above, I’d suggest saving the file as something like blogger-mod.js and then you’ll need to upload it to your web host.

…or if you’re not overly confident in modifying the javascript yourself, simply download this file, remove the .txt extension of the file (eg. change blogger-mod.js.txt to blogger-mod.js) and then upload it to your web host.

Cool beans, I’ve upload the new file, now what?

Ok, this is the standard widget code that twitter provides:

<div id="twitter_div">
  <h2 class="sidebar-title">Twitter Updates</h2>
  <ul id="twitter_update_list"></ul>
  <a href="http://twitter.com/yourusername" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/yourusername.json?callback=twitterCallback2&count=5"></script>

We only need to change the reference to twitter’s blogger.js to point to our newly uploaded blogger-mod.js (highlighted below). Now when the tweets are returned from twitter they will be processed by your javascript file (which handles hashtags) instead of twitter’s standard code.

<div id="twitter_div">
  <h2 class="sidebar-title">Twitter Updates</h2>
  <ul id="twitter_update_list"></ul>
  <a href="http://twitter.com/yourusername" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://mywebsite.com/my/path/blogger-mod.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/yourusername.json?callback=twitterCallback2&count=5"></script>

Hopefully that will help a few people out until such time that twitter add this functionality to their own widget. If you have any trouble with the steps above, leave a comment and I’ll see if I can help out.