So I am in the process of setting up my blog and wanted my Twitter badge displayed. Simple right?

Not quite… The problem is that you cant really customize it and it’s URLs aren’t clickable links. On top of that, I use a huge font for my badge so it doesn’t handle wrapping very well. Even a tinyurl would burst out of the boundaries of my Twitter box.

How to fix this?

Customize Twitter’s blog.js file. I basically took the line of code that imports the Twitter badge javascript:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>

and dumped the js into my blog. Then I got hacking.

First I changed the HTML it spits out so fit my tastes by adding/changing the appropriate styles/classes… pretty simple stuff.

It got more complicated when I decided to shrink down the size of all URLs in my twitters and make them clickable. Long story short, I used regex to replace all hyperlinks with a working hyperlink that simply displays as ‘link’. Wrapping problem solved. So whats the magic line?

Have at it:

twitters[i].text = twitters[i].text.replace(/(\bhttp:\/\/\S+(\/|\b))/gi,"<a href=\"$1\">link</a>");

Now I’m pretty happy, I fixed the formatting, linking and wrapping issues quite easily. If you want all the js just look at the source of my blog.