[editor's note: this information is now out of date. Instead, simply use the block provided by the Drupal for Facebook fbConnect module.]

This article is a quick attempt to document a login block using Facebook Connect. An example of such a block is on the right sidebar of http://www.drupalforfacebook.org. If you have a Drupal site with Drupal for Facebook installed, this article will tell you how to add the same block to your site. Be aware the technique described below is an interim solution. In this approach much of the code (PHP and javascript) is in the block definition. In a later release of Drupal for Facebook, this logic will be included in the module, and enabling it will be as simple as enabling a pre-configured block. Historically, this was my attempt to develop Facebook Connect login. This means it is experimental and still may be improved before including in the module. The code you see below is based on Facebook's example called The Run Around, modified for use with Drupal.

Prerequisites include Drupal with Drupal for Facebook installed. Be sure to read the README.txt and follow all the instructions. Also modify your theme to support Facebook Connect as described here. You'll also need to be logged in as an administration with priviliges to administer blocks and use the PHP input filter. Usually, logging in as user #1 is sufficient for this.

Create an application on facebook.com, this will get you an apikey and secret. Also create the corresponding "Facebook Application" on your drupal site. The code below will refer to the "label" you give that application. In the example it is "drupalforfacebook" Change that to the appropriate value for your site.

Go to administer >> Site Building >> blocks >> add block. Give the block any description you want, I used "fbConnect test". The title is optional and may be left blank.

Find the input format fieldset and select the PHP Code option. For now, this is required. The body of our block will include PHP, javascript and HTML. As I mentioned earlier this will become easier in a later release of Drupal for Facebook.

Below is the code you should paste into the body textarea. Then press save block to add the block to your site. Feel free to modify the HTML markup, but be careful making changes to PHP or javascript. If you can improve it, please let me know!

To help follow the code, its useful to read Facebook's own example, The Run Around. Also bear in mind the block is responsible for displaying the proper thing both when the user is not logged into Facebook, and when they are. Finally, the code calls a number of function defined in the fb_connect.module. Obviously enable that module for this to work.

<?php
// CHANGE drupalforfacebook TO THE LABEL OF YOUR APP
$fb_app = fb_get_app(array('label' => 'drupalforfacebook'));

// $fbu will be the facebook user id if the user is logged into facebook.
$fbu = fb_connect_already_loggedin($fb_app);

// Initialize the facebook api.
$fb=fb_connect_app_init($fb_app);

// Initialize Facebook Connect
fb_connect_require_feature('XFBML', $fb_app);

if (!$fbu)
$fbu = 0;

$logout_url = url('logout');
$debug_url = url('fb/devel');

// Add some javascript to this page.
drupal_add_js("
$(document).ready(function() {
//alert('ready function called, logged in user is $fbu');
FB.Facebook.get_sessionState().waitUntilReady(function(session) {
var is_loggedin = session ? true : false;

var fbu = FB.Facebook.apiClient.get_session() ?
FB.Facebook.apiClient.get_session().uid :
0;

//alert('waitUntilReady callback, is_now_logged_in is ' + is_loggedin + ' and fbu is ' + fbu);

if (is_loggedin && ($fbu == 0)) {
window.location.reload();
}
else if (!is_loggedin && ($fbu > 0)) {
//window.location='$logout_url';
alert('Something is wrong, logging out');
FB.Connect.logoutAndRedirect('$logout_url');
}
});
});

function facebook_button_onclick() {
//alert('facebook_button_onclick called');
FB.Facebook.get_sessionState().waitUntilReady(function() {
var fbu = FB.Facebook.apiClient.get_session() ?
FB.Facebook.apiClient.get_session().uid :
0;

//facebook_session_is_ready(link_to_current_user);
//alert('waitUntilReady callback was called, fbu via javascript is ' + fbu +', already logged in user is {$fbu} !');
if (fbu) {
//window.location.reload();
}
});
FB.Connect.requireSession();
//alert('requireSession returned, fbu is ' + fbu + ', logged in user is $fbu!');
};

function facebook_button_onclick2() {
alert ('facebook onclick 2 called');
FB.Facebook.get_sessionState().waitUntilReady(function() {
var fbu = FB.Facebook.apiClient.get_session() ?
FB.Facebook.apiClient.get_session().uid :
0;
alert('waitUntilReady callback was called, fbu via javascript is ' + fbu +', already logged in user is {$fbu} ! now sending user to $logout_url');
FB.Connect.logoutAndRedirect('$logout_url');
//window.location='$logout_url';
});
FB.Connect.requireSession();
alert('requireSession returned, fbu is ' + fbu + ', logged in user is $fbu!');
}
", "inline", "footer");
?>

<p>This is a test of Facebook Connect Authentication.</p>
<p>
<?php
if ($fbu = $fb->get_loggedin_user()) {
?>
You are connected, <br/>
<fb:profile-pic uid=<?php print $fbu?>></fb:profile_pic>
<fb:name uid=<?php print $fbu?> useyou=false></fb:user>.

<?php } else { ?>
This button should allow you to log in with your facebook credentials.
<fb:login-button onclick='facebook_button_onclick();'></fb:login-button>
<?php }?>

</p>