Gravatar Avatars and Profiles

It’s great when various websites work together, so you don’t need multiple accounts and can be easily identified between said sites. Well, part of this is already going on, and has been going on for a while. A large amount of websites, including all WordPress sites use an avatar system and site called Gravatar. Even this site implements Gravatar. Not only does Gravatar help you identify the same people on various blogs in the same realm (or all over), Gravatar is extremely easy to implement and can prevent some security issues of having users upload images to your server if you are new to upload security.

But in 2010 (I know, a little late to the party), Gravatar added a new feature of Gravatar Profiles. These are profiles that you can include as much or as little information as you want, such as name, pictures, other websites and social sites, bios, and more. I bring this up, since using this information on your registration page could help speed up the process for your users.

Getting a User’s Avatar

For getting a user’s avatar, you generate the image URL and a backup url if you don’t want to use the default backups. All you need to get these avatars are the users e-mail address.

The e-mail address is hashed into a md5 string (trimmed of whitespace and lowercased). You can see an example of how this is done at Gravatars Official Site on how they do it in PHP. Then using this hash, place it in your image request URL. The base URL will look like http://www.gravatar.com/avatar/EMAIL_HASH. You will use this url in your image tags in HTML. You can even append the .jpg file extension to the end of the hash if you need it. There are a ton of extra parameters you can add, but for the full document (very short) you can read it at gravatar.com/site/implement/images/.

• Size (?s=): Set the size of the avatar to be returned. Returned avatars are squares and the size is in pixels, but only pass the numeric value to the URL. The default size is 80px, but you can suggest a size from 1px to 2048px.

• Rating (?r=): Set the highest rating of image you allow to show up on your site. This can’t be trusted 100%, but is generally good to make it match your site. You can set g, pg, r, and x. Default value is “g”.

• Default Image (?d=): Set the default image, either a gravatar default option or a custom image URL. If using a custom URL, you have to urlencode the full public image URL. If you don’t want to use a image URL, you can use some of their default styles.

• 404: Don’t show an image, and return the HTTP Status 404.

• mm: Show a simple “mystery-man” image. This is your basic silhouette user avatar you see almost on every site when you fail to upload an avatar.

• identicon: A geometric pattern based on the e-mails hash.

• monsterid: A monster avatar that is generated with different faces, colors and shapes.

• avatar: Generated faces with features and colors that are different for each hash.

• retro: A retro 8-bit style avatar that is suppose to resemble faces.

• blank: A transparent image.

Generating User Profile Information

Gravatar Profiles are amazing to say the least. Now, this seems like something really simple, and pretty much it is. But having access to someones information without having to get their permission through various social networking sites opens up a whole world of cool things you can do. On one site of mine, I have it so when users enter their e-mail address on step one, as much information as possible I can get from Gravatar is used to populate all the other fields to help users along.

You can request a Gravatar profile by hashing the e-mail address (making sure it’s trimmed of white space and is lowercase), and adding it to the following URL.

http://www.gravatar.com/205e460b479e2e5b48aec07710c08d50

Leaving this as is, will just redirect the page to their Gravatar Profile. To get the data in an easy format to parse by a programming language, you will want to append a file extension to the above URL. The available formats and extension are JSON, XML, PHP, VCF, and QR. I suggest you use JSON unless you have an explicit need for another one. JSON seems to be taking control of all API requests and has great support in nearly every language.

A sample output of a JSON request for a profile (one of the Gravatar Developers) is as follows. I would use my own profile, but it’s lacking in information, so I used one globally available that shows off a lot of the data features.

{
	"entry": [{
		"id": "5",
		"hash": "767fc9c115a1b989744c755db47feb60",
		"requestHash": "767fc9c115a1b989744c755db47feb60",
		"profileUrl": "http:\/\/gravatar.com\/matt",
		"preferredUsername": "matt",
		"thumbnailUrl": "http:\/\/1.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60",
		"photos": [{
			"value": "http:\/\/1.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60",
			"type": "thumbnail"
		}, {
			"value": "http:\/\/2.gravatar.com\/userimage\/5\/04bbd674f72c703f6335e2e7a00acc9a"
		}, {
			"value": "http:\/\/1.gravatar.com\/userimage\/5\/2873000ea367cd46cae55418e4eac32c"
		}, {
			"value": "http:\/\/0.gravatar.com\/userimage\/5\/3aa58fdf72ca25952c84b3ac4333d3f9"
		}, {
			"value": "http:\/\/2.gravatar.com\/userimage\/5\/996e579d06df6e3397c29ce1cc4c6799"
		}, {
			"value": "http:\/\/2.gravatar.com\/userimage\/5\/ff5263e8c30557b57e64423ee8496e41"
		}],
		"name": {
			"givenName": "Matt",
			"familyName": "Mullenweg",
			"formatted": "Matt Mullenweg"
		},
		"displayName": "Matt",
		"aboutMe": "In 2002 I started contributing to Open Source software, and life has just gotten better from there. Co-founder of WordPress, founder Automattic.",
		"currentLocation": "embarcadero and townsend, sf ca",
		"ims": [{
			"type": "aim",
			"value": "photomattnet"
		}],
		"accounts": [{
			"domain": "facebook.com",
			"display": "matt.mullenweg",
			"url": "http:\/\/facebook.com\/matt.mullenweg",
			"username": "matt.mullenweg",
			"verified": "true",
			"shortname": "facebook"
		}, {
			"domain": "flickr.com",
			"display": "photomatt",
			"url": "http:\/\/flickr.com\/photos\/photomatt",
			"username": "photomatt",
			"verified": "true",
			"shortname": "flickr"
		}, {
			"domain": "plus.google.com",
			"display": "plus.google.com",
			"url": "https:\/\/plus.google.com\/116394575739281318169",
			"userid": "116394575739281318169",
			"verified": "true",
			"shortname": "google"
		}, {
			"domain": "linkedin.com",
			"display": "mattm",
			"url": "http:\/\/www.linkedin.com\/in\/mattm",
			"username": "mattm",
			"verified": "true",
			"shortname": "linkedin"
		}, {
			"domain": "twitter.com",
			"display": "@photomatt",
			"url": "http:\/\/twitter.com\/photomatt",
			"username": "photomatt",
			"verified": "true",
			"shortname": "twitter"
		}, {
			"domain": "matt.wordpress.com",
			"display": "matt.wordpress.com",
			"url": "http:\/\/matt.wordpress.com\/",
			"username": "matt.wordpress.com",
			"verified": "true",
			"shortname": "wordpress"
		}, {
			"domain": "youtube.com",
			"display": "mullenweg",
			"url": "http:\/\/www.youtube.com\/user\/mullenweg",
			"username": "mullenweg",
			"verified": "true",
			"shortname": "youtube"
		}],
		"urls": [{
			"value": "http:\/\/ma.tt\/",
			"title": "Ma.tt"
		}, {
			"value": "http:\/\/matt.wordpress.com\/",
			"title": "Mo-blog"
		}]
	}]
}

That is the basics of Gravatar Avatars and Profiles, and is kinda all of it also. Hopefully you find it as interesting as I do, especially the profile data. Having openly available profile data that you can just import after someone enters an e-mail address is amazing and can really help speed up registration processes and populate profiles, so you don’t have a ton of empty accounts. Tell me how you use Gravatar, and some cool places you have seen it.