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!