This is a guest post by Kimberly. She blogs at Just-ask-kim and share Blogging and WordPress tips. If you would like to write for ShoutMeLoud, check our guest posting guidelines.
Gravatar Gets Even Better With HoverCards!
If you haven’t taken the time yet to fully fill out your Gravatar.com profile now is the time to get it done!
Gravatars are a great way to brand and personalize your comments you leave on blogs and have become ubiquitous in the blogging and social media communities.
Back in May, Gravatar got a sizeable upgrade with the introduction of full Gravatar profiles and the ability to link them to other social media accounts.
More recently, both WordPress.com and WordPress.org official sites were upgraded to integrate a new HoverCard feature that made these extended profiles more noticeable.
A HoverCard is essentially a context-aware tooltip that provides access to these profiles when the website visitors mouse “hovers” over the gravatar image next to the comment. Hovercards also allows a user to take action on clickable features built into the card.
These are similar to the Twitter @Anywhere HoverCards that can be integrated into WordPress only rather than being attached to the twitter ID as is the case for @Anywhere cards, these are attached to the Gravatar image of the commenter.
Just a few weeks ago, all WordPress.com blogs got HoverCard Upgrades to enable the Gravatar HoverCards across the WordPress.com platform.
Two days ago it was announced that not only is an official plugin for adding HoverCards to WordPress.org blogs on the way but that some creative community members have figured out how to provide us with the code to either upload as a plugin type file or add to our custom functions file.
Code excerpt courtesy of WeBlogTools Collection who got it from Alex and Otto linked below:
If your theme has a functions.php file, just add the following line within the file:
wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', true );
If your theme doesn’t have a functions.php file, or you’d rather not mess with it, use a plain text editor to create a file called hovercards.php with the following content, then use an FTP or SFTP client to upload it to the /wp-content/plugins/ directory, and activate it via the Plugins section of the admin panel.
< ?php
/*
Plugin Name: Hovercards
*/
wp_enqueue_script( 'gprofiles', 'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ), 'e', true );
?>
Credit for the above code goes entirely to Otto and Alex.
The profiles are now moderately full featured and you will find them easy to set up (and get a nice backlink to your blog)
So what do these cards look like?
Here you can first see what the default card looks like if your profile is not completed:
This is a big contrast to how much better (and more useful) the cards are once you have completed your profiles!
The difference is rather amazing and the second card is very useful with active links!
This means that when you leave a useful comment, not only can someone now easily find your blog link but they can also connect with you through social means much easier.
You can update your profile by logging in at Gravatar.com and then going to My Account -> Edit Profile. There you can customize your full Gravatar profile (which is new if you haven’t been there recently).
With the awesome links and ability to further relationship building these are really very nice!
Are you making the most of YOUR Gravatar account yet? Have you commented on many blogs yet that have integrated the HoverCard and checked them out? This is certainly something that will be more common in the very near future. Will you add the code for these to your blog now or wait on the official plugin or skip them altogether?
If you enjoyed this post I hope you’ll share it and I look forward to reading and replying to your comments below!
Subscribe Updates, Its FREE!
→ 
→ 
{ 15 comments… read them below or add one }
Good to know. thanks. Activated it on my own blog and works all right! Cheers!
Thanks Mr Tom! Did you use the function version or the php file version? Appreciate the comment!
Kimberly
This is awesome Kimberly. My understanding was that only the WP.com blogs had the feature.
Hey Eddie! Well that’s kinda true – they DID until Otto and Alex decided we needed them too! Yay for coders! It will be nice when an official plugin arrives just to know they wont break this code but for now its fun to have shiny new toys! (It also makes updating those profiles a LOT more important!)
Thanks for the comment,
Kimberly
A boon for webmasters as well as new bloggers to get more about the profile of the commenter as well as easy to get in touch of commenter!
thanks!
I totally agree! I’m really loving being able to see more about who has commented and have an easy way to do things like find them on twitter. I don’t always want to go to their blog and hunt for their twitter links that are hidden half the time so this is perfect.
Thank shashank!
Kimberly
Kimberly thanks for this tutorial. I implemented it, you can see it live on my blog: Juniorhero.com
Athul, thanks for the place to check it out! Did you use the short function, Otto’s fuller function or upload the php file version? I got it to work for most of your visitors but I couldn’t get it to work for comments left by you and I wonder if you’re not using your gravatar email as you’re blog profile’s email? Just curious why it seems to have that hiccup. At the moment I’ve got the short version of the function and I have cards ONLY in the dashboard. My guess is I’ve got a plugin interfering that I haven’t had time to track down. Kinda neat to see more about my commenters though!
Thanks again Athul!
Kimberly
Cool Arif, did you use the short function, Otto’s fuller function or upload the php file version? Thanks for sharing and commenting! Much appreciated!
Kimberly
very useful tutorial , i have actually started learning about these kind of things , and i loved the new way of personlizing comments i have left on blogs !!!!
Hi Kimberly,
It looks good and it also good for branding for the commentor. I am going to implement in my blog.
Thanks for Sharing
-Imran
Hi Kimberly,
Nice article, hover cards provide a great way of sharing user information!
Wow, another cool feature of WordPress!!
I didn’t know this, thanks Kimberly for this info. I guess it is really interesting to try.
I’m going to try it in web6, since i disabled gravatar for comments (speed up thingy reasons).
Will let you know how it will work, thanks!
Does this autoamtically apply to everyone who has a gravatar account or do I still need the code?
The hovercards work on a blog by blog basis – so you have to add the codes to your blog if you want to enable hovercards for your visitors, VA.
Kimberly