Facebook Connect Integration

May
14

Having recently had to integrate facebook connect into a websites registration and login process I realised there seems to be a lot of confusing articles on the web. Hopefully this article will provide developers with the basic steps on setting up Facebook Connect

Main Steps

1. Register API key
2. Download SDK
3. Include Javascript libraries
4. Modify your database
5. Modify your registration and login code

Register API key

First you need to register for an API key, this can be done by visiting the developers centre at http://developers.facebook.com/app

Download SDK

You will need to download the Facebook PHP SDK from the Github repository at https://github.com/facebook/php-sdk. For the purpose of this tutorial we will place the files from the src folder into a subfolder on our site called fbsdk

Include Javascript Libraries

Place the following directly above your closing body tag:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script>
<script type="text/javascript">
	FB.init("YOUR_APP_ID", "/xd_receiver.htm");
</script>

Create a new file in the root of your site called xd_receiver.htm and copy and paste the following into it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html>

Modify Your Database

You will need to add a field in your user table to store facebook id’s

Modify Your Registration and Login Code

Here’s some sample code for dealing with the logging in and registering. This file is saved in the root as fb.php

<?php
include_once('fbsdk/facebook.php');
$fb = new Facebook(array('appId'=>'YOUR_APP_ID', 'secret'=>'YOUR_SECRET_KEY'));
// $fb_user will contain the facebook id of the visitor if they are signed in and have already authorised your app
$fb_user = $fb->getUser();
if($fb_user) {
	$user_profile = $fb->api('/me');
	$logoutUrl = $fb->getLogoutUrl(array(
		'redirect_uri'	=> "http://YOUR_DOMAIN.com/fb.php",
	));
	/*
	Check if the user's facebook id exists in your user table. The variable $fb_user contains the users facebook id
	*/
	if( $exists == true) {  // if facebook user id is in database
		// Insert your code for logging a user in, e.g saving the user in session
		header("Location:/home.php");// redirect to your logged in users homepage
		exit();		
	} else {
		$user_info	= $fb->api('/'.$fb_user);
		/*
		Insert your code for creating a new user in your user table and saving the required information
		You can access the facebook users details from the $user_info array for example $user_info['first_name'] will return the facebook users first name. 
		Also insert your code for logging a user in, e.g saving the user in session
		*/
		header("Location:/home.php"); // redirect to your logged in users homepage
		exit();	
	}
} else { // if the user is now signed into Facebook or have not authorised your app then show the sign in button
	$loginUrl = $fb->getLoginUrl(array(
		'scope'		=> 'email',
		'redirect_uri'	=> "http://YOUR_DOMAIN.com/fb.php",
	));
	echo '<p>Click to log with your facebook account.</p><fb:login-button size="medium" onlogin="document.location.href=\''.$loginUrl.'\';"></fb:login-button>';
}
?>