Drupal 8/9 Social Auth Buttons

Finally an easy way to render Social Auth links/buttons.

Simply download and enable Social Auth Buttons and the buttons will be rendered in Drupal's default login form.

You can even embed and render it to your custom forms like this:
 

$form['social_auto_buttons'] = [
  '#type' => 'social_auth_buttons',
  '#title' => t('Social Auth Buttons'),
];

 

Theming

The form elements that came with this module are fully themeable.

Below is a sample to add icons to the buttons using Font Awesome icons

Make sure you have Font Awesome libraries loaded in to your theme.

[theme].libraries.yml

...
fontawesome:
  version: VERSION
  js:
    node_modules/@fortawesome/fontawesome-free/js/all.min.js: {}
  css:
    component:
      node_modules/@fortawesome/fontawesome-free/css/all.min.css: {}
...

Theme the buttons using hook_preprocess_social_auth_buttons_link()

[theme].theme
 

...
/**
 * Implements hook_preprocess_HOOK().
 */
function [theme]_preprocess_social_auth_buttons_link(&$variables) {
  /* Your code here */
  $icons = [
    'facebook' => 'fab fa-facebook-f',
    'google' => 'fab fa-google',
    'instagram' => 'fab fa-instagram',
  ];

  $id = $variables['name'];
  if (isset($icons[$id])) {
    $variables['icon'] = [
      '#markup' => '<i class="' . $icons[$id] . '"></i>',
    ];
  }
  $variables['attributes']['class'][] = 'btn-' . $id;
}
...

 

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.