How To Add a Social Login To WordPress (The Easy Way!)

In this video, we’ll show you how to add social login to your WordPress site.

We’ll show you how to set up social login with Google and Facebook using the Nextend Social Login plugin. We’ll walk you through the process step-by-step, so you can get social login up and running on your WordPress site in no time!

Find out more about the plugin here

Here is a link to the article

— Chapters —

00:00 Introduction
00:33 Installing the Nextend Social Login Plugin
01:10 Overview of the Nextend Social Login Plugin
01:39 Adding the Facebook Social Login
09:03 Adding the Google Social Login

–Top Resources–

⚡Use Promo Code WPBVIP⚡

►Best WordPress Contact Form Plugin
►Best WordPress Analytics Plugin
►Best Lead Generation Plugin
►Best WordPress SEO Plugin
►Best Theme Builder for WordPress

–Related Videos–
►WordPress Tutorial – How to Make a WordPress Website for Beginners
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor
►What is SEO and How Does it Work?
►How to Install a WordPress Theme

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Follow us on Twitter:

Check out our website for more WordPress Tutorials

#WPBeginner #WordPress #WordPressTutorial

Hey what’s up everyone in this video We’re going to look at how we can add a Social login to a WordPress site so if You run an online store a membership Site or something similar where people Sign up and log into your site this Video is for you let’s take a look at What social login looks like on a Website so this is the WordPress login Screen and as you can see there’s two Additional buttons on the screen Underneath the login button where you Can continue the login process with Facebook and with Google as well so this Is what we’re going to be creating in This video so now we’re going to go Through installing and setting up the Social login feature with Facebook and Google let’s do it so the first thing we Want to do is log into our WordPress Dashboard and install the next end Social plugin so to do that all we need To do is head over to plugins here on The left hand side hover over that and Click on add new Once the page loadses Come up to the search bar up at the top Right and type in next end hit enter now This is the plugin that we want to Install right here so we’re just going To click the install now button and once That’s installed we’ll click that button Again to activate the plugin Now we consider the plugins installed Right here we’re just going to go to the

Settings which can be accessed from this Little link here or you can go to Settings hover over that and then click On next 10 social login now this is the First screen you’re going to see and you Can see all the providers that you can Connect to to provide a social logging Feature on your login screen so there’s Lots of different providers available But the ones that we’re going to be Looking at for this video are Facebook And Google before you start this setup You will need to create an account with Any of these providers to be able to Connect next end social login and your Website to that provider so once you’ve Got Facebook or Google account or any of The others setup you can then start the Process so we’re going to start with Facebook first so we’re going to click The getting started button right here And on the getting started screen you Get a lot of information and a complete Rundown of all the steps that you’re Going to go through when you connect Facebook to your website so this may Seem a little technical to some people But actually if you follow the steps in This video and I’ll also drop a link in The description to the article on the Wpbeginner website as well which gives You lots of information about each step In this process but follow along in this Video and we’ll go through it step by

Step and break everything down so it’s Nice and easy and it is fairly Straightforward once you get going so The first thing we’re going to do is There’s a nice little link here to the Facebook developers website so you can Click that link and I’ll open a new tab Now I’m currently logged into Facebook But if you weren’t logged into Facebook It’ll ask you to log into Facebook first And then it’ll bring you to this page so As you can see I’ve got no apps Currently created in this space so I’m Just going to click the green create app Button up here and the first step is to Select the type of act we want to create So for our purpose we’re going to choose The consumer app type and then click Next so on this screen here we’re going To provide some basic information for The app so we’re going to choose the Display name so for me I’m just going to Choose my website as the display name Next up you can drop in contact email Address at the moment is set to the Default email address connected with Your Facebook account but you might want To change that to a business email Address and then the next step here is An optional step if you want to choose That you can do that then we can hit the Green button over here to create the app It’s going to ask you to enter your Password for your Facebook account so on

This screen here it’s asking us to add Products to our app and the one we want To choose is the Facebook login one Right here so we’re just going to click Setup right there and out of all these Options the one that we want to choose Is the web option right here and once You’ve chosen that option it’s going to Ask you to fill out these options I’m Just going to add the URL of your Website in here and what you can do is If you can go back to your WordPress Dashboard which I’ve got in open another Tab it’s going to give us the exact URL In the steps here so I’m just going to Copy that then head back over to Facebook and paste it back in there Click save we’ll save those changes And then click continue So you can click next on this step also You can click next on this step too and On this step so the next thing we want To do from here is head over to the Sidebar over here on the left and Underneath the product section and the Facebook login section just click on Settings and when you’re on this page What you want to do is you want to add In the valid or three direct URI which Is available back over on your dashboard For your website so if you head back Over there and under step 12 right here Just copy that And then head back over to Facebook and

Paste that in there So all you need to do is click save Changes let’s save those changes our Next step is to head over to settings Here and click on that and then click on Basic now on this page right here it’s Very important that you fill out all These details correctly take your time To understand what each section is Asking you so the first thing to fill in Here is the app domains so we just need To copy add domain name again and paste It in here and under 0.15 here It’s just asking for this domain head Back to Facebook and paste that in there Double check the contact email address Right here it’s just to make sure that’s Correct And then add in your privacy policy URL So for this app to work correctly Facebook requires you to have a privacy Policy and a terms of service created on Your website now it’s super easy to do That in WordPress I’m going to drop a Link in the description below to a video Where we cover adding a privacy policy To your website I’ve done it from my Site already so I’m just going to add Those in here my privacy policy and my Terms of service are actually on the Same page so I’m just going to add those In there Also my user data deletion instructions Are actually on the privacy policy page

As well so I’m just going to add that in As well So next we’re going to choose our Category so choose whatever is relevant To you I’m just going to choose business And pages You can also choose to add an app icon If you want so if you’ve got a image That’s 1024 pixels by 1024 pixels then you can Add that in there if we come down Choose to fill in these details if you Want to and then just make sure the site URL is correct at the bottom here as Well and then click on Save changes So currently our app is in development Mode and to switch that to live mode all You do is come up here and click on this Button right here So now our app is in live mode there’s Only a couple of extra things we need to Do so if we come to the Facebook login Section here and click on settings you May have noticed there’s a little Warning at the top here to let us know That we only have standard access on a Couple of things so we’re going to Change that now by clicking get Advanced Access So once we’re on the permissions and Features section there’s two things we Want to get Advanced access on that’s The email section right here and the Public profile which is further on down

This list so we’re going to click on get Advanced access button right here for The email section that gives us this Little pop-up which is asking us that we Agree to the data permissions that are Laid out by Facebook we just gotta click On the little check box here to agree to That and then click on confirm Enter your Facebook password in when you See this pop-up Let’s click submit So once that’s a granted access you’ll See this screen you just need to close That this will pop up right there as you Can see the email has got Advanced Access now now it’s down to the public Profile section Public profile section is right here I’m Just going to go through the same Process of getting the advanced access Click the button right there then Confirm you’re happy with the details Laid out here click the blue confirm Button Enter your Facebook password again on This little pop-up And then click submit And once that’s confirmed you’ll see the Screen again just close this pop-up and As you can see we’ve got both email and Our public profile with Advanced access Once that’s all fully set up then head Over to settings here click on that and Then click on basic and at the top here

You’ve got your app ID and your app Secret so you need to copy them over Into next end on your website so I’m Just going to copy the app ID first then Head over to WordPress dashboard head to Settings Paste your app ID in there Then head back to Facebook Copy your app secret you may need to Click the shoe button to see the full App secret then head back to your WordPress dashboard and paste that in Right here once you’ve added those two In there just click the save changes Button now it’s going to ask you to Verify the configuration so all you need To do is click the verify settings Let’s open this pop-up right here and This is just letting you know that this Is the app that’s requesting access and This and all you need to do is Click Continue with your Facebook profile once That’s verified all you need to do is Click enable And that is the Facebook login button on The login screen setup and we should be Able to see that if we head to our login Screen so I’ve just opened up the login Screen in a incognito window and as you Can see there’s the Facebook button Right there where people can continue Logging in with Facebook so now let’s Take a look at setting up the Google Social login as well

So from here just heads back to Providers now we’re going to configure The Google one so we’re going to click The getting started button and again It’s a very similar process we’re going To follow each one of these steps and go Through it step by step so our first Step is to navigate to the Google Developers console so we’re going to Click on this link right here and it’s Going to open a new tab now your screen Might look a little different to this Because I’ve actually created something In this section before so you might have A create project button or something Like that that you see if you haven’t Worked on the Google Cloud before so for Me all I need to do is come up here and Then click on this drop down that allows Me to come to this section and then Click on new project so on this screen All we need to do is give the project a Name I’m just going to put my demo site And leave the organization and the Location exactly how they are and just Click on the blue create button now once I’m on this screen I can see that I’m Not on the project that I’ve just set up So I’m just going to click this drop Down and click on that project now I’m On that project I can come to the oauth Consent screen we’re just going to set That up So the first thing we’re going to do is

Choose the user type for this app so I’m Going to choose an external user type And then click create and just like the Facebook app we’re just going to give This app a name so I’m just going to Call my website name next we’re going to Choose an email address where people can Contact us for support and any questions That they might have Then you can add an app logo in here and It just gives you an information that it Can be 120 by 120 pixels so if you’ve Got a logo that you want to use for this App you can put that in there I’m just Going to leave it as it is We come down slightly And just like Facebook I recommend Filling these out so users can see this Information I’m just going to add in my Information now You’ve done that you’re going to add Your author authorized domains and you Can find that information if you head Over to the WordPress dashboard and then Go through your step-by-steps you’ll see That the domain that you need to put in Is here under Section 10 so you can copy That and add that in and then add in an Email address right here and once you’ve Added that in Just click save and Continue and then on this page you can Just Press save and continue as well and then On this page just click save and

Continue once you see this screen right Here you know that you’ve finished Setting this up so you can come over Here to credentials click on that and Then we’re going to add some credentials So we’re going to create some Credentials we’re going to click on this What we want to create is the oauth Client ID I’m going to choose the Application type right here We’re going to choose a web application So I’m just giving this a name I’m just Going to call it demo site we don’t need To fill this section in but underneath The authorized redirect URL we’re going To add a URI and to find out that Information just head back to WordPress Dashboard Scroll down a bit then the section 17 Right here just copy this and then head Back to Google And paste that in there and once you’ve Added that in Just click the blue create Button that then gives you a pop-up with The information that you need to set This up so you’re going to copy your Client ID head back to WordPress Scroll up you can come to settings add Your client ID right in here go back to Google copy your client secret head back To WordPress and then paste that right In there leave that as it is and then Click on Save changes as with Facebook It just wants to verify the settings so

You’re just going to click on that sign In with the Google account And it’s letting you know that works Fine so you can enable that and that’s Now enabled one little last step just on The Google side of things is our apps Currently in testing mode so we need to Set that into live mode and to do that Which is going to come away from that Pop-up head to the oauth consent screen And under the testing section right here Just click publish app it’s going to ask Us if we want to push it to production Confirm and now you’ll see that that is In production And now on our login page we can see We’ve got both the Facebook and Google Buttons there so people can sign in to The website using Facebook and Google so That’s how we add a social login to our WordPress site it’s a really cool Feature and I’m sure it’s going to make It much easier for your site visitors to Register and log into your website if This video helped you out then let us Know in the comments below and be sure To hit the Subscribe button to see more Awesome videos that help you out with Your WordPress site thanks for watching

You might like