Thủ thuật custom facebook login button trong Drupal 7

Working on current Drupal 7 project we had to create customized facebook login button to fit nicely with the rest of oversized login option links. The target was to create completely custom CSS-able login buttons. It took a couple of hours to fix the puzzle into working condition.

This solution tested with facebook connect (https://drupal.org/project/fbcon...) 7x-2.0-beta4 module. Setting up fbconnect is out of scope of this article, but just to mention all settings are pretty much default. It will take care of fb initialization on particular login page.

First, we want to create a small javascript file to handle facebook authorization popup (we call it js/fblogin.js).

function fb_login(){
    FB.login(function(response) {

        if (response.authResponse) {
            console.log('Welcome!  Fetching your information.... ');
            access_token = response.authResponse.accessToken; //get access token
            user_id = response.authResponse.userID; //get FB UID

            FB.api('/me', function(response) {
                user_email = response.email; //get user email
            });

        } else {
            //user hit cancel button
            console.log('User cancelled login or did not fully authorize.');

        }
    }, {
        scope: 'publish_stream, email, user_birthday'
    });
}

(thanks to http://stackoverflow.com/questio... for inspiration)

Then we need to alter fbconnect login form in your theme's template.php (fbconnect module provides example):

/**
* Theme function for Facebook connect/login button.
*/
function THEMENAME_fbconnect_login_button($variables) {
  drupal_add_js(drupal_get_path('theme', 'YOURTHEMENAME') . '/js/fblogin.js', 'file');
  $op = $variables['op'];
  $user_profile = $variables['user_profile'];
  $text = $variables['text'];
  $attr = $variables['attr'];
  if ($op == 'login') {
    $title = t('Hello stranger');
    $desc = t('Login to this site using your Facebook credentials.');
    $link = l('<span class="fb_button_text">' . $text . '</span>', 'fbconnect/register/create', array('html' => TRUE, 'attributes' => array('class' => array('button button-blue fb_button fb_button_' . $attr['size']))));
    return '<h2>' . $title . '</h2>' . $desc . $link;
  }
  else {
    $attr['data-scope'] = "email";
    $button = '<fb:login-button ' . drupal_attributes($attr) . '>' . $text . '</fb:login-button>';
    return $button;
  }
}

Then you just have to style .button.button-blue with CSS to your liking. Say:

button,
a.button {
  color: #fff;
  padding: 5px 10px;
  white-space: nowrap;
  text-align: center;
  font: 300 16px Helvetica, sans-serif;
  float: left;
  border-radius: 3px;
}

button,
a.button:hover {
  text-decoration: none;
  cursor: pointer;
}

button,
.button-blue {
  background: -webkit-linear-gradient(top, #1574cc 0%, #1064af 100%) #1d7cdc;
  background: -moz-linear-gradient(top, #1574cc 0%, #1064af 100%) #1d7cdc;
  background: -ms-linear-gradient(top, #1574cc 0%, #1064af 100%) #1d7cdc;
  background: linear-gradient(to bottom, #1574cc 0%, #1064af 100%) #1d7cdc;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1574cc', endColorstr='#1064af');
  border: none;
  color: #fff;
}

button:hover,
.button-blue:hover {
  background: -webkit-linear-gradient(top, #1574cc 0%, #094f8e 100%) #1d7cdc;
  background: -moz-linear-gradient(top, #1574cc 0%, #094f8e 100%) #1d7cdc;
  background: -ms-linear-gradient(top, #1574cc 0%, #094f8e 100%) #1d7cdc;
  background: linear-gradient(to bottom, #1574cc 0%, #094f8e 100%) #1d7cdc;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1574cc', endColorstr='#094f8e');
  border: none;
  color: #fff;
}

That's it and hope it was helpful.