Other sites run by Goldstein Technologies: RealFoot | QGenix | ZingJet | SkyDroid | Paul on Golf |

Facebook Connect Tutorial


Connect Account Page

The purpose of this page is to allow someone to link their Facebook identity to an identity they've already, registered on your site. For those people that haven't registered yet on your site, this page will also present a link to the Create New Account page, that will allow them to automatically register using their Facebook credentials, instead of using your sites normal registration page.

Users are sent to this page when your site has been able to get their facebook user id, but that user id is not linked to an account in your site's database. People are redirected here from code in the Login Page after getting a $fb_user value and doing a query against your sites database but not getting any rows back.

I'll be using this page both to present an html FORM and to process it, but you can easilly split this up into 2 pages (one to present, the other to process) if that's your style.


Step 1

First we will use our standard way of checking for $fb_user, which we expect to be populated on this page, because that's why the user was redirected here in the first place. If $fb_user is not present, then something is wrong, send them back tot he login page.

include_once 'site/fbconnect/config.php'; //has $api_key and $secret defined.
include_once 'site/facebook-platform/client/facebook.php';
global $api_key,$secret;
$fb=new Facebook($api_key,$secret);
if(!$fb_user) {
	header("Location: http://www.yoursite.com/login.php");

Step 2

So since we are using this page for processing (as well as presenting a FORM) let's check to see if they submitted the form and then try to use those values to join up their $fb_user id to a user id on your site.

Below is an example of some code that could be used. The details of what you should implement depend on your database, the way you connect to it etc.. The basic idea is pretty simple: If the username/password they entered on the form, matches a row in your database, then update that row with the $fb_user value (to be stored in a column specifically for Facebook ids).

Also, note that if you wanted to you could use the PHP API to retrieve additional info about the user if you wanted to add anything Facebook specific to the data you are storing. See the New Account page for an example of how to do this.

if($user != NULL && $passw !=null && $fb_user !=null) {
	//Note the esc() function below is custom function which is just short for mysql_real_escape_string();
	$query="select id from userprofile where login_name='" . esc($user) . "' and password_hash='" . esc($passw) ."' and account_verified='Y'";
	$result = mysql_query($query);
	if(!$result || @mysql_num_rows($result)<1) {
		$_SESSION['fb_connect_error']="Invalid login";
	} else {
		//Got a row, Ok now link up the accounts
		$query="update userprofile set fb_userid=" . esc($fb_user) . " where id=" . $userId;
	if($connected) {
		//OK we linked up their account now log them in. 
    	header("Location: http://www.yoursite.com/loggedInUserPage.php");

So don't get hung up on my coding style here, you can use whatever techniques you want. Basic idea is to put their Facebook ID into your database along with their already existing data. By doing this, the next time they visit your site, the Login page will be able to find it and log them in with it.

Step 3

The rest of this page is just plain HTML. You could optionally instantiate the Facebook Javascript components here, if for example you wanted to show the user's Facebook profile picture on this page. I'm going to keep it simple.

Link to existing account or create new ?
<a href="newFbAccount.php">Create new account using Facebook Connect</a> 
Link to an existing account by entering your username/password below. This will let us connect our Facebook Identity to your 
identity on our site, so that you don't loose any data you've stored here.</p>
<p>You will only have to do this one time.</p>
if($_SESSION['fb_connect_error']!=null) {
        echo '<h2 class="error_medium">' . $_SESSION['fb_connect_error'] . "</h2><br/>";
<form action="connect_page.php">
Username: <input type="text" name="username"><br/>
Password: <input type="password" name="password">
<input type="hidden" name="fb_user" value="<?php echo($fb_user) ?>">
<input type="submit" value="submit" name="submit">

Note that I've included a link to the New Account page, which we will be discussing next. So this way they have the option of linking to an existing account, or just creating a new one from scratch using their Facebook data.


The New Account Page will create a new account for the user on your site using their Facebook data.