» deutsch deutsch

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:

my Gravatar hovercard

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 []
Similar posts:

6 Comments

  1. Ein Testkommentar, damit ihr gleich hier einen Gravatar zum Ausprobieren habt…

  2. Schönes “Easter Egg”, aber das hört ja gar nicht mehr auf sich zu drehen, da hilft nur noch Seite neu laden :mrgreen:
    Danke auch für die Erwähnung und den Link, Trackback kam ordungsgemäß an ;)

    • Bei dir kam mein Trackback an, bei Hans nicht – wahrscheinlich als Ausgleich dafür, dass seiner bei dir nicht ankam. :P

  3. Also witzig ist das Ganze auf jeden Fall. Brauchbar wohl eher nicht, aber ich denke das ist auch nicht wirklich die Absicht dabei… ;)

  4. jo hammer denn scho ostern? ;) entwickler scheinen ja wirklich ein faible dafür zu haben, solche sachen einzubauen. natürlich ist der nutzen gleich null, aber witzig isses schon…
    trackbackmässig ist – mal wieder – nichts bei mir angekommen. vielleicht macht er ja nur irgendwo pause… 8)

Leave a Reply

All inputs are optional. The e-mail address won't be published nor shared.

  • Moderation: Comments from first-time commentators must be approved manually before they appear.
  • Behave yourself! No insults, no illegal content, etc.! Should go without saying, don't you agree...?
  • Website: I don't mind blogs with ads, but purely commercial links are not welcome and will be deleted. Just like pure spam comments.
  • E-mail notification on new comments: You will have to activate this function once with a link in an automatically sent confirmation mail. These notifications can be disabled again with the link in every mail, of course.
  • Twitter: If you got a Twitter account, you can enter your Twitter name (with or without the @, doesn't matter) which will then be displayed next to any comment (including old ones) that contain the same e-mail address. (Which also means that you must fill in that e-mail field.)
  • Your own image (avatar)? Register at Gravatar.com with your e-mail address and upload an image – this will appear here and on many other blogs (as long as you specify your e-mail address here, of course).
  • Allowed HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <sub> <sup> <big> <small> <u>