Social Login 2.3 Setup

Overview

This document provides instructions on how to set up the Social login extension so users can sign-up/login to your site via Social Accounts and how to enable the error logs:

App creation and setup #

For social login to work correctly, you need to create an app on each social network so 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.

General settings #

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

Each social network has a setting that can activate/deactivate that particular network. Once the setting is turned on you'll see fields where you must add API Keys for the social login to work.

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 for a different output on your site depending on where you want to add the buttons.

The general settings for each shortcode allow you to:

  • Assign a specific role to a user on registration via Social Login
  • Show Social Buttons to logged-in users only
  • Keep users logged in
  • Choose the 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 apply some styling options that will alter how the buttons appear on your site. To output the buttons on your site, you must copy the shortcode and add it to your site.

Go to  wp-admin > Ultimate Member > Social Login>Edit or add social login shortcode.

wp-admin > Appearance > Widgets

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 needed to collect and add required user details (for example, X(formerly Twitter) does not pass over a user's email address) so the user can complete the registration process. Once a social network account is connected to a user on your site, the user will be logged in immediately when they come back to your site (as long as they are logged in to the social network on that browser).

The Social Registration form is automatically added to the forms list when you activate the plugin. You can edit this form on wp-admin > Ultimate Member > Forms.

There are two ways to process data from Social Network Apps to register a user on your site: one-step process or two-step process.

Two-step process
One-step process

Two-Step Process

There are instances where users can check the fields that will be submitted to your site during the registration process - The two-Step process enables users to check the details and allows them to edit the form or add extra fields to fill out before submitting the Social Registration form.

One-Step Process

You can choose this process if you want to register a user automatically without showing the Social Registration form fields on the overlay. This allows users to register and then login automatically on successful registration.

When one of the Social Networks does not pass a user's email address or Email Address has already been used on the site, there are 4 options to choose from 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 account creation

There's also an option to show a Splash Screen to display pre-loading content or Image loader on the overlay during the registration process.

Profile data import #

Sync Register form Fields from Social Network fields ( since version 2.3 )

Social Login adds a field option in the form builder that synchronizes the specific data from the Social Networks to populate the field value on the Registration process. Please note that not all Social Networks return the same data e.g. Instagram doesn't pass an Email Address, but Facebook returns it with Email Permissions in the Facebook application.

Please see the List of Sync Field options and Sync Field with extended options.

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 used (e.g., if a user registers with X, it will show their X 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).

Account page #

The social login extension adds a new tab to the user account page called "social connect." Users can connect/disconnect their social networks from their accounts on this tab.

Error Debugging #

This option allows developers to see any errors when testing the social authorization. To enable this option go to wp-admin > UM > Settings > Extensions > Social Login and see "Enable Debug Logging"

Click on the check box to enable it, then click on the highlighted link to view the error logs.