Epic Alex | WordPress Tutorials

Getting Gravatars on the Fly

I love using gravatars on my blogs, but there has been discussion lately that they aren’t used enough, and are still to find the mainstream. In this article, we will look at 3 different ways to get a Gravatar, both promoting their use, and making the user go WOW when using our comment form.

Before going live with the new site design, I posted some teasers about the site, and about some tutorials I would be writing showing you how to achieve some of the things I implemented. I mentioned this idea there, and you can now see a modified version of it in action in the comment form, so be sure to leave a comment to see a demo! I’ve also released a plugin that adds AJAX-gotten Gravatars to your blog registration page.

Method One – Get Gravatar

This is a jQuery Plugin, Get Gravatar, written by Josh Pyles of Pixel Matrix Design. The plugin consists of a js file and a php file.

The plugin, once uploaded to your server, works by calling a jQuery function to work its magic on a selector you choose. The beauty of this method is that you can pass variables to the function, such as changing the default gravatar. You can also use this to build in custom animations for while the gravatar is being fetched.

There are two disadvantages to this method that I can see:

1. The sign up link is always there, even if a user’s gravatar is returned. It makes much more sense to only display that message if a user doesn’t already have a gravatar.
2. Currently, the plugin implements md5 by using an extra php file, which, as we’ll see in the next file, is unnecessary

If you want to view a demo of this method, there is one available here.

Method Two – Gravatar Box

Otto’s Gravatar Box is a perfect solution if you don’t want to get your hands at all dirty with jQuery. All you need to do is add <?php if (function_exists('gravbox')) gravbox(); ?> to your comments form, and add some CSS to your style sheet and you’re done, there is even some sample CSS provided to make things easier for you.

Otto has also got around the md5 issue by using a jQuery algorithm function from semnanweb, although the source site doesn’t seem to have that file, you can download it from the jQuery plugin site.

Another nice little feature in the latest version is that if you are a logged in user, your gravatar will already be there, because your email is available when the page is generated through your user meta.

Method Three – Build Your Own

When I first implemented this on my new design, I coded the whole thing from scratch because there was nothing else available that did the same. (OK, I’ll say it; I think I was the first ) Doing is of course a great way of teaching yourself something, and I learnt a great deal about AJAX in the process. However, since then, the previous 2 methods have come about, and also Gravatar introduced their 404 (Props to Otto for bringing it to my attention), both of which have caused me to rewrite my own code.

I’ve now used Otto’s plugin as a base, which I have modified to fit my theme in a few different ways.

1. The HTML is already coded into the theme, and isn’t added by the plugin
2. I don’t need to add another php call into my file
3. I don’t need another plugin, which, while it isn’t a huge concern, I know bothers some people

By using our own code, we have full control over everything, and can add in some other things like custom animations.

The jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

jQuery(document).ready(function ($) {
	function gravatar(email) {
		return 'http://www.gravatar.com/avatar/' + $.md5(email);
	}
 
	$('#email').blur(function () {
		$("#ajax_avatar").html('<img id="grav_load" src="./wp-admin/images/loading.gif" />');
 
			var size = "80";
 
			var email = $(this).val().toLowerCase();
			if (email.indexOf('@') == -1) { return; }
			var img = new Image();
			$(img)
			.load(function() {
				$('#ajax_avatar').html("<img src='"+gravatar(email)+"?s="+size+"&d=404' />");
				$('#ajax_get_avatar').addClass('hidden');
			})
			.error(function() {
				$('#ajax_avatar').html("<img src=\"http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=80\" alt=\"Default Gravatar\" />");
				$('#ajax_get_avatar').removeClass('hidden').html('You don\'t have a Gravatar yet! Get one <a href="http://gravatar.com/site/signup/'+email+'">here</a>.');
			})
			.attr('src',gravatar(email)+"?s="+size+"&d=404"); 
	});
});

All I’ve changed here is I’ve added a loading icon in when the email field blurs on line 7, the size of the avatar variable on line 9, and changed the selectors to suit my html.

I think it’s really time that a big push is made making your users aware of Gravatar, and this is the perfect way, so, which method will you choose?