My First Facebook Development Journey: Extended Permissions, FB AS 3.0 Client Library, and Application Tabs

On a recent project, I had to create a Facebook Flash application where the application will live in a Facebook application tab on a fan page. The whole Facebook application development was very new to me. During that time, because it was a Flash application, it seemed the most sense was to use the Facebook and Adobe supported Facebook AS 3.0 client library which can be found here.

My first impression was that the AS library did a pretty good job integrating the Facebook Platform API. The Facebook API calls were pretty straightforward. However, one issue I ran into using the AS 3.0 library was the requesting extended permissions feature. From what I learned, certain Facebook calls requires “extended permissions” where the user will need to explicitly give permissions to the application to retrieve/set certain Facebook data (one example is publishing a post on a user’s stream). To ask the user to extend permissions through the AS library, the statement would be:

facebook.grantExtendedPermission(ExtendedPermissionValues.PUBLISH_STREAM);

In the example above, what the user should expect is a popup window containing a request asking the user to extend the application’s permissions to publish posts on the user’s wall. However, if a user’s browser’s popup blocker is turned on, he/she will not see this popup window. Taking a closer look, the grantExtendedPermission method executes a navigateToUrl statement.  The navigateToUrl method is known to be unfriendly with many browsers’ popup blockers. This does pose a major problem because if the user never sees the popup window that asks for extended permissions, then the Facebook application won’t work.

My next step to avoid the navigateToUrl issue was to execute some type of modal window through Javascript. And for the Flash application to communicate with the page, it will need to go through Flash’s ExternalInterface. After coding up the ExternalInterface functionality, the application spitted out a Security sandbox violation error. Facebook, at that time, did not support ExternalInterface.

I was still hopeful that there is a way. After doing some research, I found that to get around the ExternalInterface issue, Facebook does provide a flash bridge where a Flash application can communicate to the Facebook page through this bridge. More information on the bridge can be found here.

During my research, I learned that Facebook restricts pretty much any native Javascript, but the good news is that Facebook does have its own Javascript library called FBJS. Using FBJS allows me to use specialized methods. There was a specialized method to prompt user for extended permissions with optional callback functions:

Facebook.showPermissionDialog('publish_stream, read_stream', ...)

Eureka! I see the light at the end of the tunnel. After spending a couple of hours, I finally got the bridge to work. On the application canvas page (main application page), I was able to see my Flash application communicate to the Facebook page, and through the FBJS, the dialog box requesting for extending permissions appeared. Woohoo!

Now it is time to put the Flash application into a new fan page’s application tab. I went through all the required setup to set up a new tab.  I opened the new tab, and ran through the flash application to the part where the extended permission dialog box should appear. When I arrived, I saw….  nothing. No dialog box. I double and triple checked the code and everything looked correct. More research ensued, and to my frustration, I learned that there are many restrictions that a Facebook application can do on an application tab compared to the application canvas page. Scouring through the Facebook forums, I learned other developers had issues with application tabs dealing with FBJS, and how certain data is not available to a Facebook application that lived in an application tab.

In the end, my solution was notify any users that comes to the application tab that he/she will need to allow popups from Facebook in order for the application to function. I found the this solution user unfriendly.

Alas, I do feel that there must be a way, but unfortunately, I hit a brick wall. If anyone were able to solve my conundrum, then I would love to hear from you. Any constructive feedback is always greatly appreciated!