Facebook Connect Tutorial: How to make a sign up form

So you want to let people sign in with their facebook account huh? Cool! let’s get started.

Make four files in your server, home.html, profile.php, config.php and logout.html

The first thing you need to do is set up your application, a few months ago this was quite a long process, but facebook has made it easier, just head over to the Facebook Connect Wizard and follow the steps. Come back when you get to step 3.

facebook-connect-wizard

That wasn’t hard at all was it? If you are on step 3 your screen should look similar to the following. We are going to need the facebook connect button to be in home.html so go ahead and put the code in that page.

facebook-social-markup

Now go to home.html, if it all went right you should get a facebook connect button and when you click on it you should get a pop up window like the following.

facebook connect window

facebook connect window

If you login you will notice that facebook redirects you back to home.html, but that is not what we want, instead we want to redirect users to profile.php

Take a look at the FBML (FaceBook Markup Language) code used to render the button.

<fb:login-button v="2" size="medium" onlogin="window.location.reload(true);">
Connect with Facebook
</fb:login-button>

What we need to do with this code is change the onlogin attribute.

change
window.location.reload(true)
to
window.location='http://yourdomain.com/profile.php'

So your new button code should look like the following.

<fb:login-button v="2" size="medium" onlogin="window.location='http://yourdomain.com/profile.php';">
Connect with Facebook
</fb:login-button>

That’s it for the home.html page, now let’s go the profile.php page where most of the action takes place.

The Profile Page: profile.php

In order to work with facebook’s api you are going to have to download their PHP Client Libraries which you can get from this link.

facebook php client libraries link

There are several files inside the folder but you’ll only need  to include “facebook.php” in your profile script. Before we begin working in this script though we need to to fill out the config.php file you made. This file will have nothing more than your API Key and secret.

I created an array with these two values in my config.php file.

<php
$facebookConfig=array(
                        'apiKey'=>'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
                        'secret'=>'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
                        );
// now I can use $facebookConfig['apiKey'] and $facebookConfig['secret'] in my app

We are ready to roll! Include the two files ( config.php and facebook.php ) in your profile.php file.

<?php
require_once 'config.php';
require_once "facebook-platform/php/facebook.php"

Now we are going to make an object of the Facebook class, the constructor needs the api key and secret

$facebook= new Facebook($facebookConfig['apiKey'],$facebookConfig['secret']);

The next line of code we need to have requires that the user be logged in and it returns the user’s ID with which you can use other functions.

$fbUser=$facebook->require_login();

Now that we have an ID we can get the user’s information using a function called “user_getInfo”

Optional: This is where having a powerful text editor and good documentation of classes comes in handy, with a text editor like Eclipse you are able to see all the functions that are available for the facebook object along with a description of what they do.
facebook api with eclipse

The user_getInfo method needs a user id(s) and a field(s) of information you would like to get from the user. I just want to get their first name and last name. If you would like to get more information from a user go to Users.getInfo and scroll down to the response section to see the list of all the available fields.

So this is what you need to get information from a user.

$fields=array('first_name','last_name');
$userInfo=$facebook->api_client->users_getInfo($fbUser,$fields);

To display the information you would do this.

echo $userInfo[0]['first_name'];
echo $userInfo[0]['last_name'];

Notice that $userInfo is a two dimensional array, that’s because you could get information from more than one person, you would accomplish this by passing an array of user IDs to the getinfo method, in our case we just passed one ID and that’s why we use [0].

You now have an ID, first and last name, what you do with this information is totally up to you, you could store it in a database, cookie, session etc.

Let’s move on to how to log people out of your site.

Logging people out of your site and facebook

When someone logs into your site they also log in to facebook, so let’s make a button that people can click on to log out.

We are still working with the file "profile.php"

The function used to log out is a javascript function and it is part of facebook’s framework, when it is executed ( when the users clicks the logout button ) it will log people out of your site and facebook and it will redirect the person to a URL you specify (logout.html).

To make this function work you need to include the javascript you included in home.html

Now add the following code to that script, after the FB.init function.

function logout(){
 FB.Connect.logoutAndRedirect('http://yourdomain.com/logout.html');
 }

You can make your own image for the logout button or you can use facebook’s, let’s go ahead and used their button. We are going to make a link with an onclick attribute that will call logout().

<a onclick="logout()">
<img id="fb_logout_image" src="http://static.ak.fbcdn.net/images/fbconnect/logout-buttons/logout_small.gif" alt="Connect"/>
</a>

The previous code should display the following button.

the log out button

the log out button

When the button is clicked you should see this pop up window and be redirected to logout.html.

Logout pop up window

Logout pop up window

The contents of profile.php

<?php
require_once 'config.php';
require_once "facebook-platform/php/facebook.php";

$facebook= new Facebook($facebookConfig['apiKey'],$facebookConfig['secret']);
$fbUser=$facebook->require_login();

$fields=array('first_name','last_name');
$userInfo=$facebook->api_client->users_getInfo($fbUser,$fields);

?>
<html>
<head>
</head>
<body>
<?php 
echo $userInfo[0]['first_name'];
echo $userInfo[0]['last_name'];
?>

 <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("<?php echo $facebookConfig['apiKey'];?>");
 function logout(){
 FB.Connect.logoutAndRedirect('http://yourdomain.com/logout.php');
 }
 </script>
<a onclick="logout()"><img id="fb_logout_image" src="http://static.ak.fbcdn.net/images/fbconnect/logout-buttons/logout_small.gif" alt="Connect"/></a>


</body>
</html>

You don’t need any special code in logout.html, I just have a “You have logged out message”.

That’s it for today, stay tuned for more Facebook API tutorials.