Learn how to add Gravatar (global avatar) support to your web sites.
Have you ever seen those small images located on posts and comment forms? Normally the image is a picture of the company or author of that post. Problem is, many sites require you to upload an image and then you have to keep track of them all.
That is where Gravatar comes in. They offer a free service that allows you to connect your email address with a global image that can automatically be displayed on all sites that support Gravatar images.
I am in the process of developing a much larger and feature packed version of Scriptplayground, which will be using a modified version of this script.
In this tutorial you will learn how to include Gravatar support for your members as well, so let's get started.
Here is the complete code, which will be explained in just a moment.
<?php // The users email, passed to Gravatar $usersEmail = "firstname.lastname@example.org"; // A default avatar to load if Gravatar // doesn't find one. $defaultImage = "http://domain.com/default.png"; // The size of the image $avatarSize = "50"; // Minimum rating for your site // Possible values (G, PG, R, X) $avatarRating = "G"; // Border around the image $avatarBorder = "000000"; // URL for Gravatar $gravatarURL = "http://www.gravatar.com/avatar.php?gravatar_id=%s &default=%s&size=%s&border=%s&rating=%s"; $avatarURL = sprintf ( $gravatarURL, md5($usersEmail), $defaultImage, $avatarSize, $avatarBorder, $avatarRating ); print "<img src=\"" . $avatarURL . "\" width=\"" . $avatarSize . "\" height=\"" . $avatarSize . "\" />"; ?>
The "key" that Gravatar uses is the email address of your member. So, start off by defining that in the
$usersEmail variable. If Gravatar is unable to find an avatar for the user, a default one will be loaded from your site. The
$defaultImage is where you need to provide an absolute path (domain name included).
$avatarSize sets the width and height of the avatar. This variable is also passed to the Gravatar service, which ensures the correct size is returned.
Gravatar allows sites to limit the avatars that are loaded, based on a minimum rating system, similar to the one you find on movies and games. The
$avatarRating variable can accept four values, ensuring the proper avatar is displayed on your site.
The last variable that is user customizable is
$avatarBorder which will render a border around the image, based on the color you set. This value will accept and HTML color value such as 000000 for black or FF0000 for red.
The remaining bits of code are used to construct the Gravatar URL and print the response (the image) to the screen. The URL is constructed using
sprintf(), with the variables you have previously assigned being passed in
As you can see the Gravatar service is meant to be easy to interact with. No advanced API's or lengthy documentation required to implement this in to your own web site. You could also wrap this into a class, allowing you to use it across many of your projects
I hope you have found this tutorial useful, and if you have any questions, please post a comment using the form below
arabw-pearl Wed Dec 17, 2008 6:37 am
this is wonderful tutorial .. i read it many times and get a fantastic results and sure i will put a
copy of this lesson on my site here www.arabw-pearl.com
mkeefe Sat Jan 10, 2009 7:02 am
@arabw-pearl - Glad you liked it, however, please request usage before copying content from Scriptplayground.com and placing it somewhere else. Thanks.
Will Sat Jan 31, 2009 12:57 pm
Can you tell me how to aply this script to the html page? Do I need to insert a form or something that refers to this script?
mkeefe Sun Feb 1, 2009 6:48 pm
@Will - This PHP code will display the HTML code for the Gravatar image. You could also include this file in an existing page, if you prefer.
will Mon Feb 2, 2009 3:30 pm
So can you please tell me why it is not working on this page?
mkeefe Mon Feb 2, 2009 4:35 pm
@Will - You need to be using a .php page. For example
Will Mon Feb 2, 2009 6:03 pm
OK thanks I figured that. But what do I insert into the html page above to reference the php page?
mkeefe Mon Feb 2, 2009 6:10 pm
@Will - You really can't, however you could output the image URL and hardcode the width/height, such as:
and then simply place the path to the PHP file in an img tag:
<img src="path/to/image/gravatar.php" />
Hope this helps.
Will Tue Feb 3, 2009 2:09 pm
Well I tried that. This is whats on the html page where I want the Gravatar to display
And here's my Gravatar page called GravatarWillF.php
// The users email, passed to Gravatar
$usersEmail = "email@example.com";
// A default avatar to load if Gravatar
// doesn't find one.
$defaultImage = "http://domain.com/default.png";
// The size of the image
$avatarSize = "50";
// Minimum rating for your site
// Possible values (G, PG, R, X)
$avatarRating = "G";
// Border around the image
$avatarBorder = "000000";
// URL for Gravatar
$gravatarURL = "http://www.gravatar.com/avatar.php?gravatar_id=%s
$avatarURL = sprintf
print " $avatarURL . "" width="" .
$avatarSize . "" height="" .
$avatarSize . "" />";
It still does not work.
Peter Mon Nov 9, 2009 6:39 am
You need a server that will run apache, PHP (& MySQL) for php to work. If you are running the script locally you need a server: Windows (WAMP) or Apple (MAMP). Read up about these for more info.
If you are running this only then you should contact your ISP & upgrade your hosting.
Hope that helps...
Hafid Wed Apr 13, 2011 3:44 am
Well nice tips... but I've question.
How to implement to wordpress? And this gravatar can follow me if i write some comment to other blog?
Any suggestion, i said thanks.
mkeefe Wed Apr 13, 2011 7:50 am
@Hafid - There is a Wordpress plugin you can download/install. Once you sign up for Gravatar your email/login is how it "tracks" you across other websites, including those that implement this custom code.
Hafid Fri Apr 15, 2011 9:32 am
I see. So, it's mean I need to sign up @ gravatar.com it self for assosiated my email with gravatar?
mkeefe Sat Apr 16, 2011 5:49 am
glom Sun Feb 5, 2012 5:16 pm
This helped me a lot. Thanks!
Validate Site: XHTML CSS | Designed by: Matthew Keefe of mkeefeDESIGN