One-Click Registration with Facebook Connect

May
18

By Fabian Franz | Filed Under: code, Drupal, drupal world domination, fbconnect module, social networking

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.

Attachment	Size
fbconnect-6.x-2.0-beta1_trellon-r2.tar_.gz	58.27 KB
fbconnect-patches-6.x-2.0-beta1_trellon-r2.tar_.gz	10.29 KB

26 Comments

Anonymous

May 19, 2011

at 2:00 AM

great!!! but... it doesn't

great!!!
but... it doesn't work, i get:
The username cannot begin with a space.
You must enter an e-mail address.

sbroz

at 3:58 PM

Thanks for noticing - it

Thanks for noticing - it wasn't working due to a conflict between the Facebook Connect module and Varnish. We've created a patch for the site and logged an issue (with a proposed solution) on the Facebook Connect project on drupal.org.

May 22, 2011

at 11:04 AM

How you deal with different

How you deal with different Facebook users who have some names?

ffranz

at 4:32 PM

There is a check in the

There is a check in the module to see if the name is taken already.

If that is the case, the username is numbered like:

User, User 1, User 2, etc.

I hope this answers your question.

May 23, 2011

at 1:58 AM

Thank you for answer. What

Thank you for answer.

What happen if user change his names on Facebook after registration?

at 9:12 PM

They will currently not be

They will currently not be synchronized and the registration is just an import process.

However you could either setup a cron-job to do this with a little custom coding or use the hook_user to automatically synchronize user picture and content profile on login.

Perhaps like this (pseudo code):

<?php
function mymodule_user($op, &$edit, &$account, $category = NULL) {

  if ($op == 'login') {
    $fbuid = fbconnect_get_fbuid(TRUE);
    if ($fbuid !== FALSE) {
      // Retrieve new data 
      $data  = fbconnect_get_user_info('name, email, first_name, last_name');

      // Possibly compare the data
      // ...

      // And re-run the hook ...
      module_invoke_all('fbconnect_user_data', $data);
    }
  }
}
?>

Btw.: The image can already be synchronized via a button in the profile.

You can try out the demo here:

http://fbconnect-demo.trellon.com/user/register

and go to the profile edit screen to synchronize your user picture.

Thanks,

Fabian

Visa for Vietnam

May 22, 2013

at 4:39 AM

I am suгe this poѕt haѕ

I am suгe this poѕt haѕ touchеԁ all the intеrnet users,
itѕ really really faѕtidіouѕ post on building up new webѕіte.

My weblog Visa for Vietnam

gribble

October 14, 2011

at 6:09 AM

Clearly you have done some

Clearly you have done some good work here, did you see about getting these changes into the module properly?

Not to be ungrateful but I don't like patching modules like this and it's counter the drupal development idea not to get community changes into modules.

The project lead is after a co-maintainer too. thx.

at 9:59 AM

Hi Gribble, Unfortunately the

Hi Gribble,

Unfortunately the work has not yet been properly given back to the fbconnect project as I had not yet the time for it and unfortunately not even know what the current state of fbconnect is.

You are absolutely right that this should be contributed back instead of just patched and I'll try to find the time for that (and making the patch up-to-date) in the next weeks.

Thanks for the reminder,

Bluetegu

November 21, 2011

at 2:31 AM

Thanks a lot for sharing your

Thanks a lot for sharing your work. The one click registration and login is very valuable. We installed your patches and it works fine. Best, Ron

Arp

November 24, 2011

at 7:40 PM

I'm guessing more is required

I'm guessing more is required than just installing/enabling/configuring the module to get the nice 'Quick Registration' link?

at 8:37 PM

Yes, but fear not! Help has

Yes, but fear not! Help has arrived :-).

git clone --branch master http://git.drupal.org/sandbox/Fabianx/1352110.git fbconnect_supplement
cd fbconnect_supplement

is containing all the sample code that is run on the demo site.

The sandbox project can be found here: http://drupal.org/sandbox/Fabianx/1352110

I hope that helps.

Best Regards,

at 10:39 PM

Thanks - I guess now is as

Thanks - I guess now is as good a time as any to figure out Git. What files were edited - template.php?

November 25, 2011

at 8:48 AM

K - I see it's a

K - I see it's a supplementary module (which was implied in the post but not explicitly stated). Enabling it adds the quick register button and clicking that results in it going to Fb for permission to use the email, then returning to the same reg page except w/ 2 FB Connect checkboxes (let my friends see me, use Fb picture). Guessing I'm still missing something.

at 8:11 AM

Next time I tried quick reg

Next time I tried quick reg got this error: Fatal error: Call to undefined function content_profile_load() in /home/.../modules/fbconnect_supplement/fbconnect_supplement.module on line 86

at 8:33 AM

And ... when I try quick reg

And ... when I try quick reg again, I'm already registered! Guess if the fatal error can be sussed we're good to go.

at 9:58 AM

And some more fun, when going

And some more fun, when going to edit a node: Fatal error: Call to undefined function is_content_profile() in /home/.../modules/fbconnect_supplement/fbconnect_supplement.module on line 188

Referencing the same function - have you experienced this before?

at 9:31 AM

Hey there, Yes, you need to

Hey there,

Yes, you need to do two things to get it running:

* Enable the quick registration.
* Download and enable content profile.
* Use the profile with content type "profile"
* Add the following fields:
** field_first_name
** field_last_name
** field_picture

Then everything should work as expected. If you don't need the content profile functionality, you'll need to edit the supplement module.

I hope that helps!

at 12:41 PM

THANK YOU! Now should it

THANK YOU! Now should it automatically populate the Name & Picture fields during FB registration?

Rahul Bile

at 6:29 AM

any plans of D7 release ?

Expedia.CA

May 21, 2013

at 8:03 PM

Very descriptive article, I

Very descriptive article, I loved that a lot.
Will there be a part 2?

December 1, 2011

at 12:31 PM

It had been working but now

It had been working but now is not - popup blockers are off but nothing happens when clicking the quick reg link in Chrome or Safari. Any thoughts? Anyone willing to test this can try at http://ownbeat.echoleaf.com

December 2, 2011

at 9:07 PM

Problem solved: Fb like

Problem solved: Fb like button js was interfering.

January 15, 2012

at 5:19 PM

Bizarre - it stopped working

Bizarre - it stopped working completely for me AND your demo site is not functioning for me either (in Chrome & Firefox, after clearing caches in both). Are there any updates to your project?

Nursing

June 25, 2012

at 11:35 AM

I keep having the problem of

I keep having the problem of which module to use to enable users to login using facebook. The main problem that I want to find out about is whether this module is able to create the user account on the actual site as I want to keep hold of the users on the site rather than just allow them to login using facebook credentials. Does this module hook into to the user registration form of a drupal site?