Latest Tweet

Building a Clone Army

Posted by Alex on November 30, 2012

Imagine waking up to find someone who looks just like you, bleeding out on your kitchen floor, with the simple message that “they” are coming for you, and all of the other you’s that you didn’t even know existed. That’s the story behind Skybound’s new comic series, Clone.

Skybound approached us and asked us to create a unique Facebook app experience to promote the new series at it’s launch. What we came up with was the idea to build an army of Clones on the social network. The premise of the project is that you are encouraged to change your name and profile image to match those of the comic’s protagonist Dr. Luke Taylor.

The user would access the app via a page tab on Skybound’s Facebook page and would be prompted with instructions on what to change their name and photo to in order to unlock exclusive behind-the-scenes content and a preview of the second issue. Once the user had followed the steps given, a button click would check their Facebook account and verify that they had in fact become a Clone, granting them a Clone ID#, giving them access to the unlocked awards, and increasing the total clone-count, which is tied to the reward unlocks. The more clones that were created, the more content would be unlocked.

Choosing the Right Tech

With this app being fairly small in size, yet with very custom backend authentication and logic required, Node.js was the perfect choice to build the project on. With scalability in mind (we were, after all, trying to build an army of clones here), we decided to use Heroku and MongoHQ for our hosting and database needs, respectively. We really love JavaScript here at BaM so being able to use JS on the frontend, backend, and even to communicate with our data store is a huge plus. Node.js apps are also extremely easy to run locally as well as fast to deploy to staging and production environments (and keep them lockstep with our version control system) which makes building polished projects very quickly possible in the first place.

So What Can I Do With Facebook?

That’s a good question, and it seems to be ever-evolving and always a bit ambiguous. Our idea was seemingly simple. “Hey just have them change their name and photo, it’s even easier because those are about the only two things that are almost always public on Facebook!” Then you jump in and Facebook starts yelling something about “naming policies” and not letting you pretend to be anything other than the flesh and blood human starting at your [insert internet-connected-device-here]. After supplying you with plenty of “this change can take 24 hours to verify” warnings and even more “do not use anything other than your real name, do not use prefixes or titles, do not pretend to be Twilight Sparkle from My Little Pony” warnings you hobble away feeling rather defeated.

After that comes the, “well, is there an alternative?” phase. Turns out, there is! There’s a little field called “Alternate Name” that DOES let you put in a nickname, and doesn’t appear to go through any kind of verification process, perfect! How do I get that information as an app developer? Oh wait, it’s actually not available whatsoever? Not even through Facebook’s own graph API? Oh it’s on the features wishlist? And it has been on that list for months with no idea as to where in the queue it actually falls? Hmm… What next? Well, next is to create a fake Facebook account and just start trying different things.

After a lot of trial and error we found that you actually CAN change your name to another name, at least one as innocent sounding as Luke Taylor (though we did end up taking out the Dr. since that’s specifically stated in their name policy). And it seems to change instantly instead of taking 24 hours. And it turns out you CAN access an alternate name through some creative screen-scraping (which only works if the user’s profile is mostly public, but it’s at least a place to start).

A Clone on Facebook

Next up is image comparisons! This should be easy, just upload the appropriate photo, copy down the Facebook compressed version, and compare the user’s profile photo to this “standard” photo for clone verification. Just doing a direct file comparison in Node seemed to do the trick, with it comparing correctly across different accounts at different times (to be sure there was no compression weirdness).

Then we suddenly ran into problems. The image comparison seemed to be working great for everyone in our home office, but on the west coast we were having trouble, and after running the offending images through some more advanced photo comparison tools, it was clear that they had different levels of jpeg compression applied to them than our standard verification image and we had no easy way of telling if they were the same image in Node. Luckily, someone on the team had pHash, which compares images based on their perceived similarity rather than strictly their data-similarity, running on another server and was able to quickly set up a web service that we could hook the app up to and take care of our image comparison woes. This worked like a charm and we were back up and running.

What We Need is an Army

What's behind door number 3?

In the end everything worked together to create a very cool experience. We added some subtle animations to the page such as some shimmery reflections to the Clone count guage, and animating the blast doors opening when a new reward is unlocked to give it all a little more depth. At the time of posting you can check out the Clone Yourself experience here. In the end I think we learned a very valuable lesson. When you’re working with Facebook (or at least trying to do anything unique there) you need to either prototype everything in the concept phase to see if it will work, or remain open and flexible to changing how things work on the fly as Facebook changes or enforces policies differently. Either way we pulled it all together and the Clone army is building as we speak!