Scare Your Visitors with this JavaScript Gravatar Plugin

See the Demo #
Download the Source Code #

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 …


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

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.


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate Updates
APA

Zach Leatherman | Sciencx (2009-01-08T06:00:00+00:00) Scare Your Visitors with this JavaScript Gravatar Plugin. Retrieved from https://www.scien.cx/2009/01/08/scare-your-visitors-with-this-javascript-gravatar-plugin/

MLA
" » Scare Your Visitors with this JavaScript Gravatar Plugin." Zach Leatherman | Sciencx - Thursday January 8, 2009, https://www.scien.cx/2009/01/08/scare-your-visitors-with-this-javascript-gravatar-plugin/
HARVARD
Zach Leatherman | Sciencx Thursday January 8, 2009 » Scare Your Visitors with this JavaScript Gravatar Plugin., viewed ,<https://www.scien.cx/2009/01/08/scare-your-visitors-with-this-javascript-gravatar-plugin/>
VANCOUVER
Zach Leatherman | Sciencx - » Scare Your Visitors with this JavaScript Gravatar Plugin. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2009/01/08/scare-your-visitors-with-this-javascript-gravatar-plugin/
CHICAGO
" » Scare Your Visitors with this JavaScript Gravatar Plugin." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2009/01/08/scare-your-visitors-with-this-javascript-gravatar-plugin/
IEEE
" » Scare Your Visitors with this JavaScript Gravatar Plugin." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2009/01/08/scare-your-visitors-with-this-javascript-gravatar-plugin/. [Accessed: ]
rf:citation
» Scare Your Visitors with this JavaScript Gravatar Plugin | Zach Leatherman | Sciencx | https://www.scien.cx/2009/01/08/scare-your-visitors-with-this-javascript-gravatar-plugin/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.