SEARCH

In our efforts to find a more comfortable collaboration and streamlined flow from Design to Development while working on Silverlight projects, we started brainstorming ideas to keep our chops up to date. We decided we wanted to create a Silverlight 2.0 game that could be deployed on Facebook, as that would allow us to explore new territory (being there aren’t a ton of Silverlight Facebook apps available) as well as contribute to the cause of evangelizing its adoption.

Of course internal projects are great vehicles for advancement, but we also wanted to get this out fast! So, we decided to leverage concept and art from existing resources in order to put it in 5^th gear. Being avid readers of The Stranger | SLOG we had previously been amused and impressed with an article on a 101-hand gesture game based on Rock Paper Scissors. But, imagining the complexity involved in remembering all those hand gestures and what beats what or the awkward inaction of trying to play it on the computer together with someone, made it a picture perfect candidate for a Facebook game! The asynchronicity allows for breathing room in computer game play and makes receiving the results that more fun!

We worked together with the creator of the game to bring his concept to life using our design and development talents and released RoshamBOOM! within just a few weeks — the speed of which could not have been possible without the versatility of our Social Networking Platform, Dormouse. I would say this was the most fun I’ve had developing a game, and undoubtedly one darn fun game to play! Check it out: http://apps.facebook.com/roshamboom

Currently, only the Challenge and Outcome pages are in Silverlight, but we plan to integrate all pages in subsequent releases. Last but not least, we can’t forget props to the originator, David C. Lovelace.

Objected oriented patterns have perks. Luckily I don't need to evangelize this to most of the audience. When you can take a concept and execute it in a matter of moments it makes brainstorming and iteration so much more potent.

Getting applications up on social network sites (SNS) is on everybody's mind. How do you get an app up there and how do you make it viral enough to get your message out there? It's an important question to ask yourself. Beyond the implementation of an app are you adding anything to the site's user experience?

We were approached by MSN Games with interest in making two of their most popular games available on social network sites for users all over the web - not just their user base on games.msn.com. They hand us two games that we know are winners and we help them transition them to the social network space. This is the kind of end-to-end experience we provide all of our customers.

The social network space is a constantly evolving thing. The platforms, the user attitudes, the technologies are all in flux. That's where proven object oriented methodologies come in. We implemented a very common pattern for our social apps: the Model-View-Controller. This proven separation helped us rapidly launch the games for Facebook - even while major platform changes were taking place.

When Facebook decided to change the implementation of an FBML control we simply update our templates in the View. If they changed the Facebook REST API we could quickly adapt our Model to load the new information into our user objects. Our controllers covered a few surfaces, from the game play in Flash to web page input on the canvas or profile pages.

This quick adaption helped us build and debug the apps with minimum time lost to refactoring. Of course the platform is quickly evolving as users respond to privacy changes, new profile layouts, boxes, tabs, invites... It's almost never ending. That's why it was important for us to abstract our logic and data from our layout. We'd simply build up new features to easily integrate into Facebook's new platform.

These new features ensure that we provide our customers with all the integration and exposure that's available and gives users the best experience when playing and sharing the games. When users can truly express themselves to their friends using your application they've become social.

Want to try them out? Check out Hexic and Chess on Facebook now.

We had some downtime in between projects several weeks back and decided to get social with social networking. Since most of the studio is on Facebook, we decided to develop a Facebook application. It’s a simple whack-a-mole type game with a table of your friend’s high scores.

WHAT WE LEARNED:

1. Facebook, besides being the number two social networking site, is also the creator of a small army of Facebook branded programming languages. HTML? They’ve got that, but it’s called FBML. SQL? They’ve got that too, FQL. JavaScript? FBJS. And so on.
2. Facebook documentation, while complete, is really quirky. It’ll list all the parameters of a function, but doesn’t list what order it should go in. Nor do they provide a sample call. (http://developers.facebook.com/documentation.php?v=1.0&method=friends.areFriends).
3. A “multi-friend selector” has a built in skip button that cannot be optioned out, so when placed in certain context really confuses the user. It’s a known issue, and Facebook “won’t fix”.
4. The “profile page” is the page most users see, it’s the one where it has the user’s feeds, list of the user’s friends, and the applications the user’s installed. The “canvas page” is the application’s page. There’s also a “Page page”, which is page specific for groups or companies (http://www.facebook.com/pages/Plexipixel-Inc/22585493640).
5. A Facebook “session key” is a unique key based on the currently logged in user. An “infinite session key” is like a regular session key, except it doesn’t expire. A session key is essentially what logs you in or keeps you logged in on Facebook.
6. Facebook caches everything. The first time you run your application on the canvas page, Facebook, like a good hamster, pulls everything from your server that’s used: images, SWF’s, Virgin Mary statues, even output from PHP files. We think they do this for performance reasons. Instead of having the data for the page come from various uncontrolled servers, it’ll come from either one of their servers or several servers under their control, so pages will load in a consistent manner, unlike MySpace.

SOME PROBLEMS WE FACED

1. Because of this hamster-like need to cache things, it leads to problems when the data you want is dynamic, such as a table of high scores. They provide a command to force a refresh of the cache ($facebook->api_client->fbml_refreshRefUrl('yourUrlHere’);), which works great on the canvas page, but, unfortunately does not get called when it’s placed on the profile page, for probably the same reason as above.
   • Take the refresh cache command and the set profile FBML command and put them on a PHP page.
   • Get an infinite session key.
   • Then use some kind of scheduler, like a CRON job, along with your infinite session key (so, you can access Facebook without logging in), then call it at some interval.

Our Fix:

There are several ways of getting around this, and they’re all variations on a basic theme:

So, when we ran our update script the first time, it worked, until we went to a test account and found out that we’ve updated our test user’s score table with the scores of our friends, not the test user’s friends. And the reason for that is the Facebook function that returns a list of your friends is not based off your user ID, but rather based off of your session key. When we ran the update script instead of placing a table of the user’s friend’s scores, we placed a table of MY friend’s scores, ON EVERYBODY’S PROFILE PAGE.

2. There is no default “Add to Profile” option on the Invite Friend Notification, so if you didn’t know about it, you’ll be sending an “invite friend” request with only an “Ignore” option. This is by far the most frustrating thing, because, one, it makes you look really stupid. And two, Facebook, what could you possibly think a user wants to do when they click on “Invite a Friend to [app name]”? Send them a cookie?

Our Fix:

Make sure to add the “Add to Profile” option!

Overall, we learned a lot from our first look into the world of coding Facebook apps. Keep an eye out for more tips and tricks as we continue to explore the possibilities of social networking applications!