The Facebook Platform: Building a Custom Fan Page

As you may have heard, I’m only starting as a Facebook developer and with a few recent experiments, Timothy and I thought about customizing a fan page on Facebook, which will hopefully soon take advantage of its own domain name (Facebook’s Open Graph API). This is less of a technical post and more of a thinking one. We started our new experiment on a Sochi 2014 Olympiad fan page on Facebook and we’re trying to replicate one of the the original websites (sochi2014.com) inside the fan page canvas.

Errm.. I’d like to give a huge shoutout to the talented (sarcasm) developers of sochi2014.com! Well, on the outside the website looks okay, but on the inside, oh brother, give me a break! I’ll point out the most interesting and fun ones:

• Starting from the first line: no document type definition
• I noticed an empty table with a cellpadding=3, is that the new standard for margins? ;)
• Check out the script type=”” language=”javascript”, what the hell does that mean?
• Wow,   heh, haven’t seen that for a while!
• Cool, they’re replacing margin-top: 1px; with an empty.gif height=1 image!
• Closer to the bottom of the page, I found 11 closing divs right next to eachother.. I don’t believe that they’re using a minify script for that one
• And ~ 50 errors according to the W3C HTML validator, I don’t think there’s a reason to mention them all

That’s probably enough for a start. Very frustrating when a website like that is being built like *that*, and with a page rank of 8! I’d give those guys a solid 2 ;)

Now, back to Facebook. I registered a new application, did some setup and managed to get a four-page website, similar to sochi2014.com, inside apps.facebook.com, with a few modifications (and cleaning up of the code), including a dashboard and a tabs widget for navigation. This was quite straightforward and simple to do (take a look at the Facebook API Developers Guide), the linking structure was okay, the contact form was done in only a few seconds (thank you Facebook for your great FBML!) and the static pages were simply some copy-pasting.

Once I got that up and running I decided to port it into the fan page (as an application tab) that Tim and I manage. I was quite surprised that all the linking structure died, but was pleased that I could at least see the front page, besides the fact that you have to click on the flash element before it’s shown. With a few more experiments and some help from the Facebook Platform Developer Forum (which is a very sweet place btw) I came to a conclusion that multipaging will not work in application tabs on profiles and fan pages. The easiest way around this is of course to use FBJS (javascript) to imitate multiple pages by hiding and showing certain elements on mouse click events. Forms would be a problem too, unless submitted via Mock AJAX.

Tim then asked me if I could move the menu I built up to the top where the main tabs are (Info, Wall, Photos, etc) which seemed impossible. Well, at least from within one Facebook application. So if I’d like to have 5 tabs at the top of the fan page I’d have to register 5 new Facebook applications, what a mess! Wouldn’t it be easier to manage a certain amount of tabs within one application and let profile owners and fan page administrators decide which ones they’re going to put up their navigation? Oh well.

It’s very strange though why companies aren’t yet taking full advantage of what fan pages might look (and work) like. Let’s take a look at Mashable’s Killer Facebook Fan Pages. Out of the 5 pages featured there, the Redbull Fan Page is the one I liked most. They have FBJS pagination, flash video and links to their application page which is quite interesting (yet still a single page with minumum user interaction). The Adidas Originals custom fan page is fully based on Flash, which is why they ask you to “Click to Enter” before you could see anything. The Starbucks and Coca-Cola pages are less interesting, simple HTML with links to external pages. The Pringles fan page doesn’t even have an app of it’s own – Killer?

Here are a few other pages worth checking out. Smashing Magazine – they’ve got two sections: “The Smashing Book” and “Write for Us”, which are two different Facebook applications (judged by the URL). The BMW Fan Page features an interactive form with FBJS validation and submission – way to go guys! And I’m pretty sure there are tonnes of others which I didn’t come across.