Honestly, it’s pretty easy to do. But when searching for documentation, it wasn’t easy to find exactly what I wanted to do, so I figured I should blog about it.

What I needed was a way to easily connect my existing web application with facebook connect. What’s Facebook Connect? In a nutshell, it allows users to log in and register to your site via their facebook credentials. Here’s some more in – depth detail if you’re looking for more information; this tutorial assumes you know what the deal is with Facebook Connect and want to get it onto your application soon.

I added facebook connect to a site running PHP and using MySQL for the database; this tutorial assumes you will be doing so as well. I used Facebook’s PHP API to connect my site, and the same goes with that. If you’ve ever build a facebook application before, you’re familiar with Facebook’s API.

The last assumption I make is that you have already built a site with a full user login system, your site allows cookies, and caters to javascript enabled browsers. Basically, you built this site of yours after 2002 or so.

After the break we’ll get to it.

OK, here are the 6 major steps to adding Facebook connect.

1. Register a new app on Facebook
2. Throw an HTML file into your site’s base directory
3. Alter your frontend to allow FBML, and add facebook connect login / register buttons
4. Alter your database a bit
5. Attach some facebook code wherever you validate whether a user is logged in or not
6. Create an additional registration page if necessary
7. Create a page to delete facebook users if they disconnect

And that’s it, as far as “connecting” your site goes. How you use the API is up to you to decide, and to figure out. Personally, I just throw in some FBML here and there to show user’s information, and allow them to Log in and Register via facebook.

I could write steps 1 – 3 over – but it’s already on the Facebook developer’s wiki, in an entry titled Trying Out Facebook Connect. Assuming you’ve made any attempts to add Facebook Connect prior to reading this article, you’ve probably done these steps as advised from the Facebook developer’s wiki already. But if you haven’t check it out and get it done. Go ahead, I’ll give you some time.

…..

…..

…..

Ok, you’re done? You’ve registered your app with Facebook? You’ve added the xd_receiver.htm file to your site’s root directory? You’ve included the buttons to allow users for you to use their facebook info? You’ve tested it out, and been able to connect to your application using your own Facebook credentials?

Good, you’re done with steps 1 through 3 and you’re ready to use Facebook connect with your PHP / MySQL web app. Let’s get started by altering that database.

4.) Alter your database

I’m gonna assume you have a “users” table in your database, or some similiar table where you hold all your user info. All you’ve gotta do is add one column to the end of this table – I call it fbid, and it’s used to hold – how did you know? Yep. The user’s Facebook ID as it appears in Facebook’s own database.

This is half of what Facebook connect does – it allows Facebook users the choice of allowing outside apps to their Facebook ID while they are logged into Facebook. The other half is held within the API, FBML, FQL, and more. Don’t know what any of that is? Check out the Facebook Developer’s Wiki.

Now, after a user has added your app to their Facebook account, you can access their Facebook ID, and retreive info from Facebook’s database using the ID.

How and when do you enter the ID? That’s step 6. We have to get the facebook ID first, early on in our App’s call stack.

5.) Attach some facebook code wherever you validate whether a user is logged in or not

Not all login systems are alike, but usually near an application’s call stack is where you find out whether or not a user has a valid session or existing cookie going with your web site. To detect whether or not someone is logged onto facebook, you have to include the Facebook Platform’s PHP API, downloadable here.

OK, so now if anyone is looged into facebook, you’ll be able to get their Facebook ID! Hopefully you put this code near where you validate a user’s authenticity, cause now you have another thing to check. Look through your database for a user who’s facebook ID value (the field you placed in step 4) matches the $fb_id you instantiated in the previous code. If you are, consider them logged in as if they had an active session or cookie. Or hell, give them a new session and log them in however you want.

Use the $fb_id for whatever FBML or FJQS you need. And you now have the power of the Facebook platform and all the functions contained within that API, all at your command. Do the research on Facebook’s developer site to find out what you can do with the API.

But how did you know what user had a Faceboook ID that matched the cookie? Remember, when they first confirmed they wanted to connect Facebook with your site, you added them into your database? No? Well we haven’t done it yet, so don’t worry too much.

6.) Create an additional registration page (if necessary)

Immediately after someone allows you to use their Facebook ID by confirming using the facebook connect button you placed on your site in step 3, a javascript callback function may be used to add more info. Here is where you take their Facebook ID and store it in your database so you can recognize when they are logged onto facebook, and thus your site.

Now you have a cboice to make – yes you can get a user’s First and Last name, the names of their friends, their marital status, their favorite books, etc etc, but you can’t get their email address. For a lot of sites, like CabCorner, an email address is required to be a user in the database.

So what’s your choice over? Do you need more information that facebook can provide you via their API, FBML, etc, or not?

If not, then you can place a simple AJAX function in the login button as the callback, like so.

On the AJAX page, use the previously instantiated $fb_id variable to get the user’s Facebook ID, and whatever else you need to put a new user into your database. From there, step 5 will work to login the user after the page refreshes. Then you can ask them to use Facebook Connect as a login authentication system!

However, maybe you need to get their email address. Then, simply change the callback onlogin function to a redirect.

Point the window.location command to another page where you setup a form to ask for the user’s email or whatever else you need to register them into your site. Just make sure to include their facebook id using $fb_id.

Create a page to delete facebook users if they disconnect

OK, so people may not want to stay connected to your app. Deal with it. Not just emotionally – you need to create a callback page. Within your facebook app’s settings page, accessible via your Facebook account on facebook.com, you can set a URL to be called by Facebook after a user decides to “disconnect” from your site.

So make a page where the $fb_id is used to login a user, then delete or disable their account, and log them out of your site.

And that’s it! If you’ve read this far, hopefully this helped. Yes, it was mostly a tutorial of hand holding – not custom coding. But now you can let Facebookers login to your site while they’re inevitably logged into facebook! Leave any comments below on mistakes I’ve made or suggestions please. If there’s a big demand, I might write a tutorial on how to tie in your Zend Framework app with Facebook connect.

Until then, happy coding!