Social Login 2.3 Setup
This document provides instructions on how to setup the Social login extension so users can sign-up/login to your site via Social Accounts:
App creation and setup
For social login to work correctly you need to create an app on each social network so that your site can be linked to the app. We have created separate docs for each app setup:
Link apps to your site
Once you have created each app you will need to copy over the App ID/Key and the secret key and paste them into the social network tabs on the settings page.
The general settings tab for the social login extension allows you to:
- Turn on/off the social tab on the account page
- Show the social login buttons by default on the default register form
- Show the social login buttons by default on the default login form
Social Networks settings tab
Each social network has its own tab where you can activate/deactivate that particular network. It is on each of these tabs that you must add the API Keys for the social login to work.
Social login shortcodes
The social login extension allows you to place social login buttons anywhere on your site using shortcodes. You can create multiple social login shortcodes so you can have a different output on your site depending on where you want to add the buttons.
The general settings for each shortcode allows you to:
- Assign specific role to a user on registration via Social Login
- Show Social Buttons to logged-in users only
- Keep users logged in
- Choose integration type for the Social buttons: Login only, Register only or Both ( default ).
Creating a new social login shortcode
To create a social login shortcode click on social login in the Ultimate Member menu and click the add new button. On the new social login page you can decide which buttons to show and also apply some styling options which will alter how the buttons appear on your site. To output the buttons on your site all you need to do is copy the shortcode and add it to your site.
Social registration forms
When a user tries to register on your site using the social login buttons they will be taken to the social network site to accept the app permissions and if they accept they will be redirected back to your site where they will see an overlay that shows the social registration form (this form is automatically added to the forms list when you activate the plugin).
This form is required to collect the required user details (for example Twitter does not pass over a user’s email address) so the user can complete the 2-step registration process or automatically generate an email address in One-step process. Once a social network account is connected to a user on your site the user will be logged in straight away when they come back to your site (as long as they are logged in to the social network on that browser).
There are two ways to process data from Social Network Apps to register a user on your site.
One-Step Process ( since version 2.3 )
If you want to register a user automatically without showing the Register form fields on the overlay, you can choose this process. This allows users to register and then login automatically on succesful registration.
When one of the Social Networks does not pass a user's email address or Email Address has already been used in the site, there are 4 options to choose from in which you can use to continue the Registration process:
- Link Accounts & Login immediately
- Link Accounts & Redirect to Login Page
- Allow new account creation with a generated Email Address
- Do not link accounts & prevent from account creation
There's also an option where you can show a Splash Screen to display pre-loading content or Image loader on the overlay during the registration process. You can modify the content in the Social Register form using the UM Form Builder.
Two-Step Process ( since version 1.0 )
There are instances where you want to allow users to check the fields that will be submitted to your site on registration process - Two-Step process enables users to check the details and allowing them to edit in the form or add extra fields to fill out before submitting the Register form.
Sync Register form Fields from Social Network fields( since version 2.3 )
Social Login adds a field option in the form builder which syncronize the specific data coming from the Social Networks to populate the field value on Registration process. Please take note that not all Social Networks returns the same data e.g. Instagram doesn't pass an Email Address but Facebook returns it but with Email Permissions in the Facebook application.
The social login extension adds a new tab to the user account page called “social connect”. On this tab a user can connect/disconnect their social networks from their account.
Profile photo import
The social login extension will import a user’s profile photo from their social network profile as the profile photo on your site. The most recently connected social network will be the photo that is used (e.g if a user registers with Twitter it will show their Twitter profile photo but if on the account page they connect to Facebook then their Facebook profile photo will become the profile photo on your site).