Drupal Simple FB connect + User Form Theming

 

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:

 

 

To get an image on form I needed:

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!