Skip to content

Main Navigation

  • Home
  • Blog
  • Hosting
  • Woocommerce
  • Coupons
  • Themes Directory
  • Plugins Directory
  • Promote

WPLift / WordPress Plugins / Login / WordPress Social Login: How to Set Up Facebook and Google Login

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

Published on January 28th, 2020

Last Updated on January 28th, 2020

Tags: Social, Social Login

TABLE OF CONTENTS

  • Which Networks to Use for WordPress Social Login?
  • How to Set Up WordPress Social Login
  • How to Set Up Facebook Login on WordPress
    • 1. Create a Facebook App
    • 2. Add App ID to Plugin’s Settings
  • How to Set Up Google Login on WordPress
    • 1. Create a Google App
    • 2. Add Client ID and Client Secret to Plugin
  • Any Questions on How to Set Up WordPress Social Login?
Share This Article
TwitterFacebookLinkedIn

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:

  • Facebook
  • Google

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.

Article Continues Below

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:

  • Facebook
  • Google

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:

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:

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:

Article Continues Below

Divi Developers Coupon

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.

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.

Article Continues Below

metorik woocommerce reports

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:

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:

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

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

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:

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

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:

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:

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:

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

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:

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:

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

Then, you can Enable Google social login:

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!

WordPress Social Login: How to Set Up Facebook and Google Login
WordPress Social Login: How to Set Up Facebook and Google Login
Colin Newcomer
Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.

Related Articles

Drive Traffic to Older Blog Content for Free with the Revive Old Post Plugin

Placid Review: Automatically Generate WordPress and Social Media Images

30 WordPress People to follow on Twitter

Hottest WordPress Coupons

SiteGround Coupon

70% OFF

Elegant Themes Coupon

20% OFF

CSSIgniter Coupon

30% OFF

Toolset Coupon

20% OFF

5 thoughts on “WordPress Social Login: How to Set Up Facebook and Google Login”

  1. Charlsail says:
    July 28, 2013 at 5:18 pm

    Hi Sourav,

    I have installed this plugin and it works perfectly from the wp-admin path but not anywhere in the website

    Please give me a suggestion

    1. Sourav Sourav says:
      October 13, 2013 at 7:06 am

      Hi Charsail,
      Make sure you’ve activated and setup the plugin as shown in the tutorial. You should be not logged in to your WordPress site when you want to test the plugin.
      So sign out of your WP dashboard, and enter the URL:
      yousite.com/wp-login.php

      That should do the trick!

  2. Facebook Page says:
    September 29, 2013 at 12:51 pm

    Excellent things entirely, you just acquired a new company logo fresh audience. What might an individual advocate with regards to your post that you designed at times before? Any certain?

  3. Freak show концертные агентства москвы says:
    October 2, 2013 at 7:33 pm

    звезди естради

  4. Jo-Anne says:
    April 2, 2014 at 10:54 am

    Sourav,

    great post. Could you advise further on how I can add the AddThis SSI code:

    to enable a user to register on my site?

    I was thinking of creating a registration page, and from what I’ve read I thought that would perhaps capture the user details of who has registered via social media and feed it to my AddThis account. Have I understood this correctly?

    BTW, I am not a wordpress coder, and am learning as I go, being an ex-cobal programmer, many, many, years ago.

Comments are closed.

Subscribe and join over 34.868 WordPress fans.

loader

Once a week you’ll receive the freshest news, tutorials and resources
from the WordPress space.

wplift.com

Terms & Conditions | Cookie Policy | Privacy Policy | Contact | About

WORDPRESS TIPS & TUTORIALS

Blogging | Business | Design | Marketing | Resources | SEO Tips | Speed Optimization | Technical

WORDPRESS THEMES

Premium Themes | Free WordPress Themes | Theme Reviews | Theme Directory

WORDPRESS PLUGINS

Admin | Analytics | Backup | Blog | Booking | Business | Cache | Customer Service | Ecommerce | Email Marketing | Event | Form | Forum | Image | Login | Map | Marketing | Membership | Menu | Monetize | Page builder | Search | SEO | Social | Table | Translation | Video

WORDPRESS NEWS ARCHIVES

  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2019
  • 2020
  • 2021
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OK