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.


< Newer
Registration Forms Suck, Let&#8217;s Mitigate Suckiness
Older >
DOMContentLoaded Inconsistencies (in Browsers and JavaScript Libraries)

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

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
  2. Zach Leatherman Disqus

    09 Jan 2009
    Added this to the official jQuery plugin repository:http://plugins.jquery.com/project/gravatar
  3. 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.
  4. 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.
  5. Savion Disqus

    08 May 2011
    This is very cool! :)
  6. 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

These are webmentions via the IndieWeb and webmention.io.

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)