Load WordPress Gravatars on the Fly

Globally Recognised Avatar (or Gravatar) is a service from the WordPress team that allows you to improve your web presence across blogs and specialist websites. It’s one of those “why didn’t I think of that?” products that are so simple but yet have so much opportunity to be integrated into virtually everything. You can see examples of this from the comments below and in my sidebar.

The problem with Gravatars that I find a lot of people mentioning is that they don’t get to see their Gravatar before they post a comment – like the comments section on Shamus Young’s Wavatar post.

You may not think that’s too big of a deal, or perhaps from a marketing point of view that’s your way of driving comments (nasty people), but allowing them to play about with their image in the form will improve their relationship with your site and increase traffic anyway. Saves people deleting and re-commenting just because their Gravatar didn’t show up right too.

So this week I’ve put together a little script that generates these little Gravatars as you type. It’s even got little Wavatar faces on them that change when you make a new address, so you’ll never get bored!

Here’s the demo.

So for this, we need some kind of an MD5 encryption algorithm, as the Gravatar API needs this to secure its e-mail addresses.

I’ve used a script from webtoolkit that does the job perfectly.

The script’s over 200 lines long and you can find it here. I’ve included it in the script as an external file for easiness.

Setting Up

1
2
3
4
5

<img id="gravatar" src="" width="80" height="80" alt="Gravatar" />
 
<input id="email" type="text" />
 
<script type="text/javascript" src="webtoolkit-md5.js"></script>

Here we have our image, the input box, and the script tag that includes the MD5 script.

The Gravatar’s src will change when you start typing in the input field. It uses only a few lines of JavaScript.

Working JavaScript’s Magic

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
 
var gravatar = document.getElementById('gravatar');
 
var email = document.getElementById('email');
 
email.onkeyup = function(e){
    var key = MD5(email.value);
    gravatar.src = 'http://www.gravatar.com/avatar/'+key+'?s=80&d=wavatar';
};
 
</script>

Lines 3 and 5 fetch references to our image and input box to control them with the rest of our JavaScript.

Line 7 sets an onkeyup handler on the email field that is fired when a key is released.

Line 8 uses the webtoolkit MD5 algorithm and generates a key. We then pass this key into the Gravatar’s source and it shows our image. If it’s all worked out, this is where you should be seeing your own lovely face

The quicker the user can interact with your application the better. This script allows you to generate Gravatar’s on the fly as the user types it, giving them results straight away.

For practice, try adding things like event timers to decrease the number of image changes at a time, or set the event to onblur so that it only ever fires when the focus is taken away from the field (good for comment forms).

And also, with their recent addition of Gravatar profiles that contain even more information, maybe – with a little more JavaScript – the email address will be all you ever need to type.

Happy coding.