The Idea

To explore what was possible using the Facebook Connect API, I decided to create a Army ID Card image generator. Users would either visit the Facebook application page or log-in via Facebook connect, then a JPEG image would be generated using their profile photo and details.

Technology

The application uses two core technologies, Facebook Connect's API and the PHP GD library. User's information is requested from Facebook via the API, this includes their profile photo, name, age, and home town. The JPEG image is then generated by a process of laying multiple PNG images, TrueType font rendering and a series of colour filters.

Within Facebook an application is created that ties all the technologies together and allows users to visit, bookmark and discuss the application.

Code

The first task was to extract user information out of Facebook. Facebook helpfully provide a PHP library that ties into their API allowing for object-orientated access directly from your own application. Once I had setup a developer account with Facebook and generated the necessary API keys, accessing the gamut of user's data was relatively simple. With the user data to hand, the next step was to generate the image, this is where PHP GD came in.

The idea was to start with a base image then add layers of text and imagery to create an authentic old looking Army ID card. I PhotoShopped a real World War II ID card, removing the photo and personal details. The coordinates for the photo location and text fields were recorded in preparation for later. Once I had a base background image, I began coding the PHP to load this image and then overlay the Facebook user's profile photo on top. It was then a process of adding additional layers on top, building up a composite image.

Conclusion

I originally thought this project would be difficult. Compositing image layers in code and extracting user information from Facebook connect sounded like mammoth tasks. However, with a combination of well written documentation and access to software libraries, the project turned out to be a lot simpler than I had imagined.

The code is not production level by any means. There are a lot of improvements that could be made, especially to CPU performance but as a proof of concept it turned out pretty well. I'd like to further this project, adding the ability for users to customise the image themselves, choosing which image to use, setting colour levels and then posisitioning elements via JavaScript drag and drop.

The live demo can be viewed at:  http://apps.facebook.com/armyidcard/