Jarrod Trainque

3Jun

A Resizable CSS-based Twitter Site Badge

Posted 1 year, 4 months ago - 9 comments

Twitter offers website badges, but I find them:

* pretty unattractive
* wasteful of space (especially the Flash one)
* not flexible enough to fit naturally into my site design.

So I made my own badge. Here’s what it looks like:

twitter_badge.png

Because you seem nice, I’m gonna share it with you. You can download it here: Download Twitter Badge (zip file)

Pros:

* CSS-based design - customize it all you want
* ooooh-la-la rounded corners
* it will stretch to fit available screen real estate (up to 750px)
* pretty easy to set up
* works on any blogging platform

Cons:

* This was designed for a website with a white background… If you want to use it on a colored background, you may need to tweak the images a bit.
* susceptible to twitter system outages (yup, kinda unavoidable)

I’ve included a little README file which should make it easy for even newbies to set this up. Feedback/comments appreciated.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

9 Comments

  1. Comment by AetherX — August 13, 2007 @ 12:31 pm

    Thanx!

  2. Comment by AetherX — August 13, 2007 @ 1:10 pm

    If I want to show five recent updates, what shall I do?

  3. Comment by Jarrod — August 13, 2007 @ 9:06 pm

    replacing &count=1 with &count=5 (in the line of javascript) should do the trick

  4. Comment by Vinod Pillai — November 29, 2007 @ 7:01 am

    thanks a lot, will prolly use it!

  5. Comment by Eric — March 9, 2008 @ 6:31 pm

    This is great, but is there a way to modify it so that the status time text is a link to the twitter account? I’ve removed the “via twitter” link and would love make this change. Thanks!

  6. Comment by Halli — April 22, 2008 @ 4:37 pm

    Thanks for the code, I really like it.

    You seem to be missing a “” tag right after the “&count”.

    Also, I changed the code to “&count=5″ but it still only displays the latest entry.

  7. Comment by Halli — April 22, 2008 @ 4:38 pm

    Hmm, the missing tag I mentioned is a closing “/script” tag.

  8. Comment by Brendan — April 22, 2008 @ 10:39 pm

    Yes how do you display the latest 5 entries?
    Changing to “&count=5″ doesn’t work.

  9. Comment by Annie — July 9, 2008 @ 12:20 pm

    Awesome, I JUST signed up with Twitter yesterday and found their badge ugly, as well. It is on my website for now but I like yours better!

RSS feed for comments on this post.

Leave a comment