Zach’s ugly mug (his face)

Zach Leatherman

Scare Your Visitors with this JavaScript Gravatar Plugin

January 08, 2009

See the Demo

Download the Source Code

Tournology Blog Comment Form

Here’s a use case. An unregistered visitor visits your blog, and decides that your content is so good that it merits a comment! Congratulations, you’ve fooled them! Now you can twply their account details for $1200 on Sitepoint! Just kidding. But generally, when you visit a blog’s commenting section (such as the Tournology Blog shown above), you’ll see a simple form to authenticate you’re not a spammer, generally including (among other things) an e-mail address field.

Tournology Blog Comment Form With Gravatar

Well, since they’re typing their e-mail address, wouldn’t it be cool if we could show them their gravatar right there, inline with the blog comment form? Well, that’s now possible with my new JavaScript Gravatar Plugin! It doesn’t have any server side language dependencies.

Gravatar Signup Page

Hell, gravatar.com could even use this to improve the user experience of registering your e-mail account. Right now it does a full page refresh and doesn’t even show you a preview!

See the Demo

Download the Source Code

Licensing

Licensed under the WTFPL, as highly recommended by Isaac Schleuter (see discussion).

JavaScript Dependencies:

  • Requires jQuery (Feel free to port and post a link!)
  • Requires md5.js

Example Usage:

Easiest form, onblur of email text input field:

$('#emailTextField').blur(function(event) {
$(this).after($.gravatar($(this).val()));
});

Showing all options, again onblur of email text input field.

$('#email').blur(function(event) {
$('body').append($.gravatar($(this).val(), {
// integer size: between 1 and 512, default 80 (in pixels)
size: 200,
// maximum rating (in order of raunchiness, least to most): g (default), pg, r, x
rating: 'pg',
// url to define a default image (can also be one of: identicon, monsterid, wavatar)
image: 'identicon'
}));
});

Update: This script has been moved to Github.

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Registration Forms Suck, Let’s Mitigate Suckiness
Next
DOMContentLoaded Inconsistencies (in Browsers and JavaScript Libraries)
6 Comments
    1. hey!! Disqus

      09 Jan 2009
      hey i want a downloadable version of alarmdso we can use our own computer songsand not be dependent on the internet (sometimes internet goes down)aye
      1. Zach Leatherman Disqus

        09 Jan 2009
        Added this to the official jQuery plugin repository:http://plugins.jquery.com/project/gravatar
        1. Zach Leatherman Disqus

          09 Jan 2009
          Well, it's certainly nice to see that someone reads my posts.If I ever get bored, I might look at porting to AIR. Or if Gears ever adds file access. But, generally these things are managed on the Google Code page.
          1. Adam Disqus

            10 Jan 2009
            But you don't have it set up on this blog! I wanted to see it in action besides the demo.
            1. Savion Disqus

              08 May 2011
              This is very cool! :)
              1. Traplift Gids Disqus

                01 Oct 2011
                thIS plUGiN iS reAlLy cool i sCared tHE heLl oUt OF SoMe pEOplE WItH It on MY wordpResS blog.

                Shamelessly plug your related post:

                Sharing on social media?

                This is what will show up when you share this post on Social Media:

                How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)