Hosting Tutorial & Guide

How to Add Social Logins to a WordPress Site

updated on Sep 06, 2016
How to Add Social Logins to a WordPress Site Nowadays, most people have at least one social media account on those popular social networks with millions of users, such as Twitter, Facebook, Google+, LinkedIn and Pinterest.

There are multiple ways to take advantage of the popularity of social networks in order to make your WordPress site a better place to stay. And one of the easy ways is to add social logins to WordPress, so that your users can sign into your website to leave a comment or do other things without registering a new account.

With the social login capability, your users can always log into your website successfully as long as they can remember the login credentials of any of the social networks your WordPress site supports. This guarantees a better user experience and higher user engagement.

In below, we will show you how to add social logins to a WordPress site in detail. The plugin we choose is WordPress Social Login, a popular and easy-to-use solution. Of course, you can also use other plugins.

Configure the Social Networks You Want to Use

WordPress Social Login comes with several settings which enable you to customize the social icons and offer other features. After installing the plugin, you can access all the settings in Settings > WP Social Login.

Among the settings, you should firstly deal with the social networks and set up the ones that you want to offer on your website. By default, Facebook, Google and Twitter are enabled, but you still have to enter the needed application ID and application secret in order to make the social login buttons work.

Social Network Configuration

Fortunately, the plugin provides detailed tutorials to help you get the required information. If you don't know how to do, you can click on the tutorial links next to the blank fields, and this will show the steps.

Prepared Tutorial

Let's make an example. If you want to provide Twitter as a login option, you have to visit the apps section of the developer site when following the tutorial offered by WordPress Social Login.

After landing on the site, you will be asked to create a new app. Just click on the creation button.

Create New App

On the next page, you have to enter the application details including the name, description, your website address, and the callback URL. You can get the callback URL in the tutorial of WordPress Social Login.

Fill in Application Details

After completing the information, make sure to agree to Twitter developer agreement, and then click on the "create application" button.

Create Application

If you have done everything right, you will now be able to see the new application's credentials. Clicking on the "Keys and Access Tokens" tab, you can find the Consumer Key and Consumer Secret.

Get Application Keys

Then you should copy the credentials to the corresponding places in the plugin's settings.

Configure Twitter

By following the tutorials presented on the settings page, you can get Facebook and Google configured properly, too. After saving the settings, you will see the social icons on your login page.

Log in with Social Media Account

Users clicking on the icons will get an option to link their social media accounts to your WordPress site. Alternatively, they can also choose to create a new account on your site.

Link Social Media Account

Besides, as WordPress Social Login supports dozens of other social networks, you can enable the ones you want by clicking on the corresponding icons and entering the required application keys.

Configure More Social Networks

Configure the Social Login Widget

With the steps above, social icons are added to the login page of your WordPress site by default. However, the plugin also offers a widget which adds the social icons to the comment form and register form. If you want to use the widget, you need to open the "Widget" tab.

Under the tab, there are some basic settings of the widget which enable you to customize the caption text, select the social icon set, and choose how user avatars are displayed.

Widget Basic Settings

Besides, there are some advanced settings with which you can set up the fallback redirect URL, customize the authentication display, choose where the widget is displayed, and enable email notifications for new user logins.

Widget Advanced Settings

You can set up the widget to be displayed in all the comment area, login form and register form, or place the widget anywhere you want by using a shortcode. The freedom is yours.

Use Shortcode

Configure the Bouncer

Under the "Bouncer" tab on the settings page, you will see a lot of additional options you can use to control the plugin and the social logins. Below are some of the options that you should configure.
  • WSL Widget – Choose whether to accept new registrations and allow authentication.
  • Accounts Linking – Choose to display the "linking to social media account" option or not.
  • Profile Completion – Require users to provide their emails and allow them to change their username on your WordPress site.
  • User Modification – Require email confirmation for new users, or enable admin modification.
  • Membership Role – Choose the default user role for those users registering to your website with their social media accounts.
Now you have set up the WordPress Social Login plugin completely.

Configure the Bouncer