LearnSuper simple Twitter avatars

Treehouse
writes on February 12, 2010

If you use Twitter avatars in your web site or app then you need to check  out tweetimag.es. It’s a great free service courtesy of Joe Stump that allows you to reference any Twitter users avatar with a uniform URL.

Why is this important? If you have ever viewed the URL of your own avatar you will notice that it’s a direct link to a file hosted on Amazon S3 that includes the original file name. Here’s mine by way of example:

http://a1.twimg.com/profile_images/45645532/lime_half_bigger.jpg

If I change my avatar to a new file a brand new URL for the image will be created. Any reference in your app to the original avatar (most likely accessed via the API) will now result in a broken image. Of course you can code around this but you shouldn’t have to.

Using tweetimag.es is super simple. All you have to do to reference a users avatar in your application is use the following URL pattern:

<img src="http://img.tweetimag.es/i/{{username}}_{{size}}" alt="" />

The service gives you access to four sizes of avatar:

  • m (24×24)
  • n (48×48)
  • b (73×73)
  • o (original size, varies)

In order to grab my own avatar image 48 x 48 pixels I would do the following:

<img src="http://img.tweetimag.es/i/keirwhitaker_n" alt="keirwhitaker" />

We used this approach in our new Future of Web Design site and it works really well. Go check it out.

0 Responses to “Super simple Twitter avatars”

  1. Like this. Good.

    Would really like to know what the call would be direct to Twitter though?

    Andy

  2. This service is also available through http://twivatar.org/ built by Remy Sharp. I’ve been using it for a few months on http://twequency.com and http://tweet1.com — works a treat.

  3. It’s great, but I think you need to change “boagworld_o” to “BoagWorld_o” – tweetimag.es seems to be case sensitive!

  4. Good thing I got our API limit increased recently! One thing to note is that the entire service is backed by Media Temple’s top notch CDN service so images are cached throughout a large network of POPs (Point Of Presence) throughout the world. This means that your users in Japan hit an Asian POP for their avatars, while our friends in the UK hit a European POP.

  5. I’d be cautious of using this in large projects as, should tweetimag.es ever go down, your users will be avatarless… Would much rather write the little extra logic to use the Twitter API directly, not that their service is exactly reliable.

  6. I used it on my latest twitter mashup. It’s just awesome (except sometimes their caching system is acting like weird). A real gravatar for twitter!

Leave a Reply

You must be logged in to post a comment.

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more