How to Quickly Show a Gravatar

While most of what these people add to the internet is absolute garbage, many people like other people to know when they’ve said something.  One of the ways people are doing this is through the use of Gravatars.  Gravatars are small images that (can) uniquely identify you as a commenter or contributor on a website, typically a blog.  For example, if you go and look at the comments on this site, you’ll see that any comment I’ve made has a small image of morlock next to it.  Any other site that I comment on that uses gravatars will show the exact same image.  Due to the way it’s set up, where a site will set an image’s source to be a gravatar.com url, I could change my image on all of these sites whenever I want to.

Recently while commenting on a session for Mix, a conference I’m attending in a couple weeks, I noticed that as soon as you entered your email address, it would show your gravatar.  Figuring that this would be a nice little addition to my site, I added it a few days ago.  Since many people do use Gravatars, I thought I’d demonstrate an easy way to add this to your web site.  The sample I’m showing specifically applies to ASP .Net MVC, but it could be taken and easily altered for other applications. 

Our example will consist of three parts:  the view, the javascript, and the controller method.

The View is very simple and just contains a field that we can put our email address in and an image tag that can have it’s source set later:

   1:  <dl>

   2:       <dt><label for="EmailAddress">Email Address:</label></dt>

   3:       <dd>

   4:            <%=Html.TextBox("Email")%>

   5:       </dd>

   6:  </dl>    

   7:  <br />

   8:  <img class="newgravatar" title="Gravatar"/>

Our javascript is a bit more complex and shows an example of using ajax to go back to the server to get the path to our email address’ gravatar:

   1:  window._emailRegex = /^[a-z0-9]+([-+\.]*[a-z0-9]+)*@[a-z0-9]+([-\.][a-z0-9]+)*$/i;

   2:   

   3:  $(document).ready(function() {

   4:      //Gravatar stuff

   5:      $('input[name=Email]').blur(function() {

   6:          var email = $(this).val();

   7:          if (email.indexOf("@") > 0 && window._emailRegex.test(email)) {

   8:              $.post('/Home/GetGravatarPath', { value: email }, function(gravatarPath) {

   9:                  $('img.newgravatar').attr('src', gravatarPath);

  10:              });

  11:          }

  12:      });

  13:  });

You’ll notice here that we’re also checking up against a regex to make sure the email address entered is valid.  Once we’re sure it is, we’ll post back to a method on our Home controller.  The result of that method call is then set to the source attribute of the image with newgravatar as it’s class.

Lastly, we have our controller method:

   1:  public string GetGravatarPath(string value)

   2:  {

   3:       return Gravatar.GetGravatarURL(value);

   4:  }

and the class that method calls to actually get the path:

   1:  public class Gravatar

   2:  {

   3:       public static string GetGravatarURL(string emailAddress)

   4:       {

   5:            string imageUrl = "http://www.gravatar.com/avatar.php?";

   6:            MD5CryptoServiceProvider md5 = new MD5CryptoServiceProvider();

   7:            UTF8Encoding encoder = new UTF8Encoding();

   8:            byte[] hashedBytes = md5.ComputeHash(encoder.GetBytes(emailAddress));

   9:   

  10:            StringBuilder sb = new StringBuilder(hashedBytes.Length * 2);

  11:            for (int i = 0; i < hashedBytes.Length; i++)

  12:            {

  13:                 sb.Append(hashedBytes[i].ToString("X2").ToLower());

  14:            }

  15:   

  16:            imageUrl += "gravatar_id=" + sb.ToString();

  17:            imageUrl += "&size=40";

  18:            return imageUrl;

  19:       }

  20:  }

Source code: download