Facebook – Flash Integration Example Code

Two weeks ago we decided to take our Forest Tribes: Rise of Heroes game prototype to Facebook. Eitan worked on making the AIR prototype work correctly as SWF, and I took it upon myself to set up the Facebook – Flash integration logistics.

I thought it’ll be a simple task since there will be plenty of code samples online. Turned out I was wrong. There weren’t that many examples out there and those I found were outdated (not a big surprise with Facebook’s tendency to change API and break code)

Anyway, I ended up writing something myself. I’m posting it here as a service to other developers who want to get up and running quickly.

The following post provides the code and instruction for the following example Facebook app:
https://apps.facebook.com/flashexamplecivax/

A little disclaimer: Please note I’m not a js nor a flash developer. To be honest, this example is the first ever flash application I wrote. It took me several hours trying online flash tutorials with Adobe Flash Professional CC (trial version) but I got what I wanted. I’m sure there is a way to make the code more efficient. Regardless, what’s important is that it works. 🙂

So, what you need to get started:

  1. Facebook Developer account
  2. Server which has SSL

 

Server with SSL

Facebook demand a secure access (HTTPS) to your server. There is no way around it, you must have one. All the files on your facebook app must be served through a secured protocol. No, hosting the HTML on Amazon S3 won’t work, since Facebook actually injects code to your page (basically warp your page inside a form) which does a POST request. Amazon S3 doesn’t allow POST requests, so the code won’t work.

I happen to have an account on Hostgator, which provides SSL even for Virtual Hosting plans. It’s not something I’d use for a commercial, high-traffic, application, but for this example it’s enough.

Find whatever hosting solution you want, just make sure it can be accessed via HTTPS.

 

Setting Up The Example Code

Process of setting up the example code on your server:

1. Download the Example App code.

2. Open it to one of your directories (locally).

3. Go to Facebook Developers site and start a new app.

4. Choose Facebook Canvas

5. Give it a name (you can edit it later as well) and click “Create New Facebook App ID”

6. Choose the right category/sub-category for your app and click “Create App ID”

7. You will get the following page. Copy the appId value. This is your app’s app ID (duh)

8. Go back to the directory where you opened the example code to.

9. Edit index.html

10. Look for this line:

and replace the 99999 with your app ID.

11. Save file and close editor.

12. Copy the content of the whole directory to your server.

13. Find out what is HTTPS url of the index.html you just uploaded.

14. Go back to your browser.

15. Instead of continuing to follow Facebook’s wizard, lets just click “Apps” again in the top bar and choose the application we just created.

16. From the left sidebar choose Settings

Mass Invite

17. In Namespace choose a url name for your app (so it will be accessed via https://apps.facebook.com/YourAppName) – this *cannot* be changed later and is unique on facebook! Choose carefully!

18. In Contact Email add your email

19. In App Domains add any domain that you serve files from. I host this example on deepmist.com and I use hostgator servers for the HTTPS access so I add deepmist.com and hostgator.com. I also have the flash example file on my s3 so I added amazonaws.com

20. Under the Facebook Canvas section you need to fill the following: Secure Canvas URL – the url of the example’s index.html file on your server.

Basically – you’re done. If you’ve done everything right, you’ll have the following link showing the example page, after you have given it permission: http://apps.facebook.com/[your app ID]

 

Now to the code

index.html

This file basically does 3 things:

  1. Facebook App Login – If it’s the first time you access the app, it will ask for permission to get your profile details, email and access to friends.
  2. Get User Details for the App – This includes 4 elements: User name, the user app access token, expiration of the access token, and the user ID. It will also write them on the page.
  3. Pass the User Details to the Flash app – Through the flashvars element.

 

Code for Facebook App Login:

Code for getting User Details:

Code for passing the User Details to Flash via flashvars:

 

example.fla

This flash file contains 4 text fields named text1, text2, text3 and (surprize) text4.

And the following code in the actions (F9)

Basically, the following line is the one getting all the flashvars parameters:

You can also uncomment the following line if you want to see all the variables passed by flashvars:

Now you can go ahead and make whatever integration you need to do inside your real Flash/ActionScript game.

I hope at least some of you found this post helpful and that I managed to save you a few hours of work. Good luck!

  • Mahmut Özpınar

    thanx…may u can help please…your code works fine in a fb app, but it dont works in a fb fan page TAB. Please can u re-write the code for a tab ? Thanx in advance !