How to Add Social Login to WordPress for Higher User Engagement

The social login concept has become increasingly popular with the growing number of social media users. Social login makes the process of joining a website much easier than conventional methods. Hence, it has been a great technique to increase user engagement on WordPress websites as well.

If you own a WordPress website or planning to create one, a social login option can help convert more visitors into leads. There are several ways to add this to your website.

In this post, we'll demonstrate how to add social login to WordPress using the WP User Frontend plugin. Let's get started.

What Is Social Login and How It Works?

Social login is also known as social sign-in or social sign-on. It lets users register or sign in to a website without going through the steps of creating an account. Instead, they can instantly log in or sign up with a social account. It's a straightforward substitute for the convetional sign-up or sign-in process.

What is Social Login

Say you have a website where people must log in to access its resources. So, new users need to create an account, and returning users have to log back, right?

But you can help them skip this complexity by providing the social login option. They will get to choose one of their existing social accounts to connect with your site and an account will be created automatically.

This means they can use any account like Twitter, Facebook, LinkedIn, Gmail, etc., to enter your website without any delay.

Similarly, those who need to log back into your website, won't require any username or password if using social login. They can use the same social account they used the first time, and sign in every time with a single click.

Reasons to Add Social Login to a Website

The ever-increasing number of social media users has made social login a prevalent option for today's websites. Besides providing all the user benefits, it facilitates the admins as well. If you're still skeptical about adding it to your site, here are some stats that may help you decide:

1. Ease of Registration

At this point, you already know that social login offers a simplified and easy registration process. Users can log in or register more quickly with this. It creates a good first impression and a better user experience.

2. More Sign-up Opportunities

According to a research, 77% of users believe social login should be offered by any website. This clearly indicates – if your website doesn't offer it, a risk of losing a huge number of prospects is there.

3. Less Bounce Rate

A study shows, 92% would rather leave a website instead of resetting or recovering their login information if they’ve forgotten their passwords. With social login-enabled websites, customers no longer have to remember other account details.

4. Lower Chance of Fake Accounts

Many people create accounts using fake details either just because of laziness or to attack your website. But social logins can minimize this chance significantly. You get more accurate data and improve your target marketing. (However, social sites also have fake accounts and someone may use them to remain anonymous).

5. Decreased Cart Abandonments

Forced account creation is a key reason why people leave their carts without completing their shopping. It's evident, the checkout process should be as uninterrupted as possible. And a social sign-in option can help a lot in this regard.

How to Add Social Login to WordPress: Step-by-Step Guide

Adding Social Login to a WordPress Site

There are several ways to include social login functionality in a WordPress website. As we mentioned earlier, you can do it using WP User Frontend Pro plugin.

From guest posting, content and menu restriction, user profile, and directory website, to subscription management – WP User Frontend Pro comes with a wide range of features. So, if your website needs any such feature besides social login, you will get them all in this one single plugin.

WP User Frontend Pro offers 20+ modules. The Social Login & Registration module is one of them. It takes you three steps to enable this feature on your site.

  1. Activating a Module
  2. Enabling a Setting
  3. Authorizing the App (Created on a Social Platform)

Let's see how to complete these steps.

Step 1: Activate the Social Login & Registration Module

Navigate to WP Admin Dashboard > User Frontend > Modules. Find the Social Login & Registration module and turn on the toggle button on the top right corner.

Modules page - WP User Frontend Pro
Enabling the Social Login & Registration Module

Step 2: Enable the Social Login Setting

Now, navigate to WP Admin Dashboard → User Frontend→ Settings → Social Login and checkmark the box beside the Enable Social Login option.

Enable Social Login - WP User Frontend Settings page
Enabling the Setting

Step 3: Authorizing the Apps

You can see separate fields for Facebook, Twitter, Google, and LinkedIn App Settings in the WP User Frontend. You need to fill only those fields under a platform you want to provide to your users. Let's say you want to enable the Facebook Login option.

Then insert App ID and App Secret under the Facebook App Settings only. Keep the rest three blanks. Looking for a Twitter Login? Insert the Consumer Key and Consumer Secret under the Twitter App Settings.

No worries, we're going to show all the configurations one by one so that you can have a clearer idea. So now, we're breaking up 3rd Step into four different sections –

  1. Facebook Login
  2. Twitter Login
  3. Google Login
  4. LinkedIn Login

Jump to the ones you want to offer to your users. The basic procedure overall is the same. First, we need to create an app on those platforms. And then collect that App ID and the Secret Key to put into our WP User Frontend settings. Let's start with Facebook then.

(1) Configuring Facebook Login

So, you need the App ID and App Secret provided by Facebook. You can easily get it by clicking on the ‘Create an App‘ link indicated in the screenshot above or going directly to https://developers.facebook.com/apps/.

Get Started by creating or verifying your account (if not done already). From your Meta for Developers dashboard, click the ‘Create App' button.

Create App for Facebook Login - Meta for Developers Dashboard

Now, select the Consumer app type from the list. (All the options have got help texts under them so choosing the right one won't be a problem).

select the Consumer app type - Meta for Developers Dashboard

In the next step, Facebook will ask for some basic info like App Name, Contact Email, etc. Fill them up and press the Create App button.

Provide basic info - Meta for Developers Dashboard

On the next screen, you'll find the Facebook Login option. Select it and then you'll need to choose the platform type.

Select Facebook Login for Web

Since you're setting it up for a WordPress website, just choose the Web (with the www icon) option here. It will take you to Facebook's default Quickstart settings. You can skip that part since WP User Frontend will do the job for you. Instead, just go to Settings > Basic and you should find an App ID and an App Secret here.

App ID and App Secret in the Facebook Developers Dashboard

Yes, we've got what we need. Just have to copy these two items now and paste them into respective fields in the WP User Frontend settings page (shown in the image below).

Facebook App Settings in WP User Frontend Social Login Page
Facebook App Settings

Don't forget to click on Save Changes! And you're all set configuring the Facebook registration/login for your website.

(2) Configuring Twitter Login

You can configure the Twitter login for your website in a similar way. But if you're tired of looking at those screenshots, well, our media team has got you covered. Here's an explanatory video tutorial on how to configure the Twitter login for your WordPress site. So, check this out and you'll be able to include it on your site easily.

Configuring Twitter Social Login in WordPress with WP User Frontend

(3) Configuring Google Login

Want to integrate Google sign-in? Let's get back to the WP User Frontend dashboard then. To enable the Login with Google option, we need to get the Client ID and Client Secret, right? Click the link associated (Create an App) first. It will take you to the Google Cloud dashboard. Create a project from there.

Create a project for configuring Google social login option

Type your project name and other info, and hit the CREATE button. Then from the hamburger menu icon (on the top left corner), go to APIs & Services > OAuth consent screen.

go to APIs & Services > OAuth consent screen

Configure the OAuth (Open Authorization) consent screen which Google will display to the users while connecting their Google account with your site. You should give the details of your website and the policies in the following steps. Once you set this up, Google will show you a summary.

Configure the OAuth (Open Authorization) consent screen for Google login

Next up, the Credentials. You should see the menu on the left side. Enter there and click on CREATE CREDENTIALS > OAuth client ID (marked in the image serially).

CREATE CREDENTIALS > OAuth client ID

From the dropdown, select the Web application as your Application type. Set a name for it and scroll down all the way to hit the CREATE button.

From the dropdown, select your Application type as a Web application

A pop-up will appear with your Client ID and Client Secret. Copy them from here and paste them on the WP User Frontend settings page accordingly.

Google OAuth client created - Client ID, Client Secret

And this is it. We're good to go with Google Login for your website.

(4) Configuring LinkedIn Login

So again, we start from the WP User Frontend settings page. Click on the Create an App link from here, to land on LinkedIn Developers. Like all the other platforms, start with their Create App button.

Configuring LinkedIn Login

Insert all the information in the required fields. LinkedIn requires an App logo that will show up when users connect their LinkedIn account with your site. So, upload an image file (can be your website logo).

provide App name, logo, and other info for LinkedIn login

Once done, go to the Auth tab on your LinkedIn Developers dashboard and you'll find the Client ID and Client Secret there.

Client ID & Client Secret in the Auth tab - LinkedIn Developers dashboard

Just like every other time, paste them into the respective fields on the WP User Frontend settings page. And congratulations! You've successfully configured LinkedIn Login for your website now.

Wondering how the login buttons will appear on the front end? Here's a view of the login page with some social login options enabled (you can see the area marked in red).

After enabling (four platforms) social login to WordPress website
Frontend Appearance of a WordPress Site with Social Login Enabled

So, if you configured all four platforms we've just shown, you should see something like this on your website login page. Four options are available for users to log in or register to your site.

FAQ on How to Add Social Login to WordPress

Hope you are satisfied with the tutorial covered above. In this section, we'll answer to some additional questions that may poke your minds related to our today's topic – how to add social login to WordPress.

Can I enable multiple social platforms at once in WordPress?

Yes, with WP User Frontend Pro you can enable Twitter, Facebook, Google, LinkedIn, and Instagram on your WordPress site.

How many options should I provide for my customers?

There's no fixed rule for this, it's totally up to you. But try not to limit the options. Because everyone may not use the same platform. Or may not be comfortable connecting a specific social channel with your website. Try to understand your audience and provide options accordingly.

Is there any extra cost involved to enable this?

Not at all. If you're using any plan of WP User Frontend Pro, you get to enable this without any extra cost.

Closing Up on How to Add Social Login in WordPress

Social media login provides benefits for both you and your website visitors. Yes, there are some known disadvantages as the need to rely on third-party uptime, people may use false information on social media, etc. But we can say this is a nice-to-have feature for modern websites. And it can surely increase user interaction or engagement on your site.

Hope you've got the idea of whether social login is important for your website or not. Or are you using it already? Either way, share your opinion with us about it. It will help us as well as other readers to make more informed decisions on this topic.

Nayeem Shahriar
Written by

Nayeem Shahriar

Loves learning new things and ideas. Enjoys reading books or watching movies in free time. But ends up spending most of his time in games and sports.

Have something to say? Cancel Reply

Your email address will not be published.

Table of Contents