A blog about design, code and some other stuff

So, I’ve been delaying this post for a couple weeks, I was trying to finish my first Facebook app before posting the bugs and undocumented API that I’ve found while developing a Facebook tabbed app (application that runs inside a tab) and helping some of my co-workers with another projects involving Facebook.

Let’s get started, recently many big companies started to invest a lot of money on “social media” and to use Facebook as one of their platforms to engage with consumers, and the way they usually do this is by adding new tabs to their profiles using it almost as a micro-site. Here are a few samples: GAP, Adidas, Axe and many more..

My first complain is about the way that Facebook setup tabs, why the hell a tab needs to be an application? why everything is an application even being outside Facebook (Facebook connect website) or something that you don’t want other users to install on their profile or access through a canvas page? why does the tab works completely different than a canvas page or a Facebook Connect website and have different restrictions? why is it so hard to get started and why the documentation doesn’t explain which methods are available on a tab? – many questions, no answers..

Important note: one day after I wrote most of those issues Facebook released a new API but most of the things still apply (as of May 2010).

I started to post some of the bugs to their bug tracker but then I figured out that it would take too much time and I actually wasn’t even sure if I should help them to improve their platform since I got really upset with some of the bugs, I don’t agree with their mentality (trying to own the Internet) and I think they are making enough money and they could pay someone instead people having to do it for free.. but anyway, here is the long list of issues that I had while trying to build a really simple tabbed application:

The system

• Many proprietary languages/markup which makes really hard to developers to learn everything (FBML, FBJS, FQL, FBXML).
• It’s really “weird/stupid” that you have to create an application to be able to edit a tab or create a website outside facebook using facebook connect, it’s a huge concept/abstraction problem.
• Too many kinds of applications with different kinds of restrictions, make it really complex to understand how the system works.
• I don’t think they do any kind of testing before committing changes in the API to the server, stream.get stopped working for no reason and only started to work after 6 days, another day external links were blocking the application from loading and no error message was ever displayed (I was seeing the preloader forever) one day after the exact same code started to work. – Bugs like this happened many times during the development.
• It’s really hard to find the settings panel of the application and to understand which settings are important for your kind of app, it has too many options that you actually don’t need, and the explanation for each field isn’t really helpful unless you understand how the system works.
• The code sample that they show on the application information page (“Get started quickly with some example code!”) doesn’t work inside a tab.
• The way they setup test users is really stupid since a test user cannot change application settings and you can’t access many pages.
• It’s really hard to get to an application (even if you are a developer of that application) and it’s really hard to add the app to your tab.

CSS

• Throws errors for CSS3 selectors (in my case :nth-child).
• CSS “errors” breaks the whole application (it even make JS stop working).

HTML/FBML

• No external JavaScript (documentation say it’s possible).
• No external CSS (documentation say it’s possible).
• No iframes.
• Some tags of the documentation only works on canvas pages or FBXML pages, doesn’t work inside a tab (documentation doesn’t make it clear what works inside a tab).
• You have to click on a image before loading flash movies and this click doesn’t count as an interaction, so you can’t call any JS methods before the user interact with another part of your app.
  • Fixed by creating a custom embed using document.createElement('fb:swf') after clicking on a link (replicating the way fb:swf works) – really annoying.

FBJS

DOM

• No getInnerHTML (documentation doesn’t make it clear that it’s not available).
  • You have to create an input field to store the text if you want to retrieve it later.
  • On the forum someone said that you could also use a FBJS:String but for some reason (can’t remember why) on my case it didn’t worked as expected.
• No getInnerText.
• No getInnerFBML.
• No way to appendFBML (you have to create a new element and setInnerFBML of that new element), really bad way to add items since you create unnecessary markup that can ruin the structure.
• No real selector engine (like Sizzle for instance).
• No way to remove a childNode.
• Forces you to structure the HTML in a really bad way.

Ajax

• No way to get the content from a response if responseType == FBML.
  • No way to check if response failed (since it can return NULL sometimes).

API

• No documentation about the available methods.
• Graph API doesn’t seem to work inside a tab.
• Documentation doesn’t say that available methods are accessed through the Facebook object, all the references shows FB.wathever.methodName for any JS method.
  • If you use Firebug you can see that the FB object exist and all methods are available, you can even call then using the console panel, but it simple doesn’t work from the tab since Facebook replaces FB.whatever.methodName with a1234567890_FB.whatever.methodName and the object a1234567890_FB doesn’t exist.
• No way to call most of the Facebook.Connect methods from a tabbed application.
• No way to set a Google Analytics tracker ID, since the FBML tag that you need only works on canvas pages.
• No way to detect if the user is currently logged.
• Method isLoggedIn only shows if the user gave permission to the app.
• Method promptPermission doesn’t work.
• Method requireLogin is not used really for login but for asking permission (if the user is already logged shows permission prompt, if not shots user to login page).
• getUser only works if the user gave permission to the application.
• After giving “regular permissions” to the app the first time you try to call for extended permissions fails and throws JS errors (“session key is null” and “PlatformCanvasController.singleton is undefined”), second time you call Facebook.showPermissionDialog('publish_stream') works.
• Method showAddFriendDialog doesn’t have a option to close and it even generate an endless loop of prompts, everytime you click OK it prompts a new one with the error message.

General

• Can’t use any 3rd party code/framework/library.
• You have to relearn how to write JavaScript since most of the things you know can’t be used.
• Forces you to code on a really bad way.

FQL

• LIMIT doesn’t work like in MYSQL (as reported on the documentation) – MYSQL LIMIT 5,5 has the same result as FQL LIMIT 5,10 (completely wrong!).
• Even the query being invalid doesn’t throws Errors, only return an Object with no results and sometimes multiquery doesn’t even return any result.

PHP API

• stream.get throws error telling that you can’t call this method on the current session, or returns an empty result (on the tools page), even for public info.
  • Fixed using a proxy script to make the request “sessionless”.
• Parameters type is completely wrong on most of the cases on the documentation, some methods support way more params as documented too. (stream.get is a good example)

DOCUMENTATION

They are currently deprecating the old documentation and many pages aren’t accessible anymore, which is really bad since you don’t have those informations anywhere else. Some comments only apply to the old documentation.

• Really poorly organized (Wiki is not the best format for documentation)
• Inaccurate most of the time.
• Confusing.
• The test console (tools) should be advertised ! since it’s way more helpful then the actual documentation.
• No real explanation about tabbed applications.
• Doesn’t explain what works on each kind of application and each location (canvas page, tab, facebook connect).
• Some code samples doesn’t work.
• You can’t trust on it.

TOOLS

Tools was a page on the old documentation that allowed you to make tests of the API methods inside Facebook, they removed it after releasing the new Graph API.

• Hard to find! (should be on the first page since it’s more useful than the documentation)
• If you switch the application ID you lose the selected method and all the params (it drives my crazy!)
• Doesn’t show the parameters type or any information/help about them.
• Doesn’t have a link to the documentation of the selected method.

BUGTRACKER

• Doesn’t work when you need it.
• Slow.
• People don’t really use it.
• You have to create a new account to use it (even having a Facebook and a Forum account) which is really annoying/stupid.

FORUM

• Really poor search.
• Moderators/staff takes a long time to reply.
• A lot of users with the same issues and nobody seems to try to fix the issues or make it clear on how to use the features.
• Forum search isn’t integrated with bugtracker search, you have to search on 2 places to figure out if it’s really a bug.
• You have to create a new account to use it.

Until now every developer that I know that did anything related to Facebook had some trouble while developing their apps/websites and most of them are really good and experienced developers, I’m sure something is wrong, to do things that were supposed to be easy takes a huge amount of time, expect to spend at least 2x more time than you would spend doing something using any other API (youtube, flickr, twitter, etc..)

I know Facebook has many insanely talented people working there and that they have an absurd amount of money, but please put some effort on making developers life easier instead of trying to control the whole Internet, many developers (including myself) would appreciate and I’m sure it would help your platform grow…

I understand that for Facebook tabs may not be a priority since they seem to be focusing on the Facebook Connect stuff (to try to drag more people to their platform), but clients wants tabs on their profiles and are willing to pay some money for it, I’m sure that this desire will grow more and more if the number of “fans” and interaction with the brand keeps increasing…

After discussing with Philip Baudoin many times about issues and stupid things that aren’t available inside a tab we concluded that Facebook never thought about tabs being the place for a full applications/micro-sites… — If you work for Facebook or know anyone that works there please let them know that people are trying to do this kind of things and are getting really frustrated, everyone that I know that did an app don’t want to do another one…

That’s it!

Related Post: Facebook Tabbed App Undocumented JS API