post-page

Add Hovercards to Your WordPress Blog

40
responses
by
 
on
October 10th, 2010
in
WordPress, WordPress FAQs, WordPress Tips

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

Hovercards have already been enabled throughout WordPress.com and WordPress.org, and there is an official plugin in the works, but what if you can’t wait for the official plugin to add Hovercards to your WordPress blog?

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. It is not official and not supported, so you should probably switch over to Gravatar’s official plugin when it’s released, but at least this will hold you over until then.

What do you think of the new Hovercard feature? Will you be adding it to your blog?

Update: The code listed above, while leaner, enables Hovercards everywhere (including the admin panel), which may not be a desired outcome for some users. If you find this to be a tad bit annoying, Otto’s code properly displays Hovercards on the blog side only.

heading
40
Responses

 

Comments

  1. Rednights (3 comments.) says:

    A mini e-business card … looks very nice, can’t wait for an official plugin.

  2. Mark Ghosh (386 comments.) says:

    Trying out hovercards on this blog. Just hover over my gravatar icon.

  3. Arun Verma (1 comments.) says:

    Seems to be a really nice thing as it will always give a uniqueness if there are many authors on a blog

  4. Home of cats (1 comments.) says:

    The effect like HTML5 effect, like it…

  5. Daniel Maier says:

    Hi, I did how you said but it just makes the pictures to blink, something like almost loading the hovercards and then goes off… Do you know what could be messing up?

    Thanks.

    • James Huff (62 comments.) says:

      There’s apparently a known limitation with the hovercards that if you use an email address besides your Gravatar account’s primary email address, you’ll briefly see the hovercard effect, but no hovercard will appear. I’m waiting for official confirmation on this.

      If you are using your Gravatar account’s primary email address, try switching to the Twenty Ten theme to rule-out a theme-specific issue.

      • Andrew Nacin (11 comments.) says:

        It is a known limitation and the reason is privacy.

        • Daniel Maier says:

          I don’t get the privacy thing. If you don’t want the pop-up to work just exclude the extra e-mail from Gravatar profile.

          What do you exactly mean with the privacy thing, related with multiple e-mail accounts in Gravatar and the hovercards pop-ups?

          • Andrew Nacin (11 comments.) says:

            There is currently no public way to identify two different emails, created under the same Gravatar account, as being linked. Having a secondary emails link to the primary’s profile would expose that link publicly.

            You might have an alternate identity you use, but you don’t want that tied back to your real name. At issue might be a secondary email address you use on particular a forum you often visit. You don’t use your real name on that forum, and perhaps you don’t want that information to be known, especially if you’re posting to a Justin Bieber fan site and you’re really a 22-year-old WordPress core developer. You can invent more creative problems with the knowledge that Gravatars have ratings, from G all the way to X, but there are of course serious privacy issues at play here.

            They are aware of the limitation. The solution, I imagine, would be requiring an opt-in.

            Nacin

          • James Huff (62 comments.) says:

            It would be nice if they provided such an opt-in policy. This 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 my 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.

          • Daniel Maier says:

            Thanks for the explanation bro.

  6. Zoran (2 comments.) says:

    Yeah, it’s great for commenters who want additional exposure but it steals attention from the original post and the blog at the first place. And the gravatar animation… Give me a break! What’s next? Sound effects on mouse-over? Blinking lights? How about some “Flash” in the hovercards? And what’s with all those links inside that are (ofcourse) “dofollow”? Do I really need to know that one of my commenters is a blogger, a husband and a father (not in any order). Do my readers need to know that? I’ll spare you the dilemma – they don’t :)

  7. Daniel Maier says:

    Hi James, thanks for the feedback!

    I just tried switching my default e-mail address in Gravatar to the one I used in my website and it worked!

    Definitely there is some issue in recognizing the extras e-mail addresses in the hovercards…

    Thank you!

  8. that girl again (41 comments.) says:

    I feel that if hovercards were customisable to match your theme I might not loathe them as much, but as they are they make the dormant designer in me cry a little bit inside.

    • Ray (6 comments.) says:

      I will second some of the thoughts expressed here, make it match the theme and why so many darn links with dofollow? And there is definitely the question of who really wants to add a popup – a popup that takes away so much from the blog itself?

    • Teresa (1 comments.) says:

      Actually, that girl again, the gravatar is customisable and it does carry through in the background of the hovercard. I think it’s another great way to carry your branding through everything.

      Hugs and butterflies,
      ~T~

  9. Andrew Nacin (11 comments.) says:

    wp_enqueue_script() should not be called in global scope like that. It should be attached to a hook, like init.

    All plugin code, without really any exception, should be attached to a hook.

    • Andrew Nacin (11 comments.) says:

      The proper hooks would actually be wp_enqueue_scripts or admin_enqueue_scripts.

    • James Huff (62 comments.) says:

      Thanks for pointing that out! I guess I got carried away with the simplicity. The post has been updated.

      • Andrew Nacin (11 comments.) says:

        I may have spoken too soon. You can revert your changes.

        It used to be that you couldn’t call wp_enqueue_script() before a certain hook. You’ve been able to for quite a while, however. I was thinking of modifying the $wp_scripts global directly or overriding core scripts, as for those, you have to wait until a hook. The best hooks for those are the aptly named wp_enqueue_scripts, and admin_enqueue_scripts.

        I would still strongly suggest you attach everything to a hook. But since the code here is so dead simple, I would just use the one-liner that Alex proposed in Otto’s comments, that you have re-purposed here.

        • James Huff (62 comments.) says:

          Thanks for replying with the details! I guess I can stop reading hook documentation for tonight. :)

          The post has been reverted.

  10. Dave (15 comments.) says:

    Pop-ups are an abomination. Why any serious blogger would choose to deploy something like this is beyond me.

  11. zeaks (1 comments.) says:

    I like this hovercard feature, I used it on my own site but had issues with lightbox 2 plugin causing it to break in IE

  12. palPalani (7 comments.) says:

    I like this hovercard feature, it is very cool!

  13. Corporate Photographer (1 comments.) says:

    Will the hovercards be coming out as a plugin for wordpress? Grant

  14. Sahas Katta (6 comments.) says:

    Heh, this might get a bit annoying soon. Twitter’s @anywhere technology offers hovercards for any username. Facebook is also bringing that hovercard functionality to any profile link to the web soon.

    Adding Automattic’s Gravatar profiles is yet another option. Considering that the latter two are larger networks, don’t know if I’d add Gravatar Cards over Twitter and Facebook just yet.

    Nonetheless, great idea. Just too much JS to load, important to be picky.

  15. Tom Coburn (67 comments.) says:

    Does anyone know how to put the Author’s Gravatar beside the post title of all blog post? you know how buddypress does it by default? How do you do that in wordpress 3.x? I have tried to make gravatar’s global, but I have been unable to figure out how. It won’t let me use the gravatar code in anywhere except the comment loop :(

  16. DJSlim (1 comments.) says:

    just added to both my blogs

    http://idolbloglive.com
    http://farmvillerant.com

    and it works great. Do we really need the plugin when this works just as well?

  17. WpHey (21 comments.) says:

    Thanks for the plugin, but I think I will wait for the official release.

  18. Kimi (1 comments.) says:

    Thanks for this!

    I have applied in my website, and it worked. Great feature, love it!

  19. Pankaj Pandey (1 comments.) says:

    Is there any code available where i can pull all data from hovercard and display in widgets?

  20. Dave says:

    This was super helpful! Thanks for the tutorial :)



Trackbacks/Pingbacks

  1. [...] hat tip to the wonderful blog about blogging, Weblog Tools Collection, who featured the code to activate this [...]

  2. [...] users can enable Gravatar Hovercards via a hack (for you geeks out there), although most users not familiar with PHP should probably wait for an [...]

  3. [...] 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 [...]

  4. [...] Add Hovercards to Your WordPress Blog [...]

  5. [...] Hovercards -various blogs have posted about how to add these to your WordPress blog yourself (as I have done). Alternatively, download a plugin from the [...]

Obviously Powered by WordPress. © 2003-2013

page counter
css.php