So - another request come from a client - to add a Facebook login button for a Drupal website.

As for a start it might sound like easy to handle a task - I spent about a week to figure out the best possible solution for this. 

At first we must understand what does - Facebook login button stands for?

Is it for user mapping - is it getting some fields from users Facebook's profile?

Anyway - I found 3 possible implementations on Drupal Module's world:

Now let's break each and everyone down:

Simple FB connect seems the easiest one to install and setup:

Simple FB connect

Simple FB Connect is a Facebook Connect LOGIN/REGISTRATION for Drupal Sites

What does this module do?

  • Allow users to register with FB, their profile pic can be synced to their Drupal account 
  • Allow users to login with FB

How it works:

User can click on the "Register / Login with FB" tab on the user login page You can add a button or link anywhere on the site that points to /user/simple-fb-connect. So theming and customizing the button or link is very flexible.

When the user opens the url /user/simple-fb-connect link, it automatically takes user to Facebook and asks for his permission. Once granted the module checks the users email. If the email address is found on the Drupal Site, he is logged in automatically. Otherwise a new user account is created with the email address and the user is logged in.

Sounds like a great module - i actually installed and used it - didn't like  that couldn't find an easy way to implement Facebook connect button on Ajax Popup form, don't like the path for user linking - /user/simple-fb-connect

Facebook OAuth (FBOAuth)

Now - this module, brought to us by Lullabot seemed like the one I need - it gives a plenty of flexibility:

This module provides authentication services and an API to perform actions against Facebook. This module allows users to login to Drupal through the service commonly known as "Facebook Connect". This module is built with simplicity and flexibility in mind, it provides login services (and does it well), and an API for performing any other actions you may want to write yourself to query against Facebook's APIs.

Features:

  • One-click login through Facebook.
  • Automatic import of user e-mail and profile information during initial login.
  • Integration with Profile module to map Facebook data to Profile fields. (Drupal 6)
  • Integration with Field module to map Facebook data to fields on users. (Drupal 7)
  • A flexible and direct API for modules to get authenticated and query Facebook's APIs (plus extensive documentation).
  • Extensive permission settings for Facebook data retrieval.
  • The ability to de-authenticate or unlink a Facebook account from a Drupal account.
  • Does not require any external libraries or downloads.
  • Facebook OAuth Profile2 Integration

If you use Profile2 for user profiles, this lets FBOAuth populate Profile2 fields.

This module seemed the most promising - it gives Oauth Profile2 integration, field mapping and more.

The problem? It has not been updated since 2012 - and I jut couldn't get it work - mainly because of changes in Facebook API

Drupal for Facebook

I found a solution in this module, although it offers much more we actually need on our site - and it might be a little heavy to keep such a module, just to handle a simple Facebook login/register option. But it works perfectly fine.

This set of modules turns Drupal into a platform for developing Facebook Applications. This allows you to embed your content and features within facebook, or allow facebook users onto your site via Facebook Connect.

With Drupal for Facebook, you can harness all the power of Drupal in you Facebook App. If you already have content in Drupal, you can expose it on Facebook.

The Drupal for Facebook philosophy is that the functionality already built into Drupal should be used to create Facebook Applications. Where possible, we use Drupal's user management, permission schemes, blocks, views, etc. to implement the Facebook App. Experienced Drupal users will find it very straightforward to build a Facebook App. Facebook developers new to Drupal should spend some time browsing Drupal.org to learn best practices.

Drupal for Facebook contains several sub-modules. Enable just those that you need. For example if you need Social Plugins, enable just fb.module. For Facebook Connect, enable fb_connect.module; Canvas Pages, fb_canvas.module; wall posts and status updates, the fb_stream.module; and so on...

 

Bonus - How to change Facebook login image in Drupal for Facebook module

Yeah - I hear you  - the pain with default Facebook login button - I spent couple of hours to figure this as well.

Found solution to make a changes directly in Drupal for Facebook module fb.theme.inc file

Line: 77

Change:

    // No text, use default image.
$markup = '<div class="fb_login_button_wrapper"><a href="#" onclick="FB.login(function(){}, {scope : \'' . $scope . '\'}); return false;"><span><img src="//www.facebook.com/images/fbconnect/login-buttons/connect_light_medium_short.gif" alt="fb connect" /></span></a></div>';

to:

 // No text, use default image.
$markup = '<div class="fb_login_button_wrapper"><a href="#" onclick="FB.login(function(){}, {scope : \'' . $scope . '\'}); return false;"><span><img src="//www.reinisfischer.com/sites/all/themes/%3Cyout-theme%3E/images/%3Cyour-button%3E.png" alt="fb connect" /></span></a></div>';

Works fine with Ajax popup forms as well: