[MikeW]

Wonderful. I recently built a Facebook iFrame app and burned so many hours trying to make my app look vaguely inline with what a user expects a facebook. This is absolutely the perfect kit for that. It's a really terrible reflection on Facebook that they didn't provide exactly this themselves.

Every other "platform" provides UI guidelines with libraries/frameworks to allow others build products native to their platform. Facebook have made no good attempt at this, which is why this is a great project!

[cmer]

I'm going through this now so I'm equally excited. A little bit off-topic, but how did you deal with the back button problem?

Currently, if my user navigates a few pages deep in my app and clicks the back button, it exits the app and goes back to Facebook. Quite annoying... Thanks!

[LocalPCGuy]

Because the app is in an iFrame, you can just use regular linked files and then the back button works as expected.

If you do that though, there are a few other issues - you may have to account for pages that do/don't have the Facebook signed_request post data - i.e. you probably need to store it in a session or cookie (and deal with the relevant IE7 cookie + iFrame issues by settings P3P header if you support IE7. Can't remember offhand if it is a problem in IE8.)

Obviously more complex apps where navigation is handled through AJAX get tricky when you can't access the container frame. Maybe look into history.js (https://github.com/balupton/History.js/) and see if it works in a Facebook app?

[neilparikh]

You could do something hacky with pushState [0], but it would take a considerable amount of work to make it work. I can't even think of a way to implement it, but you could try something out.

Your other option is to have a back button in your iframe in a prominent location and hope your user uses that instead of the browser back button.

If you somehow figure out a way to make pushState work, you should probably still have a back button in your app, for old browsers. Or at least display it for only old browsers.

[0] -https://developer.mozilla.org/en/DOM/Manipulating_the_browse...

[cowholio4]

Facebook actually passes the path from the canvas url to your iframe. So what I do is make all the targets "_top" and point to my canvas url. No need for complicated JS stuff. :D

So a link in my iframe app would be something like this: <a href="https://apps.facebook.com/defensio/archives/index target="_top">Deleted</a>

This will create an iframe with https://facebook.defensio.net/archives/index

[herval]

As the developer of a couple of Facebook apps, I have to ask: do apps HAVE to "look inline" with Facebook? Is there any proof or anything showing that apps that use the same typography and style as Fb instead of their own visual style fare any better?