This was the first of a couple of Facebook projects we created from designs by the Blue Sky Agency. The project presented a number of interesting hurdles and we emerged with a much greater understanding of Facebook’s architecture, conventions and gotchas.
To begin with, you have a smaller area to work with than a standard web page. Facebook gives you about 500 pixels of width to work within. Additionally, if your content ends up longer than 800 pixels, a scroll bar gets added to your content (which hides about 10 pixels on the right side of the design). We were able to resolve the issue with a lot of research and a smidgen of javascript.
The second consideration was Facebook’s use of an old web technology called an iframe. For the uninitiated (i.e. those smart enough not to get suckered into programming), an iframe works by creating a “hole” in a web page. A second web page gets pulled into this “hole” by the iframe and gets display as if it’s just a single page. In this case, the information in the center is actual a separate webpage Facebook’s iframe pulls in for display. This trick has been around for a while, but web browsers tend to do it in different and often very aggravating ways (I’m looking at you Internet Explorer…) After a great deal of hair pulling, we managed to get all the browsers seeing things our way.
We also needed to create two versions of one page; one for a person who has “liked” Candlewood and hidden teaser page for people who have not yet “liked” Candlewood. This let’s them deliver cool deals to special customers and gather a network of friends for the company.
The last step was to tie it all together with a custom built Content Management System (CMS) that allows Candlewood’s Facebook admins to update the pages, add events to the calendar and preview their changes. The CMS is built with Sencha’s Ext4, PHP and mySQL. The CMS authenticates using each admin’s existing Facebook account login, allows for creating draft pages for later use, modifying the overall layout and it can be expanded to additional clients as needed.
The project taught us a ton of new things about Facebook and even gave us a few ideas for our own company Facebook page.