That set of faces, top left: FaceMap

For the new nodestone banner, I made a little application that goes and builds that set of faces that you see on the top-left banner of the nodestone.com. This post is all about the why and how of that.

We were looking for a way to visually represent the human nature of social media. We’ve got the nice, nodey logo, but where are the people? All the people. All the faces, so that leads us to a bunch of avatars or icons with people’s faces.

Now there is a facebook app called FriendGrid which goes some way there:

But, too big and not enough faces for what we are looking for.  We needed something wide to fill that banner space.  Also, those question marks send the wrong message, no?

So, then, how hard is it to get that set of avatars photos, scale em down and place them in a single image?   Not hard at all, it turns out.

I turned to Twitter.  Twitter users are prety good at uploading avatars, and accessing them via the API is pretty straightforward, so I wrote a quick app with Google AppEngine to accept a twitter username and password and then fetch the avatar URLs and display them in a block.  It worked nicely, so I meddled with the display of the images, got them in a suitable sized block in a browser and screen captured them. I used the Gimp to manipulate the image a bit and make the fractured right hand end. Done.

Next features I’ll add:

• Add more source twitter IDs, so the starting set can be our friends, not my friends.
• Follow friends of friends until we have enough unique faces, this avoiding duplicates
• Remove the ‘no avatar’ images
• Do the actual image manipulation to build a single image from all these.
• Auto-update the nodestone banner once a week or something as friends change,

Sometime over summer I’ll tidy up and publish the app over to AppEngine and let you all know.