Prompting for Facebook Permissions

When authenticating users via facebook, you have a laundry list of possible permissions to ask for.  If you ask for no permissions, the user gets the following login window:


Any requested permissions get displayed in the login window, but some of them get grouped into the same permission category. For example, many of the user_foo privileges get grouped into "Access my profile information", and similarly, friends_foo permissions get grouped into "Access my friends' information".

Below is a screenshot of what it looks like when asking for the full suite of permissions (I used the helpful Rell application to test). From this you can get an idea of what it looks like to the user based on which permissions you're asking for.

Asking for all permissions at once would be a little intimidating for users . . .

recipe for disaster: Facebook Connect + AJAX + Internet Explorer

I just had an unbelievable debugging experience with our facebook connect site:

One of our pages includes three main elements:
  • a link to post to your facebook stream
  • an link to update part of the page with AJAX 
  • an input form


I had the page working fine in all sane browsers, and went to verify that everything was kosher on internet explorer. You're really not going to believe this.

The Problem:

The following sequence consistently disabled all the textarea fields of my form:
  1. open the facebook "post to your stream" dialog box
  2. post the message (or close the box, didn't matter) 
  3. click the AJAX link

I tested the page in every different way, and those steps had to be performed in exactly that order to reproduce the effect, but it consistently disabled all text areas on the page.

Debugging javascript in internet explorer isn't the most enjoyable experience - the IE javascript debugger is a major downgrade from firebug. I tried using firebug lite, but the above sequence actually DISABLED THE FIREBUG CONSOLE!?!?

The Solution:

The hack I worked out to fix this mess is more unbelievable than the problem.

I noticed that if I clicked on one of the input fields after opening the facebook dialog box, the form fields wouldn't be disabled after subsequently making the ajax call. It really didn't matter which form field i clicked, as long as it happened between closing the facebook dialog and making the ajax call. So I stuck a hidden form in the top of the page:

  <div style="overflow: hidden; width: 1px; height: 1px;">
      <form>
          <textarea id="ajax_fix"></textarea>
      </form>
  </div>


Then, I appended the following callback to FB.Connect.streamPublish (which gets called after the dialog is closed):

if ($("ajax_fix")) {$("ajax_fix").focus();};

. . . and problem solved. I still don't believe it.

It's clearly a ridiculous hack. I just don't know whether to feel dirty for putting it in or triumphant for getting it to work.