standard post format icon

Gravatar Hovercards on WordPress

Gravatar Hovercard is now enabled by default in WordPress.com. How about self-hosted WordPress blogs? Andy Peatling mentioned in the comment on Show who you are with Gravatar Hovercards that they will also bring this to self-hosted WordPress blog very soon. They just can’t commit to a specific date as to when it will be implemented. That’s fine with me as I have just figured out how to do it. Can’t wait huh! 🙂

I was browsing my Twitter Timeline when I saw my auto tweet from TwitterFeed. I felt it was timely because just last week, I updated my gravatar profile.

[blackbirdpie url=”http://twitter.com/amorfrancis/status/26588429708″]

I visited OttoPress immediately. Tried the codes in my local install first, was so happy it worked so I tweeted it. Coolness!

[blackbirdpie id=”26606043772″]

From now on, everytime you put the  mouse over the Gravatar picture in the comments here, the Hovercard will appear. It will show informations taken from the commenter’s Gravatar profile. The more info included in the profile, the more can be seen in the Hovercard. Try it! No Gravatar Profile yet?  Just log in to Gravatar.com.

This Gravatar Hovercard looks like virtual business card, isn’t it?

Here’s  the exact code I am using in my functions.php

function gravatar_hovercards() {
echo '<script type="text/javascript" src="http://gravatar.com/js/gprofiles.js"></script>';
}
add_action('wp_footer','gravatar_hovercards');

Easy, no? Thanks OttoPress! 🙂

Here’s the complete plugin code from Otto.

<?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');

 

You can save this as gravatar-hovercards.php in your Plugins folder (wp-content/plugins), activate and voila! You have hovercards too! Easy as 123.  🙂

Update: I ended up using this one line of code in functions.php.

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

Related Posts

  1. Creative Twitter T-shirts
  2. My 5 Favorite Google Chrome Extensions for Twitter
  3. Google+ Shark, I am
  4. My First Tweet and other Stats

14 thoughts on “Gravatar Hovercards on WordPress”

  4. I like this new feature and the plugin seems to work great but conflicts with some other plugins I was using.
    Lightbox 2 causes it to break in IE, and with Wizzart recent Comments the comment link directs to the users gravatar profile page instead of the comment, might happen with other recent comment plugins that display Gravatars as well, I haven't checked.
    Seems to work well if I'm not using those addons though and thanks for the post, I really like this new feature.

  8. I posted on a few forums trying to figure out what was causing the error in IE. and had some replies here http://wordpress.org/support/topic/hovercards-on-self-hosted-theme-issue?replies=30#post-1739741

    When you add a meta description tag on your page, i.e. <meta name="description" content="…" IE adds a global JavaScript variable called description, that returns the meta tag.

    One of the gravatar functions is using a description variable but not defining it as local scope. So IE thinks it should use the glboally defined description var. But IE apparently doesn't like converting objects to strings, which is why it's throwing the error.

    Ayways, adding this to the head fixes it in IE. [code]<script type="text/javascript">var description = '';</script>[/code]

  9. Nice, Amor! Will add this feature on my blog when I have enough time. You really couldn't wait, but you have the "power" naman to make it done. 🙂

  10. This is a great new feature ! 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

    • Yes this is a great feature. Can't wait for the official plugin. Hope it will be implemented soon. 🙂 Thanks for the visit!