Update: Forget this plugin. Go install Jetpack instead.

WordPress.com rolled out a nifty new feature called “Gravatar Hovercards” today. Basically it changes gravatar images into popups showing more info when the user hovers over them. In the comments, Andy Peatling mentioned bringing them to self-hosted WordPress blogs soon.

I didn’t feel like waiting.

<?php
/* 
Plugin Name: Gravatar Hovercards
*/
function gravatar_hovercards() {
	wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', true );
}
add_action('wp_enqueue_scripts','gravatar_hovercards');

This is not official.
It’s not supported.
It may not even work for you.
It certainly won’t work if they change things.

Still, this blog is about fun things I do with WordPress, so I saw no reason not to post it. I expect they’ll come out with their own plugin soon, but I’d be rather surprised if it’s much more than this. Maybe some extra options or something. I dunno. Switch to that script when it comes out.

But for those people who like experimenting and playing with WordPress on the edge, here you go.

And for you Javascript inclined people, take a look at their code. It’s got some tricks in it that are pretty neat.

Enjoy. 🙂

(Updated as per several comments)

Shortlink:

52 Comments

  1. I don’t think your plugin will work unless jQuery is already enqueued in the theme. 😉

  2. LOL, that was even faster than we expected someone to post it 😉

    We’re going to be releasing a plugin with a bunch of Gravatar “extras”, this will be one of them. In the meantime, this will definitely get the job done!

  3. http://s.gravatar.com/js/gprofiles.js is globally distributed and should be faster to load. I would suggest using that 🙂

  4. […] nu există un plugin pentru WordPress self-hosted, o soluție temporară a fost oferită de Otto. Crează un fișier PHP cu codul respectiv, uploadează-l în wp-content/plugins și activează-l […]

  5. I tried the first code posted few hours ago. I used the lines 11-14 in my functions.php. Thanks to you, I now have Gravatar Hovercards too! 🙂

  6. Wow!
    Just implementend in my http://www.wordpressmania.it blog… works like a charm!

    Thank you
    STefano

  7. I just tried and it just kind of load a little bit and stops, doesn’t even show the hovercard, weird.

    • James below helped me to figure this out.

      It seem when you use your extra e-mails it doesn’t pop-up your hovercard. Only with your primary e-mail address…

      • They actually mention this in their developer’s pages: http://en.gravatar.com/site/implement/profiles/

        “…profile requests will only resolve for the hash of the primary address on an account…”

        Only your main email address has a profile.

        • Hm, it never seemed like a problem before when it was only concerning profiles, since they’re often intentionally linked to separate of gravatars, but this is definitely a problem with hovercards. To date I have seven email accounts linked to Gravatar account (I rotate emails frequently) and I can easily fix all of the comments on my blogs by changing my profile’s email address, but I guess the thousands of other comments that I’ve left “in the wild” will just have to make do with my hovercardless mug.

          I know it’s not your problem, just venting sharing my frustration.

  8. Just added this to my website http://www.kennynsal.com and it works a treat. Great work Otto and glad I stumbled across your website this morning. Cheers

  9. […] across a site by Otto today explaining how WordPress.com is introducing a new feature called Gravatar Hovercards. It […]

  10. Any idea how to get this working with IE? I get “Object doesn’t support this property or method” gprofiles.js line 331 character 3 from all sites using this. Thanks for the code btw, works great in FF

  11. Because I’m a sucker for optimization and couldn’t resist, your entire plugin could be replaced with this one line of code:

    wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', true );

  12. […] for the above code goes entirely to Otto and Alex. It is not official and not supported, so you should probably switch over to […]

  13. Thanks for this! Works perfect.

  14. Very neat post once again Otto. Also, didn’t know that s.gravatar.com is a global CDN, I thought it was more probably distributed across several datacenter in the US only (that’s what wp.com is, right?)

  15. […] si no tienes ganas de esperar Otto tiene la solución, crea un archivo llamado hovercards.php, copia y pega en el siguiente […]

  16. I can’t get this working on my custom theme (based on the old wordpress default kubrick). I’m guessing I need to do something in my comments template? Currently my theme displays comments using . Switching to twenty ten temporarily for testing and it all works fine…

  17. I noticed I get an error in IE with certain themes, 2010 weaver, (this site) for example when using this. Object doesn’t support this property or method line 331 char 3.
    It works fine with twenty ten on wordpress.com and webtoolscollection. Anyone have any idea what might be causing it?

  18. […] blogs and they are working on an official plugin for self-hosted wordpress blog installations. Otto wrote a piece of code which immediately enables gravatar hovercards in your self-hosted wordpress […]

  19. […] plugin and they will automatically appear. No configuration necessary! This plugin is based on code from Otto of OttoPress.com. Please note that it is not the official plugin, but it works. Install […]

  20. It is very funny I love this plugin. Now I would like to see shows my avatar …

  21. Works fine. Thanks. 😉
    Bye,
    Emanuele

  22. I really love a 4 line plugin… especially one that adds such great functionality. Thanks for this!

  23. Hey, I have implemented hovercard in my website (not wordpress blog). work properly.

  24. hi, I recently installed jetpack on my blog but Hovercard does not work! I can see my hover card whenever I go to Settings>>>discussions though.

    maybe there’s something wrong with my theme?? anyway, was wondering if you could help me out with this??? thanks.

  25. […] because many of the blogs didn’t support it and there was a lot of plugin interference. Otto of WordPress came through a solution of inserting a short script in your theme’s functions.php file, but […]

  26. […] hope this will work for you. Credit goes to Otto. jQuery(document).ready(function($) { […]

  27. […] Credit for the above code goes entirely to Otto and Alex. […]

  28. […] I hope this will work for you. Credit goes to Otto. […]

  29. […] Fuller posted this modification of the code from Ottopress.com that adds Gravatar hovercards. Rich has loads of other hacks and tips that you’ll want to […]

  30. […] I hope this will work for you. Credit goes to Otto. […]

  31. Thanks Samuel helping me out i was looking for this only but i wanted to intergrate my gravatar left side of the title but couldnt find it can you help me out ??

Leave a Reply to como agregar hovercard a wordpress. Wordpress En Acción Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Need to post PHP code? Wrap it in [php] and [/php] tags.