In what ways is JavaScript restricted when making a Facebook app?

Question

I've been asked to do Facebook apps. Before I commit to anything, I want to know how easily a game can be moved to Facebook? (I'm completely comfortable making games in JavaScript in the browser.)

Does Facebook filter the JavaScript in some way? Can I use jQuery or other JS libraries? Can I do animation by altering the DOM on the fly? Is it best to go with an iFrame or use FBML?

I've done some poking around the Facebook dev site. But I'd like to hear from someone who's done it what the learning curve is like.

Answer 1

Not too hard I would say, since you already have the ability to program a game, it should be fine for you to program a facebook app, as well as migrating a game to facebook.

as far as I know, with FBML your javascript will be rendered useless (yes your javascript will be filtered)

so you will have to use iFrame, which your javascript will remain functional (as long as your javascript doesn't touch the fbml tags)

Facebook api documentation is notoriously bad.

Answer 2

JavaScript in the Facebook context is different inasmuch as it all will get rewritten as it goes through Facebook. To get a sense of the differences (of which there are many), start with the FBJS Documentation. Creating your first application is a good primer.

The site that will become your bible is wiki.developers.facebook.com, it is canonical in terms of the FB platform. Additionally, as we all have come to know and (love? hate?) the Facebook platform is a moving target, so it's useful to keep up with things via the Developers Group on Facebook. I also like the blog Inside Facebook.

Most providers who allow developers to embed JavaScript within their domain force developers to use iframes to sandbox their code. Facebook has taken a different approach to this problem. JavaScript that you give us gets parsed, and any identifiers (function and variable names) get prepended with your application ID. For example, the following code block:

function foo(bar) { var obj = {property: bar}; return obj.property;

}

becomes:

function a12345_foo(a12345_bar) { var a12345_obj = {property: a12345_bar}; return a12345_obj.property; }

This creates a virtual scope for every application that runs within Facebook. From there we expose certain functionality through a collection of JavaScript objects that allow you to modify your content on Facebook. Our objects are made to mimic the functionality of JavaScript as closely as possible, but it may take some getting used to for people who are already adept with JavaScript.

Many items which are simply elements in plain JavaScript must be accomplished with special method calls in FBJS. For example when referring to a form field's value in JS you use .value, whereas in FBJS you need to do .getValue(). It's these differences that prevent simply cutting and pasting JS from elsewhere into Facebook.

That's a basic primer. That should get you started. Best to you!

Answer 3

The simple solution is to wrap your entire game inside an iFrame. FB itself filters out a lot of javascript calls - basically, anything involving the window or document objects probably won't work.