Why Facebook Connect?

Facebook Connect allows a site's users to access relevant data [e.g. friends, photos and posts] directly on your site and allow the user to post directly to Facebook without leaving your site. The principal point is to extend your site's reach organically by providing users with an easy and effective way to share. Greater detail provided by Facebook in smart-sounding tech talk and marketing speak.

How does it work?

The first step is enabling users to log-in to their Facebook account without leaving your site – via Facebook Connect. Users will either be asked to “allow” your site to access their Facebook information [if previously logged in] or log-in through a Facebook prompt [if not previously logged in]. It is important to keep in mind, as a general user and not a developer, that you will see a much higher rate of adoption/allowance if the content is compelling, promise is plausible and/or messaging clear [shoot for all three where possible]. Once a user has confirmed that your site has access to their Facebook account they will not be prompted again until they log out of Facebook.

Setup Facebook Connect Application

Before your site can access any part of Facebook you will need to create an application. Do not be intimidated by Facebook’s keg of questions, the only items that are absolutely necessary are:

HTML/JavaScript Setup

You can find all the following files with some demo code in the demo ZIP.

1. Place the xd_receiver.htm in the root directory of your Facebook Connect site.
2. Link to Facebook JavaScript API.
3. Create an fb_connect.js file (or whatever you want to name the JavaScript file that interacts with Flash/Facebook) and include that in your HTML file.
4. Make sure your CSS settings and Flash parameters are in order (z-index:0 and wmode:transparent).
5. Add delays on multiple JavaScript calls to handle browser related bugs (specifically IE6).

Logging In/Logging Out

With that, you’re set up. Let’s see it in action. You should see scrims like the following when testing the login/logout functionality.

Flash and Facebook: ExternalInterface Call

Next, you will need to allow your Flash movie to access the JavaScript setup in the previous step. Add the following to your Flash movie....

import flash.external.ExternalInterface;
ExternalInterface.addCallback("returnProfile", this, returnProfile);
ExternalInterface.addCallback("returnFriends", this, returnFriends);
ExternalInterface.addCallback("returnLogoutStatus", this, returnLogoutStatus);

var fbUser;
var fbFriends;
var isLoggedIn:Boolean = false;

function checkConnect(){
	getURL("javascript:checkConnect();");
}
function loginConnect(){
	getURL("javascript:loginConnect();");
}
function logoutConnect(){
	getURL("javascript:logoutConnect();");
}
function returnLogoutStatus(){
	isLoggedIn = false;	
	btnLoginFB.tf.text = "LOGIN";
}
function returnProfile(userInfo) {
	isLoggedIn = true;	
	btnLoginFB.tf.text = "LOGOUT";	
	fbUser = userInfo[0];	

}
function returnFriends(friendInfo) {
	fbFriends = friendInfo;	
	fbFriends.sortOn(["is_app_user","name" ], 
             [Array.DESCENDING | Array.NUMERIC, Array.CASEINSENSITIVE]);	
	fbFriendCount = fbFriends.length;
}

Creating Feed

One of the most useful [and oddly frustrating] aspects of working with the Facebook sytem is creating a "Feed Template" so your users can post to their feed. There are ways to generate Feed Templates through code (Facebook demo app has example) or go through the Facebook Developer Tool. If using the tool, make sure to note the "Template Bundle ID" after clicking on the "Register Template Bundle" button. If you don’t - and this is not an exaggeration, Facebook will pluck every feather of a dozen chickens and mail you the feathers, COD of course, in packing tube. Do it. We have received such a package and believe us when we say that a lot of pressure and a lot of feathers creates quite a mess when opened.

Posting to Feed

With the feed setup, you simply need to add a few lines of code to prompt the "post to feed" scrim.

Conclusion

Facebook Connect has added a sharing wrinkle that is most definitely worth investigating and given the relative ease of set-up, now is definitely the time to jump in and take full advantage of it before some other developer tries to piss in your punch. Good luck!

DOWNLOAD SOURCE