Jarrod Trainque

3Jun

A Resizable CSS-based Twitter Site Badge

Posted 2 years, 8 months ago - 15 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.

15 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!

  10. Comment by Jarrod — November 4, 2008 @ 7:34 pm

    I should mention: This badge assumes that twitter doesn’t change its badge API. If it does, this won’t work…

  11. Comment by Nijnsky — December 2, 2008 @ 10:19 pm

    Hi, I’m very glad you’ve made your own HTML twitter badge. I’m trying to find a way for the it to work for my site. I tried to take the HTML to just get the pure text, but it did not work for me. Could you help?

    Thanks,
    Nijnsky

  12. Comment by Jim — January 15, 2009 @ 12:44 am

    Thanks very much. It’s the perfect code for adding our feed to our new album website. Thanks!

  13. Comment by Justin — May 4, 2009 @ 5:11 pm

    This is awesome, thanks for the download.

  14. Comment by dave — May 12, 2009 @ 9:06 pm

    Thanks very much, putting this up for a client now. Very nice of you to provide this for the community!

  15. Pingback by 50 Twitter Tools and Tutorials For Designers and Developers « Smashing Magazine — October 10, 2009 @ 9:47 am

    [...] A Resizable CSS-Based Twitter Website Badge If you find the official Twitter badges too big and clunky, then this tutorial is for you. Display your latest tweet in a neat CSS-designed widget that resizes depending on the size of your tweet. [...]

RSS feed for comments on this post.

Leave a comment

You must be logged in to post a comment.