Facebook Connect Integration using AJAX with Prototype for Seamless Login.

Tags:  Facebook Connect Login AJAX Prototype 

This tutorial will teach you how to seamlessly integrate your Facebook Connect with AJAX using the Prototype framework and PHP. In this example, I will teach you how to use AJAX and simple JavaScript with your forms to allow a user to login to Facebook Connect without having to reload the page entirely. This is beneficial because it allows the user to login/logout at any time without losing any comments they may have started writing.

First off, here is the code for the HTML form. A div is required around the name, email, and website fields because we need the ability to hide them or show them depending on whether the user is logged in or not. If the user is not logged in yet, a login button is shown. If the user is logged in, a logout button is shown. The div with id 'FCBQuery' is the tag that surrounds the updated AJAX code.

Form:

<form action = 'processForm.php' method = 'post'>

/* Within div element is shown when user is logged into Facebook. Displays a Facebook Connect logout button. */
<div id = 'loggedIntoFBC'>
<a href = \"#\" onclick = \"FB.Connect.logout(function() { FBCLogout(); }); return false;\">
<img id = \"fb_logout_image\" src = \"http://static.ak.fbcdn.net/images/fbconnect/logout-buttons/logout_small.gif\" alt = \"Connect\"/>
</a>
</div>

/* Within div element is shown when user is not logged into Facebook. Shows all form fields and a Facebook Connect login button. */
<div id = 'notLoggedIntoFBC'>
Name: <input id = 'name' name = 'name' />
Email: <input id = 'email' name = 'email' />
Website: <input id = 'website' name = 'website' />
<a href="#" onclick = "FB.Connect.requireSession(function() { FBCLogin(); }); return false;" >
<img id = "fb_login_image" src="http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_medium_short.gif" alt="Connect" />
</a>
</div>

/* div element that AJAX will inject html into on the fly. */
<div id = 'FCBQuery'></div>

/* Message textarea and Submit button are always shown regardless of Facebook connection status. */
Message: <textarea></textarea>
<input type = 'submit' />
</form>

Below is the Javascript code that is used by the login and logout buttons. Below are the two JavaScript functions that use simple JS to hide/show the form fields and Facebook Connect/Disconnect buttons. Following that are AJAX calls using the Prototype function Ajax.Updater() to update the page partially. You will need to include prototype.js in your javascript for this page.

Javascript:

<script type="text/javascript">
function FBCLogin() {
$("notLoggedIntoFBC").style.display = "none";
$("loggedIntoFBC").style.display = "";

//AJAX call to get logged in user id for comment submission.
var url = 'AJAX/FBCConnectLogin.php';
var params = '';

var ajax = new Ajax.Updater('FCBQuery', url, {method: 'post', parameters: params});

// because this is XFBML, we need to tell Facebook to re-process the document
FB.XFBML.Host.parseDomTree();
}

function FBCLogout() {
$("notLoggedIntoFBC").style.display = "";
$("loggedIntoFBC").style.display = "none";

//AJAX call to get logged in user id for comment submission.
var url = 'AJAX/FBCConnectLogout.php';
var params = '';

var ajax = new Ajax.Updater('FCBQuery', url, {method: 'post', parameters: params});

// because this is XFBML, we need to tell Facebook to re-process the document
FB.XFBML.Host.parseDomTree();
}
</script>

When the above functions are called and the AJAX methods are kicked off. The div tag with id 'FCBQuery' is updated to include some information about the Facebook user. Essentially inputting form values for the user from Facebook so they don't have to. When the form is finally submitted, the Facebook information for the user is submitted instead of the manual fields. Below are the PHP pages that the AJAX call to fill the empty div 'FCBQuery'.

PHP for user login:

<?php
/* Include Facebook necessary files for querying user information and logging in via the API. */
require_once('../PHP/FACEBOOK/php/facebook.php');
require_once('../PHP/FACEBOOK/php/facebookapi_php5_restlib.php');

/* initialize the facebook API with your application API Key and Secret Key from Facebook */
$facebook = new Facebook('key','secret');

/* When this code is passed, user login information is retrieved. */
$fb_user = $facebook->require_login();

/* A query to get more information from Facebook with the users id. */
$query = "SELECT name, pic FROM user WHERE uid = '$fb_user'";
$result = $facebook->api_client->fql_query($query);

/* Display hidden input fields that will be used instead of the previous form fields that have the Facebook user information placed in them. You can grab any information you like from the above query and pass it here. */
echo "
<div style = 'display: none;'>
<input class = 'leaveCommentText' type = 'text' name = 'author' maxlength = '50' value = 'FBUSER $fb_user'/>
<input class = 'leaveCommentText' type = 'text' name = 'email' maxlength = '50' value = 'FB_USER'/>
<input class = 'leaveCommentText' type = 'text' name = 'website' maxlength = '50' value = 'FB_USER'/>
</div>";
?>

PHP for user logout:

/* Blank because form fields are to be used again and nothing from Facebook needs to be loaded. So the div 'FCBQuery' is cleared. */
<?php

?>

And that's how you seamlessly update your forms to include your users Facebook information. Hopefully this will lead you to more user comments on your pages, and more on mine ;). If you have any questions, or anything was unclear, let me know and I will be happy to clarify it for you.