WordPress Social Login: How to Set Up Facebook and Google Login

WordPress Social Login: How to Set Up Facebook and Google Login

Looking to set up a WordPress social login? In general, people dislike having to set up and remember new account credentials and using social login on your WordPress site gives your users an option to avoid that by logging in with their favorite social network.

In this post, you’re going to find detailed tutorials for how to set up WordPress social login for the two most popular providers:

I’ll cover every single step, along with plenty of screenshots to guide you.

Let’s dig in…

Which Networks to Use for WordPress Social Login?

The networks that you choose should be up to you, but the data says that Facebook and Twitter are by far the two most preferred methods by users, which is why I’ve chosen to feature those two in this tutorial.

According to this Statista page with data from LoginRadius, here are the social networks most people use for social login:

  • Facebook – 53.1%
  • Google – 44.8%
  • Twitter 1.01%
  • LinkedIn – 0.56%

So as you can see – it’s really just a two-horse race between Facebook and Google.

While I’ll focus on Facebook and Twitter, the plugin that I’ll use can also help you with other social networks, including Twitter.

How to Set Up WordPress Social Login

To set up social login on your WordPress site, I recommend the free Nextend Social Login plugin at WordPress.org. This plugin is active on 200,000+ sites while maintaining a stellar 4.8-star rating. I’ve also personally reviewed Nextend Social Login in the past and found it to be a great tool.

To get started, install and activate the free Nextend Social Login plugin from WordPress.org. Then, click below to jump straight to the tutorial for your preferred social login method:

How to Set Up Facebook Login on WordPress

To set up WordPress Facebook social login, go to Settings → Nextend Social Login and click the Getting Started button under Facebook:

WordPress Social Login: How to Set Up Facebook and Google Login 1

1. Create a Facebook App

In order to activate Facebook social login, you’ll need to create your own Facebook app.

To do this, go to the Facebook Developers apps page and click the button to Add a New App:

WordPress Social Login: How to Set Up Facebook and Google Login 2

In the popup, enter a Display Name and Contact Email. The Display Name will appear when users give consent to use Facebook to login, so make sure it looks professional. You can just use the name of your website or brand:

wordpress social login fb new app id

Then, click Create App ID.

Now, you should be in your app’s settings. Find the option for Facebook Login and click Set Up:

WordPress Social Login: How to Set Up Facebook and Google Login 3

On the next screen, select the Web option:

wordpress social login fb www option

Next, enter the URL of your website and click Save. Then, click Continue.

WordPress Social Login: How to Set Up Facebook and Google Login 4

It will then give you some additional options – don’t worry about these because the plugin will handle them for you. Just click next to go through everything.

Now, just two more things to do.

First, go to Facebook Login → Settings and add your site’s OAuth URL to the Valid OAuth Redirect URLs box. To get your URL, just append “/wp-login.php?loginSocial=facebook” after your site’s URL. For example, https://yoursite.com/wp-login.php?loginSocial=facebook”

wordpress social login facebook app

Then, go to Settings → Basic in your app dashboard and add your website’s URL in the App Domains section.

Once you save your changes, click the button to show your App Secret. You’ll need both your App ID and App Secret for the next step so keep this page handy:

WordPress Social Login: How to Set Up Facebook and Google Login 5

And that’s it for the setup in Facebook!

2. Add App ID to Plugin’s Settings

Once you’re finished setting up your Facebook app, go back to your WordPress dashboard and click the I am done setting up my Facebook App button:

WordPress Social Login: How to Set Up Facebook and Google Login 6

Then, enter your App ID and App Secret in the boxes and click Save Changes:

WordPress Social Login: How to Set Up Facebook and Google Login 7

You’ll then see a prompt to verify your settings – go ahead and click the Verify Settings button:

WordPress Social Login: How to Set Up Facebook and Google Login 8

If all goes well, you should see the Facebook login prompt in a popup. Go ahead and log in to verify that things are working:

WordPress Social Login: How to Set Up Facebook and Google Login 9

And once you login, you can click the button to Enable Facebook social login on WordPress:

WordPress Social Login: How to Set Up Facebook and Google Login 10

Now, you should see a Continue with Facebook option on the native WordPress login page:

Facebook WordPress social login

You’re done – congrats! If you want to customize things, you can also check out some of the other settings in Nextend Social Login. For example, you can change the Facebook login button text if desired.

How to Set Up Google Login on WordPress

To set up Google social login on WordPress, go to Settings → Nextend Social Login and click the Getting Started button under Google:

Activate Google Social login

1. Create a Google App

To enable Google login on WordPress, you first need to set up a Google app.

To do this, go to the Google API Console and create a new project if you don’t already have one:

WordPress Social Login: How to Set Up Facebook and Google Login 11

You should now be in your project dashboard. First, click the OAuth consent screen option in the sidebar and add your site’s domain name to the Authorized domains section. You should also fill out the basic contact information:

WordPress Social Login: How to Set Up Facebook and Google Login 12

Once you save your changes, Google will take you to the Credentials area.

Click Create credentials to open the drop-down and then select OAuth client ID:

WordPress Social Login: How to Set Up Facebook and Google Login 13

Select Web application under Application type and:

  • Give it a name.
  • Enter your redirect URL in the Authorized redirect URIs box. You can get your URL by appending /wp-login.php?loginSocial=google to the end of your domain name. For example, https://yoursite.com//wp-login.php?loginSocial=google.
  • Click Create

WordPress Social Login: How to Set Up Facebook and Google Login 14

Google will then display your Client ID and Client Secret in a popup. Leave this screen open because you’ll need it in the next step:

wordpress social login oauth

2. Add Client ID and Client Secret to Plugin

Once you’re finished setting up your Google app, go back to your WordPress dashboard and click the I am done setting up my Google App button:

WordPress Social Login: How to Set Up Facebook and Google Login 15

Then, add your Client ID and Client Secret from the previous step and click Save Changes:

wordpress social login nextend

The plugin will then prompt you to verify your app. To do that, click Verify Settings:

WordPress Social Login: How to Set Up Facebook and Google Login 16

If all goes well, you should see the normal Google authorization popup. Go ahead and log in with Google:

WordPress Social Login: How to Set Up Facebook and Google Login 17

Then, you can Enable Google social login:

WordPress Social Login: How to Set Up Facebook and Google Login 18

And now, you should see Google as a social login on the native WordPress login form:

wordpress social login google

As with Facebook, you can customize the text of the Google social login button from the plugin’s settings.

Any Questions on How to Set Up WordPress Social Login?

That wraps up our guide on how to set up WordPress social login for the two most popular providers – Facebook and Google.

As you can see, the most complicated part is setting up the app at the social network you want to use. Once you get that out of the way, the actual social login itself is pretty easy to set up.

Any questions about WordPress social login? Let us know in the comments!

Keep reading the article at Learn WordPress with WPLift. The article was originally written by Colin Newcomer on 2020-01-28 03:31:55.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

Your email address will not be published. Required fields are marked *

Show Your ❤️ Love! Like Us
Scroll to Top