[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?

[cmer]

History.js looks promising. I'll definitely dig deeper. Using regular A tags does not work, however, hence my question.

I decided not to support IE7 since this is a brand new app. It will be IE8+. I had to deal with the P3P issue in the past and it was a pain. Hopefully IE8 isn't as picky.

Thanks for the help! I now have something to investigate.

[chris_engel]

If some other people have also problems with IE, facebook and session cookies, have a look at this reciep, i wrote. The solution is pretty easy. http://recipes.wearekiss.com/view/platform/problem-solutions...

[cmer]

I had trouble doing just this, mainly because of how IE handles cookies on 304. I used this Gem for a Rails app (~1 year ago): https://rubygems.org/gems/rack-p3p.

[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...

[cmer]

I think pushState might be the solution indeed. I was hoping for something a bit simpler. Thanks for the help! For the record, this screencast helped me: http://railscasts.com/episodes/246-ajax-history-state

[neilparikh]

Thanks for the link! I wanted to learn about pushState so that might help me out.

[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

[cmer]

Thanks Jason. That's actually my fallback idea, but isn't that very slow for the user since it reloads the Facebook container every time?

[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?