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.
1 2 3 4 5
Here we have our image, the input box, and the script tag that includes the MD5 script.
1 2 3 4 5 6 7 8 9 10 11 12
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).