Gravatar become very popular image recognition, it’s small image displayed almost on my WordPress Themes. After acquired by Automattic, Gravatar seamless integrated in WordPress.com. And for WordPress.org users, there are some ways to displayed on their site/blog. We can manually insert code into themes or using Gravatar Plugins.
Load Gravatar on the fly - Marie Digby
I will show you how to Load Gravatar Icon/Images on the fly using Javascript on your WordPress Comment, This code original design by Stephen Mcintyre. Let’s get started, you need to added this code in your comment form on comments.php
<img id="gravatar" src="http://www.gravatar.com/avatar/?s=80&d=wavatar" width="80" height="80" alt="Gravatar" />
Image code below is the on the fly area on the Gravatar will be, and wavatar parameter is to displayed random wavatar, if there are no email available.
Next Step is added extra JavaScript to call MD5 gravatar and load it on the fly
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/webtoolkit-md5.js"></script>
<script type="text/javascript">
var gravatar = document.getElementById('gravatar');
var email = document.getElementById('email');
email.onblur = function(e){
var key = MD5(email.value);
gravatar.src = 'http://www.gravatar.com/avatar/'+key+'?s=80&d=wavatar';
};
</script>
Please noted, you need to download webtoolkit-md5.js from WebToolkit and put it on your current themes folder. You need to put this code below your WordPress comment email field to make it work.
That’s all save it and you can test it your comment right now. For live tester, you can leave some comment on this site and check it, our Load Gravatar on the fly worked 
Good post. I see you have already integrated the code into your site, nice job!
However, the process isn’t quite as simple as you put it in this article, and takes some tweaking (giving the email field the ‘email’ ID for example) to make it work.
Very nice implementation though, this is exactly what I had in mind.
Thanks you Stephen, in our tutorial is what’s exactly I did in this site, why we not put email input? mostly comment email input is the same is on your tutorial. I will update the tutorial to tell everybody to put the javascript code below email input form on WordPress comment.
Thanks you for you nicely tricks, this is what I really want and I hope this one useful for others….
Pingback: Tweets that mention How To Load Gravatar on the Fly # WordPress Tricks & Tips -- Topsy.com
[...] This post was mentioned on Twitter by WordPress Tricks. WordPress Tricks said: RT @WPTricksNet How To Load Gravatar on the Fly http://goo.gl/fb/c8xeR #tricks #gravatar #hack #javascript #load [...]
Thanks you Stephen, in our tutorial is what’s exactly I did in this site, why we not put email input? mostly comment email input is the same is on your tutorial. I will update the tutorial to tell everybody to put the javascript code below email input form on WordPress comment.
Thanks you for you nicely tricks, this is what I really want and I hope this one useful for others….
This is good tips. thanks for sharing this little trick.
Thanks!
Thanks!
Works like a charm!
Is there a way to get rid of gravatar.com from wordpress and only use local avatars?
Thanks!
Nice tips…
Well, I’ve question here, if I don’t sign account from gravatar.com… and when I leave my comment to other site, can my default gravatar load out there?
Sorry my english not good.
I leave my comment to other site, can my default gravatar load out there?
Sorry my english not good.