Facebook Connect Tutorial

Landing Page for Logged in User

This is the page where you want your logged in users to end up on. On this page you will check to make sure the user is logged in, get their Facebook user id (if they are in fact logged in via Facebook), and optionally display some Facebook content on the page using XFBML.

Note

If your site currently uses a single page (e.g. index.php) to display content for both logged in users and other content for non-logged in users, then you'll have to adapt the tutorial a bit, since I'm assuming you have separate pages for these.

Implementation

Step 1

First (since this is a page for logged in users only), redirect any non logged in user to the login page. If you a modifying an existing dynamic site, you probably already have some feature like this.
session_start();
if($_SESSION['authorized']!='true') {
	header("Location: http://www.yoursite.com/login.php");
}
The above code does not need to check if they are logged in via Facebook connect, this is just a standard login check

Step 2

Next instantiate the php Facebook client and get the user's Facebook id if available
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);
$fb_user=$fb->get_loggedin_user();
Remember (see Overview) that we will be using a combination of Javascript, XFBML tags, and PHP to interact with Facebook. This is the PHP part. Calling Facebook->get_loggedin_user() is a quick way of getting the userid that was created via cookies that were set by Facebook using some cross domain trickery (more on this in Login page). Creating the PHP Facebook object (new Facebook(...) )will also validate that the cookies are not faked somehow (it uses your secret key for this). This code snippet is therefore good practice to put on pretty much every page that has to do with Facebook interaction.

Technically, if you've already validated the $fb_user value on another page, you could optionally throw it into the user's session ( $_SESSION['fb_user']=$fb_user; ) so that you don't have to keep calling get_loggedin_user(). But this is just how I do it (lot's of ways to skin a cat, or TMTOWTDI if you're a PERL guy). Plus the above code snippet will create the PHP Facebook object in case you want to use the PHP API for anything else on this page.

Note that get_loggedin_user() will not return anything unless the user is logged into Facebook, has connected/authorized your site, and the Facebook Connect Javascript objects have been initialized at some point in the user's browser session. The Login page that is discussed next will take care of these steps.

Step 3

As you start to render HTML for this page, include the required Facebook javascript library. You can put this in your <head> tag:
<script src="http://static.new.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
This library will is part of setting up the javascript evironment needed for some Facebook interaction. You'll need it on any page using XFBML or using any of the Facebook Connect Javascript API . We will just be rendering XFBML on this page, but see the API, specifically the REST client API for other uses. The Javascript REST API can be an alternative to using the PHP REST API in many cases.

Step 4

In your body tag, include an onload function to initialize the javascript Facebook objects
<body onload="initFB();">
This will just call the function in Step 6 below. Need to wait until the page finishes loading before its called.

Step 5

As you continue to print out HTML for this page, check to see if $fb_user is populated to know whether or not facebook content is appropriate for this user. If it is, render some Facebook content using XFBML
<?php
     if($fb_user) {
          echo('<fb:profile-pic class="fb_profile_pic_rendered FB_ElementReady"' .
          'facebook-logo="true" size="square" uid="' . $fb_user . '"></fb:profile-pic>');
     }
 ?>
XFBML is pretty cool, after all I'm putting just some tag on the page, but what appears is the user's profile picture from Facebook. It's all done with Javascript, manipulating the DOM. The library loaded in step 3 and calls in Step 6 are part of it, although I think some Javascript is loaded that we don't see directly in FeatureLoader.js.php.

You can use the check for $fb_user throughout the page to make sure the page renders properly for people that have logged in through Facebook Connect as well as for regular users. Alternatively you could always redirect Facebook users to a Facebook users only page.

Step 6

Finally (I usually put it at the bottom of the page) include a javascript function that was referenced in your body tag. This will instantiate the Facebook Connect javascript objects that are needed for rendering XFBML tags and other Facebook features.
<script type="text/javascript">
function initFB() {
	FB_RequireFeatures(["XFBML"], function(){
		FB.init(<api_key>, xd_receiver.htm");
	});}
</script>
This will cause your XFBML tags to get processed. When the page initially loads you may momentarilly see some default content (profile picture is just a shadow head), but then it will change as the Facebook Javascript libraries process the XFBML and replace it with the correct content for that user.

The Login Page and subsequent pages will show what is needed to actually log the user in, connect them with an existing account on your site (if they have one), or create a new account using data from Facebook.

Goldstein Technologies