Drupal Simple FB connect + User Form Theming

| Drupal Development | 8 seen

Drupal Drupal forms Facebook login Simple FB Connect

Lately I have been busy with a project involving a lot of custom coding and programming (mainly because of existing complex web-design)

So at the finish line - there are still few things we must to finish - And one of them involves Facebook Login button to Drupal site.

See: Simple FB connect Drupal 8 Mapping custom fields from Facebook

There are plenty of modules offering such kind of behavior - but problem with those modules  - not always they are updated to the latest Facebook API versions. Speaking of what - ahhh - Facebook sets the rules, when to update and how to update their API - leaving developers to be forced to upgrade for newer versions of their API.

So a while ago I compared 3 Drupal modules offering Facebook connect - in that article I found following:

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

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
 
Damned, what a fool I was - you see my comments of that I couldn't find an easy way to implement Facebook connect button on Ajax Popup forms - well...
a few days latter working with other Drupal Modules I found they sucks even more - so I came back to this little great module - Simple FB connect - what does - what it says it does - it allows simple connect to Drupal site using Facebook account - nothing more, nothing less. I just works!
 
I will not dig in details of how to create a Facebook APP and how to connect it with Simple FB connect (Just read modules Readme.txt file) - but I'm going to show how you can add a self styled Facebook connect icon on Ajax Popup user login:
 
Facebook Connect on Popup form
Facebook Connect on Popup form
 
To get an image on form I needed:
  • Create a image and upload it to server
  • Theme user-login.tpl.php and user-register-form.tpl.php
To theme a user-login and user-register-form you will need to create a template.php file and add following code to it
<?php
function YOUR-THEME_theme() {
  $items = array();
  $items['user-login'] = array(
    'render element' => 'form',
    'path' => drupal_get_path('theme', 'YOUR-THEME') . '/templates',
    'template' => 'user_login',
    'preprocess functions' => array(
    'YOUR-THEME_preprocess_user_login'
    ),
  );
  $items['user_register_form'] = array(
    'render element' => 'form',
    'path' => drupal_get_path('theme', 'YOUR-THEME') . '/templates',
    'template' => 'user-register-form',
    'preprocess functions' => array(
    'YOUR-THEME_preprocess_user_register_form'
    ),
  );
  $items['user_pass'] = array(
    'render element' => 'form',
    'path' => drupal_get_path('theme', 'YOUR-THEME') . '/templates',
    'template' => 'user-pass',
    'preprocess functions' => array(
    'YOUR-THEME_preprocess_user_pass'
    ),
  );
  return $items;
}
?>
<?php
function YOUR-THEME_preprocess_user_login(&$vars) {
  $vars['intro_text'] = t('This is my awesome login form');
}
function YOUR-THEME_preprocess_user_register_form(&$vars) {
  $vars['intro_text'] = t('This is my super awesome reg form');
}
function YOUR-THEME_preprocess_user_pass(&$vars) {
  $vars['intro_text'] = t('This is my super awesome request new password form');
}
?>

Now, what this code does - it provides a custom tpl.php files where you can theme your login/register pages (works for popups as well).

Here are three functions - user-login, user-register-form and user-pass, so for each of them you must create a new files - user-login.tpl.php user-register-form.tpl.php and user-pass.tpl.php.

I'm actually interested just in two of them - login and register forms, so I'm not creating any user-pass.tpl.php page (for now)

Now the tricky part comes here - I found no problem to render user-login.tpl.php, but for some reason I haven't yet found to get this work on user-register-form.tpl.php

So for user-login.tpl.php add this code

<p><?php print $intro_text; ?></p>

<div class="fb_user-login-button-wrapper"><a href="/user/simple-fb-connect"><img src="source-to-image-file"/></a></div>

<div class="yourtheme-user-login-form-wrapper">
  <?php print drupal_render_children($form) ?>
</div>

Now it's just a matter of CSS to style your form! Enjoy!