Troubleshooting FB Connect with Flash

Having experienced the ‘real’ joys of working with Facebook connect and integrating it with Flash the last couple of days, despite having duscessfully integrated it in the past with zero problems, I thought I would write up a little check list of reminders for those wishing to do the same thing, covering the bits and pieces from setting up with the FB connect wizard and ensuring the application config is right, to setting up the HTML code and troubleshooting any potential issues thereafter.  Here are my tips on getting setup somewhat trouble-free:

• Don’t Assume Anything
  If you setup your app with the Facebook Connect Wizard, don’t assume it is setup completely correctly.  I seem to have hit issues where one app was set up fine and the other was miss-configured and generated no end of issues.
• Use swfEmbed
  Given that you will be using JS to integrate it makes sense ot afford yourself the ease and compatibility of setting up the flash with the swfEmbed JS libs.  They are available hosted on Google APIs so include them from there in your HEAD.
• Ensure you have an ID and NAME
  When setting up the ATTRIBUTES in fro swfEmbed, ensure that you provide an ID and NAME so that the JS can reference the Flash object through it.  Without this, or with any mismatch, you are storing trouble.
• Setup allowScriptAcess
  Rather obvious but an easy PARAM to miss or miss-spell.  I personally set it to always but then again you may wish to set it up for the same domain only.
• Check the Facebook API key
  This one seems rather obvious but if you are working with multiple apps for the same project, i.e. localised versions, then you will want to ensure that you have the right key for your domain, otherwise the thing will fail.
• Double check your Canvas URL
  If your application is not generating an overlay and then a popup when you try to connect, double check that you have assigned a CANVAS URL.  In my case this was empty and causing issues.  Simply applying the URL (http://www.yourdomain.com) fixed the non-overlay issues.
• Delay FB.init
  In order to ensure the flash has fully loaded before you invoke FB connect it makes sense to delay the process by a few seconds so that when FB is finally initialised it will find everything it needs to work.  To this end, rather than calling FB init as is suggested by FB, I use a secondary method that is invoked via a setTimeout call for an extra 5 second delay.
• Relative URL for xd_receiver.htm in FB.init
  Another issue, that you may encounter that stops the login pop-up window from closing is where you specify an absolute URL with hostname rather than a relative one for the FB.init. Specifying http://www.yourdomain.com/xd_receiver.htm rather than /xd_receiver.htm will cause potential issues.
• Register ALL callbacks in Flash
  Ensure that all your JS callbacks are also registered and spelled correctly in the actionscript.  Not doing so will only throw non-existent function errors in your console.
• WMODE opaque
  Last but not least, and to make our dearly beloved IE work with FB connect, you will need to ensure that swfEmbed is applying the WMODE param and that it is either opaque or transparent, whichever takes your fancy and fits in with you performance desires.

Anyhow, I hope this checklist helps guide you through any potential road blocks you find in your Flash > FB connect development trials.

Related Posts

• Why You Need More Than Flash
• User Experience & Why HTML is Not Just a Wrapper