Display Gravatar Avatars on Your Web Site

In my tutorial on how to display twitter status messages in WordPress, I used my own avatar picture beside the speech bubble. I have not found a way to retrieve my Twitter avatar from Twitter. Hopefully, I will figure out how to do it in the near future.

An alternative way to organize my avatars would be to use Gravatar. Gravatar allows you to display your avatar through a simple URL.

The Normal Avatar Code

<div id="twitter_photo"><img src="%3C?php%20echo%20bloginfo%28%27template_directory%27%29;%20?%3E/images/icon-twitter.jpg" alt="" width="73" height="73" /></div>

The Gravatar Avatar Code

<div id="twitter_photo"><img src="http://www.gravatar.com/avatar.php?gravatar_id=%3C?php%20echo%20md5%28" your...@email.com="" );="" ?="" />" width="73" height="73" alt="" /&gt;</div>

You should replace “your...@email.com” with the email address of your Gravatar avatar email address. With Gravatar, I no longer need to upload and manually change the code whenever I update my avatar. Now, I only need to edit it from Gravatar and all my sites will display the updated avatar.

Vince is a web designer & developer with a passion for creating web sites with clean and functional designs and source code that is valid, efficient, readable, secure and search engine friendly.

Vince is also a vegan and big animal lover. He is currently working towards his dream of living off-the-grid in Australia so that he can live freely in a self-sufficient and eco-friendly manner.