Facebook Tag Banner Generator

Okay, so what? As I’ve sold my soul to the Application Development Initiative in exchange for geek points, I’m part of a massive effort known as Devfest, meant to encourage entrepreneurship and general geekery. I’m at the opening hackathon, and as I planned on helping people the entire time, didn’t plan on getting anything done. Hence, anything I did get done would be a bonus.

So, it turns out that not too many people need help, so I’m just working on whatever: one whatever is a plugin for gimp to create the images necessary for a ‘tag banner’. On Facebook, the 5 most recently tagged images are displayed in a row at the top of a profile, so with some ingenuity, one could make a series of images to display some coherent message/banner at the top of one’s Facebook profile. There are several apps out there to do this, but they were covered in ads, which really isn’t my cup of tea. The ADI wanted to create one of these banners to promote Devfest, so when no one hopped on making such a series, I decided to give it a shot.

Making Of

To say that reverse engineering the proper ratios to use in the images was painful is a bit of an understatement. In the end, I found that the images could have a total width/height of 527/400px, with a usable area of 400/278px if you tagged in one of the corners. To give credit where credit is due, I used a tag banner for some anarchist campaign to reverse engineer the ratios.

Then, actually getting the images was kind of painful, because it consisted of doing the same thing over and over again 5 times. Oh no, 5 times! It’s almost like we’re back in the dark ages!

But of course, I’m a programmer, and hence lazy as all heck, so I decided the next time I would need to do this, I would be prepared with a… GIMP plugin! The GIMP is an open source editor, and has an interesting extension for doing Python extensions*, and since I like Python, I decided that a quick Python script would be cool to write.

Usage

To use this, grab an image with an aspect ratio of 7.2, and run the script on it. It’s under Filters>Web>Facebook Tag Banner: just choose your output size, and run the script. It’ll generate 5 images in the directory that the original image was from: if there’s no such directory (it’s not saved anywhere), it’ll complain and refuse to generate images just anywhere. Upload the 5 images to Facebook, and tag yourself in the upper left corner in reverse order: check your profile, and the banner should be sitting there at the top.

The default size is 350px, which gives a result for sharp demarcations. Any smaller, and artifacts start to show up in the images. I suppose it’s partly because the script uses linear instead of cubic interpolation, but I couldn’t figure out how to get cubic interpolation working, so you’re stuck with larger image sizes. The parts of the output image that aren’t taken up with the target image are painted over with the current background color.

Download

Get the script here (MIT, ~4kB)

If bugs show up, please tell me.

It’s been tested with Facebook on 2011/1/29, and the Gimp with Ubuntu 10.10 (2.6.10)

EDIT (2011/1/31): Fixed a bug, should actually work now

But It’s Facebook!

True, I shouldn’t be helping Facebook entrench itself, but… bluh. Have fun with the plugin.

Another person talking about the sizes needed. I missed it the first time around, would’ve been really useful.

* not a good interesting