Facebook ActionScript API - Overall Architecture

The last few posts talked about setting up your Facebook app and Flex e nvironment, now let's look at how all the pieces fit together. There are several ways to call the Facebook API via Flex, but we're going to focus on creating an IFrame application. There are other ways to interact with Facebook, like as an FBML application, or even as a desktop AIR application Documentation of each type of interaction is available here. Here is the official diagram from Adobe on the architecture of a Flex IFrame app




I personally didn't Grok how it all fit together when I saw this diagram, so after I finished my first app, I whiteboarded this diagram.




1 - Your app. The url is http://apps.facebook.com/[your application name] . When this page appears in a web browser, the page contains an IFrame that references a URL on your web server.
2 - Your Facebook application settings point to your website. Facebook posts all required variables over the querystring into your containing HTML page, as well as reposting any other querystring vars, including any variable you may want to pass in.
3 - The index.htm file supplied from Adobe creates an array of all querystring variables passed into the page, and using the standard swfobject.js file, injects all variables into your .swf. I have usually had to tweak the code of this page to include/refine my personal application variables.
4 - Now your .swf is displayed within the IFrame on your Facebook application page, having evaluated all Facebook variables, as well as your own custom application variables.

Next post, we'll talk about some even easier ways to integrate a Flex/Flash app with Facebook, and talk about some best practices.

Facebook ActionScript API - Creating a Canvas/Project

In my last post, I talked about some prerequisites and things you might want to think about before integrating a Flash app using the ActionScript API. Now let's take a look at how to configure a Facebook canvas and get your local project set up.

The first thing you need to do to get started is to add the Facebook developer application by going to www.facebook.com/developers. This is just a Facebook application that allows you to register your application.


Once you've allowed access to the Facebook developer application, it's time to create your application and canvas. Give it a name and agree to the terms.


Once you've created your application, go in to Edit Application and you'll see that Facebook created an API Key and Secret for you. We'll talk about those later, but remember that you never want to give out your Application Key and Secret for security reasons. When the app is deployed we will be using a session-specific key created for us by Facebook when making our API calls, but during testing, we can use these codes to perform the calls locally.



Now we need to set up our Facebook Canvas. First in the box for the Canvas Page URL, give it the name you want your application to have on Facebook (apps.facebook.com/[yourappname]) in all lowercase. Then set the Callback URL... this is the path to YOUR server where the swf will be located. (It should be contained within an HTML wrapper page that we'll get from Adobe). We will be creating an IFrame application - in other words the page on our site will be "sucked into" an IFrame on our Facebook canvas page.


When we release, our application type will be Web, but for coding/testing/debugging purposes, make the application type Desktop, so we can just pop up a window to allow access, and test our Facebook API calls locally.


Now we need to download a few files from Adobe to set up our application in Flex (0r Flash).
First, get the Facebook-ActionScript-API from Google Code (http://code.google.com/p/facebook-actionscript-api/downloads/list).



Then get the iframe wrapper from http://download.macromedia.com/pub/developer/flexfb_iframe_wrapper.zip . After you unzip the file, you'll see it contains an html wrapper page for your swf, plus swfobject.js. We'll look later at what this html wrapper page does.


Now we need to go ahead and create our project in Flex Builder, make sure it's a web application.


In the libs folder, go ahead and add the Facebook library you downloaded from Google Code.


...Now you're all set to start development on your Facebook Flash application. That's a lot for one blog post, so next time we'll take a look at really Grok-ing how and where everything goes, as well as looking at other Flash-Facebook architectures as well. (A much more in-depth walk through is available on the Adobe devnet site).

Facebook ActionScript API - intro/gotchas

After delving into the Facebook-ActionScript API for the last few months, and finally getting an app listed in the application directory, I was kindly asked to give an overview/presentation of my thoughts on Facebook/Flash integration at the Adobe User Group on 9/29.

It was a one-hour overview, so there's way too much for a single blog post. So for this first posting in the series, here are a few gotchas/considerations to make before integrating a Flex/Flash application with Facebook:

1) You can't send invites or requests.
The ActionScript API for Facebook just doesn't contain calls to these methods. The closest thing you can do is send a notification using the sendNotification() api call that takes in an array of Facebook userids, and your text message or hyperlink. If you're not sure what a Facebook notification is, it's that little sign icon down at the bottom right of all Facebook pages, to the right of the Facebook chat window.




2)Autoplay is always set to false when embedding a .swf using FBML.
This is by design. I'm sure the reason for it is for Facebook to distinguish itself from MySpace with all the auto-launch junk on many pages. You are allowed to specify a placeholder image, so that needs to be part of your design decisions. Hopefully this isn't a show-stopper.

3)Security issues when accessing external XML files.
If your swf references an external XML file, within Facebook you will get a security violation. The suggested workaround is to reference it using a parent PHP container. Or you could embed the xml in your .swf, but I imagine it's external for application update-ability purposes, and that would defeat the purpose.

4)Inability to make the Sessionless API calls
There are a variety of Facebook calls that can be made without having a session key however, when making these calls via the ActionScript API, you will receive an 'invalid signature' error message if you do not have a valid session because the api calls via session.facebook require a valid session key (ie: the user must allow access to your application before you can make any calls). I am still investigating this... any other insights are most welcome. It would be nice to be able to forestall the "ALLOW ACCESS" prompt to you user as long as possible.

Well, now that all this negativity is out of the way, in the next post we'll walk through how to set up a new Facebook application.

Solution to that triangular golf tee peg game.

Last month we stopped at a Cracker Barrel on the way back from Northern Ohio, and they had one of those triangular games where you jump the golf tee pegs until you hopefully only have one left. They've been around forever - on the east coast, the Dutch Pantry restaurants had the same thing. Anyway, I don't know if I ever had solved one of these puzzles, except for pure luck, but my oldest son Johnny ended up finding a repeatable solution before breakfast even arrived. So here he is showing off his solution pattern in a youtube video.

Cookies across subdomains

I recently was on a project where we built an online contest/auction site for a company which ran from June through September.

The first thing the user did was register - using an already existing registration area in a different subdomain on the same site. Once they registered, a cookie was created, storing a login token. They were then redirected to our domain where we needed to access that same cookie and act accordingly. We also used cookies as a nicety to the user so they wouldn't have to login every time they came back to the site.

When we deployed, we found that we were unable to access the registration token cookie created in the other subdomain, because when the cookie was created, the domain was not specified, so the default domain was "registration.domain.com". Our application at "contest.domain.com" was unable to access this cookie. So we ended up resolving the issue by making sure to specify no subdomain, just using "domain.com". We were then able to reference each others' cookies across the entire domain:

document.cookie = name + '=' + value + "; expires=" + exp + "; domain=mydomain.com";

Importing Verizon Backup Assistant Contacts to Outlook for Blackberry and other smart phone devices

(* Edited 11/20/2011 DS - Good news - this old posting from early 2009 can now easily be accomplished using Verizon tools: To sync Outlook to Verizon phone: (1) Set up Backup Assistant on the phone; (2) Use Backup Assistant to import Outlook contacts .csv; (3) sync should happen automatically. For instructions on generating a .csv from Outlook, see instructions below.*)
Recently, I posted the code I had used to import my Verizon Backup Assistant contacts into Outlook, so I didn't have to re-enter all my contacts manually. I originally wrote it because I needed it for my Blackberry Storm, but really it's usable for any phone that uses Outlook to sync up Contacts. Also the original script required Firefox, and I've rewritten it to be browser neutral.

I'll repeat the steps, revised for IE and non-Storm specific.

You will need MS Outlook, obviously, since that's what we're targeting. (that's what the Storm and many other smartphones use to sync contacts). And of course you'll have to have your old contacts backed up using Verizon Backup Assistant, since that's our source for contacts.

Here's a step-by-step overview of how to do it:

1. Make sure you are running Firefox Version 3 and above or IE Version 7 or above. (If you have earlier versions, You can still test them out for me, and I've supplied a feedback link).


2. Go to http://www.verizonwireless.com/backupassistant


3. Select "Print Address Book" (must allow popups)


4. Select all page text (Ctrl+a)

Edited 6/15/09 DS - Some browsers have problems processing the headers:
"I think the problem is you shouldn't do "CRTL+A" and get *everything*. Just highlight starting at the first entry and continue to the last one. Don't include "Backup Assistant Contacts", "Print Address Book", "Name", and so on."


5. Copy (Ctrl+c)


6. Go to the Backup Assistant to Outlook conversion script page


7. Paste text into top textbox


8. Click the "Convert to Outlook CSV text" button


9. Select all text from bottom text box


10. Create a new text file using Notepad/Wordpad, paste in text


11. Save the file with .csv extension


12. (you may want to examine this file in Excel before importing to Outlook)


13. Also, you may want to think about adding email and other info into the spreadsheet now - it's way easier to do it here than in Outlook.


14. Open Outlook, select File... Import and Export... Import from another program or file


15. Select Comma separated files (Windows)


16. Browse to the .csv file choose overwrite or duplicate


17. For destination folder, select "Contacts", select next, finish.

You should now see your newly created contacts in Outlook.

Optional Steps for Blackberry users to import from Outlook -> Blackberry:

1. Now plug your Storm into your PC/Laptop


2. Launch Desktop Manager


3. Select the synchronize button/area


4. Set up synchronization for contacts


5. Synchronize

All of your Outlook Contacts should now appear under your Blackberry Contacts.

Blackberry Storm review from a former Razr user

I recently responded to an email from a fellow QSI employee who, like me, was looking to upgrade from the Razr to the BlackBerry Storm.

Overall I'm happy with it. There are a few minor annoying UI issues, but here's what I think is good and bad

The most surprising non-feature is the lack of wi-fi connectivity - I spent a long time trying to figure out how to do it before finding out you can only use the Verizon network.

Web browsing is slow.

The keyboard is ok but easy to fatfinger. I've never found one I like anyway, so it's no better or worse than anything else.

Definitely get the screen protectors and/or holster. The holster looks precarious, but I've had it for weeks and no problems. I stupidly played hockey with it in my pocket and got a few scratches on the screen.

I like the swiss army knife-ness of it... so much cool stuff, the camera, mp3 player, maps, webbrowser, IM, pop email and oh yeah phone. There's some Excel and Word apps too, but I've never had much use for them.

The pop email collection works really well. Right there on the main screen one click and view email. You can add every web email you have, and you're alerted every time you receive one.

The camera is good - you definitely need a steady hand... pictures get sent upside down when you email them, though if you don't hold it the right way landscape-wise. The thumbnail is right-side-up, but when the user views the photo, everyone's hanging from the ceiling. And if you flip it in PhotoShop and resend it, the thumbnail is upside down. So use the camera with the camera mode button facing up. Also if you take a portrait shot and send it via email, or to facebook, it posts landscape.

Another thing that sucks is that the mode defaults to landscape every time you lay it down. It doesn't seem like that big of an issue at first, but in "Answer Call" mode, when the accellerometer switches from landscape to portrait, the "Ignore Call" button occupies the same screen space that had the "Answer Call" button in landscape mode. So you either end up ignoring the call, or having to risk missing the call while waiting for the mode to change. I Tweeted about this a few days ago and it happens pretty much every time you receive a call.

There is a lot of lag time when clicking buttons.

Blackberry apps are written in Java, but there's an MDS runtime environment that is a plugin for VS that looks promising for app development using .NET.

Speed dial is one less click than the Razr, just click the call button, and click-hold the speed dial number.

A lot of the blackberry apps like FaceBook, Twitter are pretty limited - I just end up just using the browser a lot of times. I had a posting I needed to delete once, and I had to scramble for a laptop and wi-fi to delete it. Yikes.

If you're upgrading from the Razr to this, you'll be frikkin' ecstatic, though.

And of course, if you need to import your contacts from Verizon's backup assistant, it's impossible. Check out my Backup Assistant import script, if you need to do this.

Hey, this might make a good blog post!

Import Verizon Backup Assistant Contacts for BlackBerry Storm to Outlook using Firefox

(* Edited 11/20/2011 DS - Good news - this old posting from early 2009 can now easily be accomplished using Verizon tools: To sync Outlook to Verizon phone: (1) Set up Backup Assistant on the phone; (2) Use Backup Assistant to import Outlook contacts .csv; (3) sync should happen automatically. For instructions on generating a .csv from Outlook, see instructions below.*)

As a new owner of a new Blackberry Storm, I was disappointed to hear that there was no way to import my contacts from my old phone that I had stored in Verizon's Backup Assistant web app. After finding out how contacts work with the Storm, I thought I'd create a script that can convert Backup Assistant contacts to contacts that can be sync'ed to the Storm and share it for anyone else having the same problem.

(* Edited 2/26/09 DS - IE and Firefox versions now exist... Tested in IE Version 7+ and Firefox Version 3+.*)
One caveat... right now it only works in Firefox, so you'll need to download Firefox if you don't have it. You will also need MS Outlook (that's what the Storm uses to sync contacts), and the Desktop Manager software, which comes with the Storm. And obviously, you'll have to have your old contacts backed up using Verizon Backup Assistant.

Here's a step-by-step overview of how to do it:

1. Get Firefox if you don't have it. Make sure you are running Firefox Version 3 and above or IE Version 7 or above.
2. Go to http://www.verizonwireless.com/backupassistant
3. Select "Print Address Book" (must allow popups)
4. Select all page text (Ctrl+a)

Edited 6/15/09 DS - Some browsers have problems processing the headers:
"I think the problem is you shouldn't do "CRTL+A" and get *everything*. Just highlight starting at the first entry and continue to the last one. Don't include "Backup Assistant Contacts", "Print Address Book", "Name", and so on."

5. Copy (Ctrl+c)
6. Go to The Backup Assistant to Outlook conversion script page
7. Paste text into top textbox
8. Click the "Convert to Outlook CSV text" button
9. Select all text from bottom text box
10. Create a new text file using Notepad/Wordpad, paste in text
11. Save the file with .csv extension
11a.(you may want to examine this file in Excel before importing to Outlook)
11b.(* Edited 1/28/09 DS - You may want to think about adding email and other info into the spreadsheet now - it's way easier to do it here than in Outlook.*)
12. Open Outlook, select File... Import and Export... Import from another program or file
13. Select Comma separated files (Windows)
14. Browse to the .csv file choose overwrite or duplicate
15. For destination folder, select "Contacts", select next, finish.

You should now see your newly created contacts in Outlook

Now plug your Storm into your PC/Laptop, launch Desktop Manager

16. Select the synchronize button/area
17. Set up synchronization for contacts
18. Synchronize

All of your Outlook Contacts should now appear under your Blackberry Contacts.