Facebook continues to grow at a rapid pace, and many sites have started to integrate Facebook Connect as a single sign on solution. Drupal has two modules available for integration with Facebook Connect: FB Module and Facebook Connect Module. This post uses our recent experiences to show how Facebook Connect can be extended in Drupal to offer a one-click to full profile (including image) solution. The results can look like this:
Stock functionality
As mentioned, there are two relevant modules here:
- FB Module can be used for single sign on and complete Facebook application building, but it is quite complex.
- Facebook Connect Module, on the other hand, only has the connect functionality and allows some access to the Facebook API, but it is simpler to use and extend.
Trellon's solution
While much of the functionality we needed was already available with the Facebook Connect Module, we needed a fully-integrated solution which would allow us to generate a full profile in one step. On the site we built, authenticated users can create acts of green, pledge to commit acts of green, create and register for events, and post comments. We wanted to eliminate barriers to participation which, in this case, meant creating an account quickly as part of a larger workflow.
Without Facebook integration, the user had to choose a password, supply a user name, and then upload his/her picture and fill out his/her profile information. This deterred many users. So, the site had many anonymous faces and lost quite a few potential users at the registration/login screens.
Our implementation of Facebook Connect changed this, and the many faces on the site prove this strategy to be a great success!
Now, when a user lands at the registration screen to pledge for an "Act of Green," s/he just needs to click "Quick-Register with Facebook," then allow the site access to his/her general information and email address. The user is then registered, logged in, and has pledged with his/her full name and user image.
This solution also increases site stickiness. When users return to the site and want to perform another action, they can easily login via facebook and be notified with a nice message telling them that they are already registered.
Can you make this any shorter?
Technical Challenges
The technical challenge here was to extend the facebook connect module to allow us to do all we wanted, while keeping our own customizations separate.
The first change we made to the module (which will soon be released as patches to the module) was to get destination= urls to work. Most of our workflow was dependent on this functionality.
<?php
if (user_is_anonymous())
{
drupal_goto('act_commitment', array('act_id'=> $node->nid))
}
?>and act_commitment was showing the drupal registration form.
This can be seen live here: http://act.earthday.org/act-commitment?act_id=1194
Once this was complete, we had to create the possibilities to add "quick-register" buttons to the registration and login forms which are customized.
<?php
function mymodule_custom_add_fbconnect($type, $text, $desc, &$form)
{
$attr = array( "text"=> $text );
if ($type == 'register') {
$value = fbconnect_render_register_button($attr);
}
else if ($type == 'login') {
$value = fbconnect_render_login_button($attr);
}
else {
$value = fbconnect_render_button($attr);
}
$form['fbconnect_mymodule_button'] = array(
'#type'=> 'item',
'#description'=> $desc,
'#value'=> $value,
'#weight'=> -20,
'#id'=> 'fbconnect_edn_button',
'#suffix'=> '<hr />',
);
}
?>Those customizations could then be added as easy as:
<?php
mymodule_custom_add_fbconnect('register', t('Quick-Register via Facebook'), t('Register using Facebook'), $form);
?>We also added custom hooks to allow for easier usage of the Facebook API by other modules and by supplying the data used for registration.
<?php
$facebook = fbconnect_get_facebook();
?>Here we can now use $facebook object, which is giving us direct access to the Facebook SDK.
We also changed the quick registration to run the normal submit[] hooks to allow for usage of content profile and even made it possible to get the facebook data gained via quick registration:
<?php
function mymodule_custom_fbconnect_user_data($data) {
global $user;
$content_profile = content_profile_load('profile', $user->uid);
if ($content_profile->nid > 0) {
node_prepare($content_profile);
$content_profile->field_first_name[0]['value'] = $data['first_name'];
$content_profile->field_last_name[0]['value'] = $data['last_name'];
node_save($content_profile);
}
}
?>And last, but not least, we added some APIs to easily retrieve the image URL for display.
<?php
$image_url = fbconnect_get_user_image_url($user->fbuid, 'big');
?>Conclusion and Future
All of those changes will be supplied as patches to the main fbconnect module in the following weeks. If you can't possibly wait any longer, you can download our fork below, which is attached to this post both as the module or as an archive of patches.
UPDATE: Since we originally posted this blog entry, some users reported issues with being able to log in using Facebook. We found an issue with how Varnish was configured that prevented some cookies from Facebook from properly being seen within Drupal. This has been resolved, and we adjusted our patches to prevent this error from happening again. The issue can be found here: http://drupal.org/node/1162960.
We also put up a demo site at http://fbconnect-demo.trellon.com/user/register that shows off the single click functionality. This site is not configured with Varnish, so it should be able to work for everyone regardless of how the server is configured.
