Facebook Login Button For a Drupal website

| Drupal Development | 4 seen

Drupal Facebook login FBoauth

<p>So - another request come from a client - to add a Facebook login button for a Drupal website.</p><p>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.&nbsp;</p><p>At first we must understand what does - <strong>Facebook login button stands for</strong>?</p><p><em>Is it for user mapping - is it getting some fields from users Facebook's profile?</em></p><p>Anyway - I found 3 possible implementations on Drupal Module's world:</p><ul><li><a href="https://www.drupal.org/project/simple_fb_connect">Simple FB connect</a></li><li><a href="https://www.drupal.org/project/fboauth">FB Oauth</a></li><li><a href="https://www.drupal.org/project/fb">FB</a></li></ul><p>Now let's break each and everyone down:</p><p><em>Simple FB connect seems the easiest one to install and setup:</em></p><h2>Simple FB connect</h2><p>Simple FB Connect is a Facebook Connect LOGIN/REGISTRATION for Drupal Sites</p><p><strong>What does this module do?</strong></p><ul><li>Allow users to register with FB, their profile pic can be synced to their Drupal account&nbsp;</li><li>Allow users to login with FB</li></ul><p><strong>How it works:</strong></p><p>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.</p><p>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.</p><p><strong>Sounds like a great module - i actually installed and used it - didn't like &nbsp;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</strong></p><h1 id="page-subtitle">Facebook OAuth (FBOAuth)</h1><p>Now - this module, brought to us by Lullabot seemed like the one I need - it gives a plenty of flexibility:</p><p>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.</p><p><strong>Features:</strong></p><ul><li>One-click login through Facebook.</li><li>Automatic import of user e-mail and profile information during initial login.</li><li>Integration with Profile module to map Facebook data to Profile fields. (Drupal 6)</li><li>Integration with Field module to map Facebook data to fields on users. (Drupal 7<span style="line-height: 1.538em;">) </span></li><li><span style="line-height: 1.538em;">A flexible and direct API for modules to get authenticated and query Facebook's APIs (plus extensive documentation).</span></li><li><span style="line-height: 1.538em;"> Extensive permission settings for Facebook data retrieval. </span></li><li><span style="line-height: 1.538em;">The ability to de-authenticate or unlink a Facebook account from a Drupal account.</span></li><li><span style="line-height: 1.538em;"> Does not require any external libraries or downloads.</span></li><li><a href="http://drupal.org/project/fboauth_profile2&quot; rel="nofollow">Facebook OAuth Profile2 Integration</a>:&nbsp;</li></ul><p><span style="line-height: 1.538em;">If you use Profile2 for user profiles, this lets FBOAuth populate Profile2 fields.</span></p><p><strong>This module seemed the most promising - it gives Oauth Profile2 integration, field mapping and more.</strong></p><p><strong>The problem? It has not been updated since 2012 - and I jut couldn't get it work - mainly because of changes in Facebook API</strong></p><h2>Drupal for Facebook</h2><p>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.</p><p>This set of modules turns Drupal into a platform for developing&nbsp;Facebook Applications. This allows you to embed your content and features within facebook, or allow facebook users onto your site via&nbsp;<a href="https://developers.facebook.com/docs/guides/web/#login&quot; rel="nofollow">Facebook Connect</a>.</p><p>With&nbsp;<a href="http://www.drupalforfacebook.org/&quot; rel="nofollow">Drupal for Facebook</a>, you can harness all the power of&nbsp;<a href="http://www.drupal.org/&quot; rel="nofollow">Drupal</a>&nbsp;in you Facebook App. If you already have content in Drupal, you can expose it on&nbsp;<a href="http://www.facebook.com/&quot; rel="nofollow">Facebook</a>.</p><p>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.</p><p><em>Drupal for Facebook</em>&nbsp;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&nbsp;<code>fb_connect.module</code>; Canvas Pages,&nbsp;<code>fb_canvas.module</code>; wall posts and status updates, the&nbsp;<code>fb_stream.module</code>; and so on...</p><p>&nbsp;</p><h2>Bonus - How to change Facebook login image in Drupal for Facebook module</h2><p>Yeah - I hear you &nbsp;- the pain with default Facebook login button - I spent couple of hours to figure this as well.</p><p>Found solution to make a changes directly in Drupal for Facebook module fb.theme.inc file</p><p>Line: 77</p><p>Change:</p><pre> // No text, use default image.<br> $markup = '&lt;div class="fb_login_button_wrapper"&gt;&lt;a href="#" onclick="FB.login(function(){}, {scope : \'' . $scope . '\'}); return false;"&gt;&lt;span&gt;&lt;img src="//www.facebook.com/images/fbconnect/login-buttons/connect_light_medium_sh…; alt="fb connect" /&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;';</pre><p>to:</p><pre> // No text, use default image.<br> $markup = '&lt;div class="fb_login_button_wrapper"&gt;&lt;a href="#" onclick="FB.login(function(){}, {scope : \'' . $scope . '\'}); return false;"&gt;&lt;span&gt;&lt;img src="/sites/all/themes/&lt;yout-theme&gt;/images/&lt;your-button&gt;.png" alt="fb connect" /&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;';</pre><p>Works fine with Ajax popup forms as well:</p><p><img src="http://www.reinisfischer.com/sites/default/files/popupform.jpg&quot; width="344" height="264"></p>