Gravatar Hovercards on WordPress.com

October 06, 2010 | Posted by Beau Lebens

You thought Gravatar Profiles were cool? Wait until you see them on all WordPress.com blogs.

Today we’re upping your Gravatar Profile to a new level of awesomeness with Gravatar Hovercards. It’s now easy to find out about who is behind your favorite comments on WordPress.com simply by moving your mouse over their Gravatar.  This new feature is enabled by default across WordPress.com.

What’s a Hovercard?

Gravatar Hovercards show information about a person: name, bio, pictures, and their contact info at other services they use on the web like Twitter, Facebook or LinkedIn.

As a commenter, Hovercards offer a great way to show your Internet presence and help people find your own blog. If you’re a blogger on WordPress.com, you can quickly check out who’s commenting on your blog, and have an easier time connecting with them.

How to use and see Hovercards

You can see other people’s Hovercards by moving your mouse over their Gravatar picture in comments on any WordPress.com blog, and after a moment the Hovercard will appear. The information shown is taken directly from the person’s Gravatar profile. The more info in the profile, the more we show in the Hovercard.

If you haven’t set up your Gravatar Profile yet, just log in to Gravatar.com and fill out your details under Edit My Profile. If you don’t have an account yet, you can sign up here.

Check back soon for details on how to add hovercards to your own website, or any site currently using Gravatars.

76 Responses

  1. Slik says:

    The Gravatar Hover Card is a very nice feature for wp.com thanks for the new addition… :)

  2. Honjii says:

    I attempted to edit my profile, to more effectively use the hovercards feature, but when I click on the ‘edit profile’ link the browser closes.

  3. bernardokyotoku says:

    Ok, not much feedback section on your main page. It would nice. Look how http://www.zoho.com and http://www.mendeley.com do.

    Where is facebook connect, or any of OpenID server like google. Everybody has photos on that. Actually you should implement them all. This way you solve a problem that is for developers getting avatars from your site to don’t need to learn how to get avatar from every variety of avatars sources like facebook, google, twitter… they would get only yours. By the way, watch out if they are not standardizing the getting avatar protocol.

    Cheers, good luck

  4. Chris Cree says:

    This is a great new feature, Beau! Seems like it will encourage more folks to fill out their Gravatar profiles and make it easier to connect with them. I’m looking forward to the plugin so we can add it to our self-hosted WordPress sites. :)

  5. [...] introduces Gravatar Hovercards: Is WordPress(.com) becoming a social network? [...]

    • not only wordpress.com but any other site that has gravatar hovercards enabled that can be millions of sites all coming together under one comunity, this can be called an evolution of social sites. i like this much more.

  6. This is another small but great step for WordPress(.com).

    BTW: Automattic’s, I’d really like to read your answer here: http://wp.me/pcOTe-3fJ Where are you, where are we going to?

  7. finid says:

    Does it also work on self-hosted blogs, or just on hosted?

    • Beau Lebens says:

      This release is only for WordPress.com, but we’ll be releasing a plugin for self-hosted WordPress soon.

      • digitalangeldonnadj says:

        I found a plug-in for it in my self hosted blog back office and installed it. I activated and it doesn’t work. :(

        However, it does work on my wordpress.com blog though.

        I have two blogs, one self hosted and the other wordpress.com hosted. :D

  8. Florentina says:

    This is fantastic! Can’t wait for the release of the plugin for the self-hosted WordPress blogs.

  9. demaier says:

    This is great, I’ll be waiting for the self-hosted plugin version :)
    Cheers!

  10. Soléa says:

    Je viens de cacher cette fonction, sans faire exprès, un clic au mauvais endroit, comment faut-il faire pour la remettre ?
    D’autre part, il était possible il y a encore quelques jours d’avoir en pointant la souris sur une adresse blog ou d’un site, un aperçu de celui-ci. Apparemment cela a disparu. Comment peut-on le remettre ?

    • Beau Lebens says:

      If you’ve clicked the “turn off hovercards” link, you need to manually delete the cookie that’s been set in your browser to re-enable them. Go into the cookies in your browser and search for cookies under the domain “wordpress.com”. Delete the one called “nohovercard”.

  11. [...] Signup Encouragement 2.08 October 2010 Do you like new Gravatar Hovercards? Why don’t you prepare your visitors without Gravatar for the upcoming plugin with this [...]

  12. Ben Cotten says:

    Very cool indeed. Can’t wait for the self-hosted plugin. I’ll implement this for sure.

  13. Glad you have a ‘hover intent’ delay on there so that they don’t pop up unintentionally as your mouse moves across the page. I’d probably make the delay ever so slightly longer, but that’s me. Looking nice!

  14. Ken Pyle says:

    This is a really cool feature. Great job, Automattic!

  15. Milan says:

    Performance:

    minification of JavaScript file
    merging of CSS files and minification of a new file
    sprite with other images, maybe even merged with services sprite

    Internationalization:
    It’s unbelievable that someone who have experience in development doesn’t care about i18n.

    Oh, wait its Gravatar, where translators waste time on translations that are never deployed! No I understand…

    (for third-party readers who think how this can be solved, instead of hardcoded strings, we need variables got from json request to locale subdomain)

    • Beau Lebens says:

      Milan, it’s not (at all) that we don’t care about i18n. Quite the opposite — we are aiming to get our English-based implementations solid first, since that’s what all of our developers speak. Once that is good, then we roll out internationalization options/features. We are also going to be tuning some of the performance details you’ve pointed to above, but optimizing prematurely slows down development iterations, so we put that behind the initial launch.

  16. [...] recently launched Hovercards, a new feature that servers as a nifty bridge between your Gravatar and your Gravatar [...]

  17. DB Ferguson says:

    Thanks for this wonderful feature! I actually learned about this through the Weblog Tools Collection blog, where I was able to capture the code to add this feature to my self-hosted WordPress blog. Blogging about the feature to my readers right now!

    http://weblogtoolscollection.com/archives/2010/10/10/add-hovercards-to-your-wordpress-blog/

  18. quicoto says:

    Awesome guys.

    Keep up the good job :)

  19. Nici says:

    I love it!
    Waiting for the self-hosted plugin…

  20. Nicholas Teo says:

    The Hovercard is beautiful. I’m looking forward to the plugin so I can add this great feature to my self-hosted WordPress sites. This will encourage more people to fill out their Gravatar profiles too; I certainly would update mine often.

  21. Tarique Sani says:

    Add another vote for the plugin. The feature is really cool!

  22. quicoto says:

    I was wondering… Why I have to verify Flickr or Facebook?

    Why you don’t just let me put the user and link there?

    I’m sorry but sucks to allow access in Flickr or Facebook :(

    Regards

  23. Tarique Sani says:

    Some of the Gravatars are not showing Hover cards, eg: Nicholas Teo and mine. Is this a bug or something has to be enabled somewhere….

  24. The hovercards are cool! Does anyone know if it’s possible to link to just the Facebook Page for my business and not to my own Facebook profile?

  25. Victor D says:

    It’s realy cool. I’ll write about this on my blog ;)

  26. piqueanne says:

    I’ve opted for secure connections, and Gravatar is apparently using an out of date certificate somewhere in its system. I get errors from time to time.

  27. digitalangeldonnadj says:

    I also think it would be cool to add the icanhascheezburger sites to be verified eventualy too. They use a wordpress platform on their own sites, but they also have it where people can create a profile there, so it’s also a social networking site, as well. I think the profiles are hosted on cheezburger.com

  28. mrappleman says:

    Wow the internet just keeps getting more social.

  29. moneytothebank says:

    This is a great new feature and informations to start with Gravatar.com, Fantastic !!! Seems like it will encourage more folks to fill out their Gravatar profiles and make it easier to connect with many friends. I am looking forward to the plugin so we can add it to our self-hosted WordPress sites and others… :)

  30. vipin says:

    this is a really cool service. I am right now writing a post about this service.

  31. bruha says:

    Cyrillic links (anchors) looks like %u0414%u0430%u0432%u043B%u0435%u043D%u0438%u0435 %u0441%u0432%u0435%u0442%u0430. %u041D%u043E%u0432%u043E%u0441%u0442%u0438 %u043A%u0443%u043B%u044C%u0442%u0443%u0440%u044B

    )=

    • Beau Lebens says:

      Ouch! Looks like we have an encoding bug. Can you please email support [a] gravatar.com with details on where you edited your profile, a link to your account etc and we’ll see if we can get it fixed up?

  32. Anas says:

    I like this,, And I implemented on My Site (not wordpress blog). Thanks. It’s great feature

  33. Gary says:

    Gravatar Hovercards are awesome! The promote much more visitor interaction and promote commenting. Thanks for the great feature!

  34. katmyran says:

    well i`m new at blogging and this feature will help me go a long way thanks.

  35. sensationalevents says:

    Beau – I am new to WORDPRESS and have a brand new website. Love my gravatar and just showed a media friend of mine how to set his up. I would love to change my comment section on my blog to have gravatar’s so it’s more personal. Do you know of a plugin for that? Here is a link to my blog so please let me know your thoughts: http://www.sensationalevents.com/blog-accolades

    Also, I would love to introduce this as a blog post. Any interest in being a guest blogger???

    Amy Petrovsky
    Sensational Events

    • Beau Lebens says:

      Gravatars are supported natively in WordPress (Settings > Discussion), but it’s up to your theme to actually display them. If your theme doesn’t do that, then you’d need to either modify your theme so that it does, or get a plugin like this one that injects them into the page.

  36. Marcus says:

    I live in Thailand. Every time I try to use Gravatar the site comes up in Thai, which I can’t read. It is very frustrating. Please please please add a ‘change language’ button to the site.

  37. Steven John Bosco says:

    My gravatar is for some reason using an old (and incorrect) link to my bog. The old link was aperspectiveonsacredliturgy.wordpress.com. I moved it to bymeansoforthodoxy.wordpress.com. However, the hovercard, when clicked, goes to aperspectiveonsacreliturgy.wordpress.com (a typo’d url that I must have mistakenly entered at some point), and I can’t find where to change it. I’ve changed the link on the wordpress profile to bymeans…, but that doesn’t seem to affect gravatar. Any help would be appreciated! I really like thia feature, however this is frustrating me.

    • Beau Lebens says:

      Once a comment is made on a website, your URL/link is saved with that specific comment. Changing your link in Gravatar will not (and can not) go back and change it on all of those links I’m afraid.

  38. I would love to use Gravatar but can’t create an account with a username that contains space. Now by looking at people using gravatar a lot are using their full name,- which includes space. Or how is it done???

    • Beau Lebens says:

      Your username can’t contain spaces, but once you’ve set up an account you can change your “Display Name” to your full name (or anything else containing spaces).

  39. Rudy Pohl says:

    Hi Beau:

    I’m pretty new to the whole blogging thing and a complete Newbie to Gravatar, but I did set up my account today, uploaded my picture and got it all working. I’m very intrigued by the Hovercards and was wondering if we will ever be seeing them on stand alone WordPress sites, which is what I have?

    Thanks,
    Rudy

  40. Pete Lauder says:

    Great to see this on self hosted WP blogs now.

  41. Jonny says:

    Is there anyway to styling these to look as want them in your site? Does it use javascript?

  42. Thanks to bring Hovercards into Jetpack package!

  43. eliepalima says:

    hi,

    I was wondering how I could get hovercard work on my site??? I recently got the ‘jetpack’ plugin installed that contained this plugin but wasn’t been able to make it work on my site: elie-palima.com was wondering if you could help me out with it?? thanks.

  44. Carrie says:

    I love the Hovercards feature! Really cool idea.

  45. Also, seeing that we can’t add e-mail addresses and photos without losing the ability to display the hovercard for the additional ones (still don’t know why)… should we just set-up multiple Gravatar accounts, with one for each e-mail so that we can display a hovercard for each?

    • Bart Volgers says:

      Just found a workaround :-)

      Go to Gravatar.com delete the secondary address

      Go to wordpress.com login to your account with the same credentials you use for gravatar.

      Chance your e-mail to the e-mail deleted secondary gravatar e-mail.
      Confirm the change
      Change it back to the primary gravatar e-mail address
      Confirm the change

      This releases the secondary e-mail address. (can take a while)
      For me it was now possible to register a new gravatar account for the secondary address.

      :-)

  46. [...] hovers over their avatar image in the comments. You can see a live example on the WordPress.com Gravatar Blog where they first revealed the new feature. With Jetpack, you can easily turn this feature on or [...]

  47. nilsdannemann says:

    Really nice!

  48. Beau Lebens says:

    Gravatar Hovercards are available in Jetack: http://jetpack.me

  49. ed says:

    Hi! I love this feature and we have implemented it on our site (and first Memolane enabled WP theme at tabletracker.me)
    thing is, it has some very weir behavior. Two major problems: my account displays properly, my emails the same, however… I am told that my profile link shows someone else’s! I know this because I recognize the name (its a cousin of mine who also uses the service) so, what gives? Any ideas?

    Now, the other one. in the same site, my colleague cannot get this thing to work at all! In spite of having everything set properly! Er? Any idea there?

    • Beau Lebens says:

      It sounds like perhaps your email is set up on a different account? And for the other one, perhaps you’re hovering over a Gravatar that’s loading from a non-primary address? Currently only the primary email address on an account will trigger the hovercard. If you email support@gravatar.com with full details (and links to examples) we can get you sorted out.

  50. YoU says:

    This is pretty nice. It can get even better if we can change the background and customize the CSS bit to get more integrate with our sites.

  51. Thanks for all the excellent wordpress.com tools for webmasters.
    Best Regards.

  52. Beau,

    How do I change the hover action and shape of the gravatar to that of a circle? I’m using hovercards via Jetpack.

  53. gmail says:

    nice ,,, i have plugin to install on my wp site

an    joint
Follow

Get every new post delivered to your Inbox.

Join 9,085 other followers