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;
}
...