Gravatar Hovercards – including Easter Egg

Many probably know Gravatar already – these little images are seen at more and more blog comments, after all. For a few months, Gravatar not only offers these images connected to e-mail addresses, but also user profiles that can be displayed as “hovercards” when hovering the cursor above the Gravatar image. This can look like this:

Now Hans found an Easter Egg, i.e. a hidden funny function: When you right-click on the Gravatar icon (the lying G on blue background) in the top right corner of a hovercard, all Gravatars (and any additional user images) start rotating. Nice. (Though it looks a bit odd with the frame in some themes like mine…)

As can be seen in the Gravatar source code, instead of right-clicking, you can also left-click while holding the Ctrl, Alt or Meta key (the latter is usually not available on PCs). This easter egg works for me under Windows 7 with Firefox, Chrome, and Safari1, but not with Opera nor IE 8.

Hans’s post today and Chaosweib’s yesterday made me (1) finally add content to my Gravatar profile, and (2) add the hovercard in my blog, too.

Both already linked this plugin, and Hans linked this DIY description (German) which just requires one line of code to include the needed JavaScript file from Gravatar.

Unless you want it a bit more tailored: Since Gravatars are only used on posts and pages (unless you use them e.g. in the sidebar too), you don’t need to include the file for the index and the archives, so I put this code inside a function that’s called from header.php:

//Gravatar Hovercards:
if (is_singular()) { 
    echo '<script type="text/javascript">var description = \'\';</script>'."\n";
    wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), '', true );
}

(Works directly in header.php too; as ususal it must be at an appropriate place inside a <?php…?> block.)

Since is_singular() – which limits the output to posts, pages, and attachments – only works after WordPress is properly initialized, this code won’t work directly (i.e. outside of a function) in functions.php.

The echo line makes the hovercard (not the egg) work in Internet Explorer, eliminating a problem in some themes (including mine) – this is described in this forum thread at the end.

Alright, what do you think about the hovercard – useful? nice? annoying? waste of resources?

1. on the iPad, the keys are missing; tapping and holding the icon doesn’t work [↩]