Let’s face it, the architecture behind Facebook is quite impressing.
I mean, besides the fancy UI, and the AJAX, Facebook’s developers supply a nice interface for integrating almost anything to Facebook.
I’m talking of course, about the Facebook application interface.
It’s not hard to develop a Facebook application, you can find a good documentation, along with code examples on how to do the common tasks: set the profile box, add info about your recent activity to the feed box, query for user data using FQL, render your page with Facebook Markup language, etc.
however when it comes for setting up an environment for developing the application, it seems that the work flow becomes less comfortable.
setting up an environment for developing a web application is pretty easy, you need to set up a local web server (along with your favorite interpreter), surf to your page on localhost, edit your files with your favorite editor, and refresh once a change was made to the source files.
for PHP I’m using XAMPP with notepad++. Setting it up takes couple of minutes, the work flow is easy, and changes are reflected immediately.
when I started developing a Facebook application I’ve discovered that since the testing is done on Facebook site, your files must be hosted on some static location, which should be available and visible for Facebook.
So in order to to develop a Facebook Application, I’ve considered the following work flows:
1. work on remote site, using FTP/SSH/HTTPS to edit files on the server.
2. work on locally, and make my application online and visible to Facebook.
each of this option has its drawbacks.
- working on remote server, is a lot slower than locally, your possible editors are limited, and you must deal with online traffic (unless your application is not public yet).
- working locally has also its drawbacks, which mostly the fact that you must set up some dynamic name hosting (no-ip.com for example), which means you’re less mobile (can’t develop the application at a cafe.), and your localhost is open to the wild all the time.
The best solution for me was to somehow work locally without the need to open the port at the router, and defining a dynamic host name. I like to call it :
“Facebook emulation”, and it looks like that :

Although Facebook does not have many documents on the way it interact with applications, the flow can be understood from the Facebook client:
when your application calls require_login/require_add, and expects the user variable to be returned, the client checks whether it got some variables posted to the script. it mostly looks for the user id and some session id.
if the script does not have these variables it redirect the page to the login/add pages.
which means that if I’ll transfer these variables to the page it will behave as if it was hosted by Facebook, and by having a session id, it can do FQLs, and call Facebook APIs.
giving some serious thoughts about how to achieve a full Facebook application hosting emulation, led me to write fbemu, using the following steps:
- Fetch The application page
- Convert the result FBML into HTML
- Proxify The links inside the created HTML
- Display the HTML.
Another two things I kept in mind to handle were:
- Take care of posted variables
- Take care or Content other than HTML.
Fetching The page
SO for the start, all I have to do is to POST some variables to my locally facebook application, and that should do the trick…..well…it do…really….the question was how to get the posted variables values……
well…actually, it’s also easy, I’ve added a “if ($user == MY_ID) echo (serialize($_POST));” statement at the top of my application (the one that on the static domain), and use the result of it as the POST arguments for the my application page.
The result of the fetch is the created FBML, which leads us to the next question, how to transform it to HTML?
Convert the result FBML into HTML
my first idea (actually a friend suggested it to me) was to replace all the FBML tags with the hard coded generated HTML code. This might be straightforward for <fb:error> , but requires FQL actions when dealiing with <fb:user>.
Then I realized that I can use the FBML converter tool at Facebook developer site.
The FB Developer site has a nice tool to convert FBML into HTML, you just need to provide the FBML, the user, and the API_key of your facebook application.
Pretty simple, All I had to do is to post these variables to the page an I got formatted page with the original FBML, The Transformed HTML, and the HTML as text (using htmlentities()). I’ve decided to extract the result from the “htmlentities” <textarea> tag, since it is was pretty unique tag. Next step was to do a little transformation, (since the resulte was transformed to be shown as HTML text, I had to transform it back to HTML.)
So For now, I’ve got a way to transform the FBML into HTML, which led me to the next issue, I had to parse the links in the HTML result to point the testing page.
Proxify The links inside the created HTML
when I fetch a page, I must process all the links in that page to ensure the user will not navigate outside the emulator, so statment lik <a href=”http://www.domain.com/page.php”> should be changed into <a href=”fbemu.php?url=http://www.domain.com/page.php”> and the simulator should handle that argument, another thing to take care of is to handle partial or relative links. here I used a function that merges between the current page and the relative page, and can handle partial URL.
Displaing the HTML
as simple as it sounde, just take the result from the proxify function, and display it to the user.
To make it appear like FB, I’ve grabbed FB HTML, rip off the ads, replace all the user links and make it display the application content. I’ve also added a small “emu” near the Facebook logo so the user can distinguish whether is the real site or emulation.
If you look for more clean display, I’ve created another template with less images and border, just with a box at the same size FB is using to supply the correct border for the application (in this way you can see if your content is exceeding facebook width).
As mentioned above, besides the big issues I had to take care of two additional things :
- Take care of posted variables
- Take care or Content other than HTML.
Take care of posted variables
meaning that if the application post some data, I need to pass it to the application.
as simple as it sounds, take the posted variables, add it to the one needed by Facebook client, and that’s it.
Take care or Content other than HTML
I had to check the type of the content received from the application, before passing it to the FBML conversion, and to the proxify function to ensure it is HTML content, and to process it only in that case.
In other cases, image for example, I need to present it as is.
In order to do it, I’m processing the returned header result and look for the Content-Type header.
Conclusion
I’ve decided to share my script to the world to ease the development of facebook .so whoever needs to test /develop its facebook application locally, can use this script.
In order to get the correct values for the session key, I’m using serialized variables (just add “if ($user == MY_ID) echo (serialize($_POST));” at your application and use the output for the local script.
As far as I know there is only one thing it does not handle which is the Invitation page (I’ve added a box to html just to notify about it), besides that I’m now aware of any issues/bugs.
here is a screen shot of the application :
fb emu image
and fbemu can be download from here:
fb emu v1.0
Enjoy.