Monday, March 31, 2008

Gotchas of internal iFrame facebook apps and external web apps using Facebooker gem

A while back, I added mobtropolis to facebook as an internal app. I decided to go with using FBML because there was more support in the how-tos about how to use it, and it looked like tighter look and feel and integration.

However, unlike many facebook apps, Mobtropolis also exists as a stand-alone external web app. This decidedly made things a little bit hairier, and I had to write a custom mime-response filter to be able to tell whether a call was coming from a web client (HTML), or as an internal facebook app (FBML), in order to authenticate correctly. I also ended up having to write some custom testing methods for it as well.

Then I revamped the layout of mobtropolis.

It's major suckage to have to maintain two separate views, so I decided to go with an iFrame with the internal facebook app. It took a bit of work to convert it to use iFrames, because authentication gets a little bit more complicated. However, it's something that I only have to deal with once. Subsequent changes to the layout won't affect it as much.

In retrospect, I should have went with using an iFrame from the beginning, though, at the time, mobtropolis was fairly ugly. This is what people call "judgement", and I made the mistake and it cost me about three weeks. The thing is, you just make the best decision you can at the time, and make sure you can change directions easily.

There were a couple gotchas when using iFrames.
  1. Double facebook frames on redirect to install page.
  2. External app's layout is wider than iFrame
  3. Facebook only sends fb params on the first call to your app

Hopefully, I'll save you some time, to whomever's looking for this info.

1) Double facebook frames

When you use ensure_application_is_installed_by_facebook_user or ensure_authenticated_to_facebook, it will automatically reroute the user to an install page if he didn't install your application. Problem is, it assumes that you're not in an iFrame. It ends up that you can override application_is_not_installed_by_facebook_user in your controllers.

def application_is_not_installed_by_facebook_user
redirect_to add_internal_facebook_app_url
end

Where add_internal_facebook_app_url is an action in a controller (say, my_controller), that renders javascript to change the location of the top frame.

def add_internal_facebook_app
render :layout => false, :inline => %Q{<script type="text/javascript">
top.location.href = "<%= session[:facebook_session].install_url -%>"
</script>}
end

You have to make sure you connect it as a route in order to redirect it like I did in the overridden application_is_not_installed_by_facebook_user(), in routes.rb under config/

map.add_internal_facebook_app('add_facebook_internal_app',
:controller => "my_controller",
:action => "add_internal_facebook_app")

2) External app is wider than iFrame

I think there is a way to resize the Facebook iFrame, but I didn't find out about it after I did this. By default, the Facebook iFrame "smartsizes" itself, to fill out rest of the page.

First, I created a stylesheet called fb_internal_layout.css, that had extra stylings that squeezed the interface in a 446px wide iFrame. Then I included it in the headers of my layouts as:
<link href="fb_internal_layout.css" id="fb_internal_layout" media="screen" rel="alternate stylesheet" title="Facebook Internal Layout" type="text/css" />

Make sure you include titles in the link, so that you can actually switch it out.

Then we use javascript to turn on or off this alternate stylesheet depending on whether we're in an iframe or not. You can use something like what's described in A List Apart's article on alternate stylesheets to switch out stylesheets.

To detect if I was in an iFrame, I simply checked whether (frames.top == frames.self). If it was, I turned on the alternate stylesheet.

3) Facebook only sends fb params on the first call to your app

This is actually not a problem if you use FBML. This is also not a problem if you're using iFrames, and you require a user to install your facebook app if they want to see what's on it.

However, even though this is how a lot of facebook apps operate, I don't think this is very user friendly. The user has no way to judge whether they want to install your app or not if they can't even sample it. I would rather have a user add an app because they want to, rather than getting people that add it, but then remove it shortly after. This not only gives you an inaccurate indication of how many people really want to use your app, but also annoys the hell out of them.

But making some pages of an iFrame app to be public is a bit tricky. Only the first click into your facebook app is there fb_params in the request. Every subsequent click by a user is in your iFrame, so looks as if the user is actually on the external webpage.

There are a couple solutions, but I ended up storing session state that the user made a request from an internal app before. You can't override params on subsequent requests, so using old fb_params to authenticate is difficult at best. Using the flag that a user made a request before, this session is likely to be coming from an internal facebook app. When it comes upon a private page, it should be redirected to install mobtropolis, using 1) detailed above. This is not a perfect solution, but it covers all cases correctly.

This, however, doesn't account for the instance where a user that already installed. In that particular case, I just went ahead an got a facebook session on every first request to the facebook app.

Hope that helped, and I hope never to have to mess with this sort of stuff again, and that you don't either. More interesting posts in the future. Tip!

22 comments:

  1. Anonymous12:00 AM

    Thank you! This post was exactly what I needed, specifically regarding the double iframes issue.

    ReplyDelete
  2. No problem. Pay it forward, if you find out something that might save others some time.

    ReplyDelete
  3. bob comm9:35 PM

    Thanks for the post.

    Regarding the 2 frame issue, I had the following problem when using your code. I don't know if this is rails v2 specific:

    "Render and/or redirect were called multiple times in this action. Please note that you may only call render OR redirect, and at most once per action. Also note that neither redirect nor render terminate execution of the action, so if you want to exit an action after redirecting, you need to do something like "redirect_to(...) and return"."

    Also, the post and comments only say what time the post or comment was made, but not which day.

    ReplyDelete
  4. I don't know exactly how you coded it up, but I'm guessing maybe you need to put the before filters in your calls in your controllers. the ones called ensure_installed_by_facebooker or ensure_authenticated by_facebooker or something like that.

    That way, the first redirect it'll see is through the facebooker filters, and won't ever hit any of the redirects in your controller methods.

    ReplyDelete
  5. Anonymous3:40 PM

    When the app is in the facebook iframe it knows to send the user to the add app page. Yet it doesnt interfere with the main site, it send the user to register/login...

    How did you do this?

    ReplyDelete
  6. I don't know exactly what you mean, but take a look at:

    http://webjazz.blogspot.com/2008/02/mime-responder-filter-for-rails.html

    ReplyDelete
  7. Anonymous6:35 PM

    I was using the awesome MIME-responder already when we had the app as FBML, but we're trying to use an iframe now (same as the OP). Also as with the Mobtropolis, the site is accessible from within facebook and as a standalone app.

    In Mobtropolis, clicking a "challenge" link takes the user to the install page in facebook, and the login page when viewing through www.mobtropolis.com. This is the behavior I'm having trouble with. I guess I'm not sure how or where to call :ensure_app_installed... for a given action, such that it won't redirect a user to the facebook install page when viewing the site directly. So far, the code from tip 1 works when coming from facebook, but it also runs outside of facebook.

    Thanks.

    ReplyDelete
  8. It's actually a bit convoluted. I recommend that, if you can help it, make a user install your fb app in order to view it inside of facebook. It's just a lot simpler.

    But if you like the pain, this is part 3 of this post along with part 1. Mobtropolis knows where to redirect to, because it knows where the request is coming from 1) the external app from a browser, or 2) from inside an iframe from facebook.

    You can tell because the first request from a user has fbparams in the parameters. You'll need to keep that state for the session, and any subsequent requests for that session. And when the user logs out, or jumps between fb app and external app, you'll have to figure out which conditions that require you to clear that state.

    And then when you redirect, you can't use the normal redirection provided by the facebooker. You'll have to use technique from part one.

    ReplyDelete
  9. I'll stop being lazy and log in this time... Thanks for clarifying. That's exactly what we're trying to do. As you say, it is convoluted. I guess my problem is that I'm not sure how to tell when the user leaves facebook and they are visiting the site directly, since it's the same domain and session, etc, and how to actually set up the filters to our existing login_required or facebooker's, via tip 1.

    I'll play around more with that and the login_required filters to get it to work right.

    Again, thanks for the responses.

    ReplyDelete
  10. This post was very helpful, but I'm having trouble with #3. I finally figured out that the problem is that the rails session id is different on the first page load of my app vs. any subsequent page load.

    It seems that for the first page load, the cookie is stored by facebook (I can tell because the session id is appended with my facebook id), and all subsequent page loads use a session cookie stored on my browser. That makes sense given that facebook stores cookies on behalf of the user on canvas pages, but I have no idea how to get around this. This article's suggestion was to store the fb_params in the session since they're only sent on the first page load, but how do I keep them around if the session changes after the first load?

    I would think everyone would have this problem, or am I missing something? Thanks in advance for any suggestions.

    ReplyDelete
  11. Regarding my last post, apparently this is a known issue that only affects Safari, which was what I was using to test all day.

    It's worth noting for the rest of you that your app may not work in Safari. This post helped me out: http://wcrawford.org/2007/08/29/revisited-facebook-safari-and-external-iframes-that-need-cookies/

    This is the first time my mac is directly responsible for me LOSING productivity :)

    ReplyDelete
  12. Your addition came in just before I posted this, but I'll throw it in as well...

    That's an apparently not-so-well-known problem of 3rd party cookie permissions. Fx3/Win,Linux seems to be the only major browser which allows them. IE/Win, Safari/Win don't allow them by default. I ran into that as well, and kept forgetting to mention it here. Horray for email notifications...

    The "best" solution I found for this was sessionless cookies, which is pretty easy to do with Rails. I used the solution here. It explains the problems with that solution as well. I used a slightly modified version though, since I couldn't seem to get that unless cookies[:_session_id] on that page to work (don't mind blogger's limitation of no syntax highlighting here):

    def default_url_options(options)
    if from_facebook? && !request.format.fbml?
    key = session.send(:session_key).to_sym

    cookies[key] ||= { :value => 'true', :expires => 10.seconds.from_now }

    return { key => (request.xhr? ? params[key] : session.session_id) } #unless cookies[key]
    end
    end

    Basically, if we have something in session[:facebook_session], and the request isn't for fbml, e.g. inside the iframe, include the session key and value in the URL.

    That's just one solution. We've had luck with it. Only use it if you're willing to make the trade-off for possible session hijacks.

    ReplyDelete
  13. Thanks Danner.

    There's also a cheating way to get around this: set the target of all of your links to "_top" so every click loads the outer frame. The URL for the links have to be relative to the facebook canvas root, of course. This is easy to do by overriding link_to, and it seems to work fine for me.

    ReplyDelete
  14. OMG this is the most useful thing I've read all week.

    Two questions though:
    what is the function you're calling "from_facebook" in the above comment? Is that the same as "request_comes_from_facebook? http://facebooker.rubyforge.org/classes/Facebooker/Rails/Publisher.src/M000137.html

    Second question:
    Can you please expand a little bit on #3? The way my manager and I have developed our app was to make it a single page and rely heavily on AJAX. This makes #3 incredibly important to us... :)

    Bonus question:
    Did I read somewhere that to support a box on a Profile, you must render FBML? Or can that box be an iframe?

    You are the man for this post, by the way. I can't tell you how much a relief it is that I didn't have work out all this stuff on my own.

    -Steve

    ReplyDelete
  15. Err, sorry I was asking about the comment by Danner Mangiarelli.

    ReplyDelete
  16. @Adam
    Interesting "cheat". Good thinking. I'll have to try that.

    @BFW
    #1: My #from_facebook? method is essentially the same thing as #requset_comes_from_facebook?. Either I missed that when I was working on this, or it wasn't working for me then; most likely the former. My #from_facebook? is a one-liner:
    params[:fb_sig] || facebook_session ? true : false .
    The things we do out of frustration, like not reading the docs...

    #request_comes_from_facebook? calls #request_is_fb_ping?, which in turn checks !params[:fb_sig].blank?, which is safer than than what I'm doing. I call #facebook_session to ensure that the FB session is set up before I try to use it.

    #2: I haven't touched this stuff since the end of last year, so I'm a bit rusty. As you probably know, Facebook only provides its authentication parameters to your site's iframe when the user first hits any page in the app. Once the user clicks on any of the links in that iframe, the session is lost due to the default 3rd party cookie restrictions on most browsers, so your Facebook session (including the Facebook ID of the user who's browsing your site) is gone.

    AJAX requests will suffer from the same problems as #3 in the OP and the 3rd party cookies issue. Your AJAX requests on that page need some seesion info as well: they are separate requests themselves, just sans the full page load. The main page will appear to come in fine, but the AJAX requests won't look like they're coming from the same user (unless you're using Firefox, which had 3rd party cookie support turned on by default); it'll look like a completely new uesr. You'll need to use one of the 3rd party cookie fixes posted above.

    Bonus: As far as I remember, profile box pages must be built from FBML that you have to publish to Facebook. I think it has very limited AJAX support (images only IIRC?).


    Hope this helps. Good luck.

    ReplyDelete
  17. Stephen6:01 PM

    Did you have any problems with your stylesheet rendering when you had urls such as site/controller/action/id?

    When my app starts it begins at apps.facebook.com/appname and then once in the app, no matter where i click the url in the browser never changes, although we know it's following the routes.

    When type in directly apps.facebooker.com/appname/controller/action/id the stylesheet does not render.

    Thoughts?

    ReplyDelete
  18. I should amend that this post is really old. I haven't worked with the facebooker plugin in a while, so I don't know if it's still applicable.

    In general, no, I haven't had problems rendering the stylesheet.

    First, I'd tail either the rails log or the apache log to see whether requests are actually coming into the application. If they aren't, then I'd check the settings on fb for the app to make sure that the paths are correct. There's a lot of options to setup an fb app, so it's easy to get it wrong.

    If it is coming through, then I don't know.

    ReplyDelete
  19. Stephen6:25 PM

    Thanks for the reply. I did ye ole firefox web developer plugin and viewed the source of the iframe. When I do app/controller/action/id, facebook is cutting out the head tag. Even if i put the css and the js for that matter in the body, facebook is still parsing it out. Not sure if this is FB policy, but it is weird none the less.

    ReplyDelete
  20. Stephen6:56 PM

    This should be my last post...sorry to be annoying. I only post so not to confuse others. It's not facebook..... for some reason, my app is not rendering the application layout when calling app/controller/action/id.

    ReplyDelete
  21. Yuppers, thanks for the info. Check that that path to your layout is correct, is the only thing I can think of. Good luck~!

    ReplyDelete
  22. I found a solution to create an iframe application without being a facebook developer . It's very powerful:
    http://www.facebook.com/iframe.apps

    ReplyDelete