Managing Your Avatars

These days, most people keep profiles on a number of popular sites like Facebook, MySpace, Windows Live, and Twitter. Dealing with all these profiles—and especially their accompanying avatars—can be tricky.

There are a couple of services that make managing avatars easy. One is Gravatar, which makes your avatar available all over the web by taking advantage of the unique email IDs that WordPress uses.

The other is Incarnate, a service that Karsten Januszewski and the Mix Online team built, which searches the web for your avatars based on a handle or email address you use. Simply type in your handle or email address, and it will deliver all the avatars you’ve been using across the most popular social networking sites.

Gravatar is already integrated with WordPress but until recently, Incarnate was not. To fix this, MIX Online asked us to help them build a WordPress plug-in. Below is a summary of how we did it.

But first, a note on WordPress.

What’s WordPress?

WordPress is open-source blog software that's used by a huge number of people across the web. Its open architecture and built-in tools allow you to quickly install plug-ins that make your blog do nearly anything you can think of. It provides a great, ready-to-use experience right out of the box.

A blog and comment engine are at the core of WordPress. The blog offers a nice rich editor and a wide range of posting options. The commenting feature allows blog readers to fill out a small form with their email (kept hidden) as their unique ID.

WordPress provides a whole array of points with which you can integrate plug-ins. You can easily add your own settings pages, widgets, and metadata or add markup, styles, and scripts to the site. If you want to learn more, the WordPress.org site has extensive documentation on the usage of each API call and plug-in function. There is also an active community of developers and contributors in the development forums.

Our Incarnate Plug-in for WordPress

We wanted our plug-in to do two things:

• Allow the user to select an avatar from Incarnate.
• Display the avatar next to the user’s comment

Selecting an Avatar

To allow the user to select an avatar, we used a tidy AJAX GUI. The user simply enters his or her handle in the box and selects an avatar from the graphic list. WordPress provides a nice hook for the comment form that allows us to add HTML to the page when the comment form is rendered. We used that opportunity to write a quick jQuery script that injects our GUI into the document right at the top of the form.

Once the user selects an avatar, we need to make sure its stored and associated with the content. This process is fairly straightforward and well documented. You simply add an API hook to validate the comment data. We used that validation opportunity to store the avatar URL in a database table for retrieval later.

Displaying the Avatar

As we dove into the docs, we realized we could override a variety of "pluggable" functions in WordPress. One of these was for displaying avatars. Any time an avatar would normally be displayed, we tell it to override with the URL from our own database record!

And just like that, WordPress users can now add great avatars for their comments without having to dig through their files for their favorite headshot. Even better, their avatar is updated dynamically based on the default avatar so that when a better photo comes along, they don’t have to update all across the many WordPress blogs they visit. Users have the flexibility of finding avatars from a wide range of sites—all through the Incarnate service.

Gravatar Preview

But we decided to go one step further. What about users who don't want to pull in their avatar and just want to post? Well, by default, WordPress would seek out their gravatar. After they've posted their comment they would see a gravatar on the page—but they'd never get to preview it. We used the logic built in to WordPress to pull in a nice preview of your gravatar after you've filled out your email address in the standard comment form.

Turning Off Auto-Incarnate

Lastly, we know that there is a huge range of WordPress templates across the internet. Users are adding new ones daily. What happens if they aren't following the WordPress best practices described in the documentation? We offer the blog owner the option of turning off the automatic Incarnate form and give them template tags they can integrate themselves.

Plays Well With Others

We've put together a plug-in that truly plays well with others. It uses the best practices outlined in the WordPress blogs and the latest jQuery and AJAX functionality to provide a seamless user experience—and greatly enhances the commenting experience for WordPress readers.