How to Add Social Login to WordPress Website

How to Add Social Login to WordPress Website

Hi guys today we are going to see how you can add social logins to your WordPress website Now let’s say you have a website And you have a login page like this Now instead of asking your visitors to enter their username and password every time What if you want to let them use their Google or Facebook account to login to your site So you can do that easily by reading this article So once you add these buttons to your website your visitors will be able to fastly login to your website using their social media accounts So let’s get started

We are going to add our social media buttons in just five steps. The first step is to install a plugin in WordPress So to install the plugin let’s go to our WordPress dashboard Now go to plugins And click add new Now search for a plugin called super socializer And you will get this plugin Now this is the plugin which is going to help us add social logins to our website So to install the plugin let’s click install And then click activate So now we have successfully installed the plugin

So once you install the plugin you can see that we have a new button called super socializer So now we can go to step two Which is to enable the social login feature on this plugin So to enable it, let’s go here And then click social login Now enable this option And as you can see We have got the list of social networks which we can add to our site So once you’re enabled the social login feature We can now go to step three Which is to choose the social network You want to add your site So first I’m going to enable the Google login feature So let’s select Google So once you have selected your social network We can now go to step four Which is to connect your website with Google So to connect it, we need to get these details from Google So to get these details, let’s open a new tab And then search for Google developers console

Now click the first link And then login to your Google account Now to get these details Just click create And enter any name here I’m going to enter social login And then click create Okay So now a new project has been created Now get our details let’s click here And then enter social login Now scroll down And enter your website address here Then click Save Now get the details click create credentials And then click here Now select web application And here you need to enter your website’s URL So let’s move to our website then copy this URL Now let’s return to the present tab then paste it here Now confirm you remove slash And then click create And as you can see we have got the details which we need So now all you have to do is just copy these details And then paste it on your website

So let’s click here to copy And then paste it here Next let’s copy this And paste it here Now scroll down And click save changes Okay so now we have successfullyconnected our website with Google So once you’re connected your website with Google We can now go to the final step Which is to choose where you wantyour social login buttons to appear So to choose the place where we want ourbuttons to appear Let’s click advanced configuration So these are the places where you candisplay your social login buttons Now as an example you have got an e-commerce website And you would like your social login buttons to look on a login page like this you need to enable this You need to enable this option Next if you want to add it to your checkout page Just enable this option Now let’s scroll down And click Save Changes Now as soon as you click Save Changes The Google login button will be successfully added to your website So now your customers can login to your site using the Google login So next let’s see how it works So now let’s go to our website So let’s imagine customer is visiting your website and buying a product Now if they click proceed to checkout You can see that we have now got theGoogle login on our checkout page So now if a customer wants to login to your website All they have to do is just click this Google icon And then sign in with your Google account So now we have successfully logged in to our website using the Google login

And then you can see the customers name and email address has been automatically entered from their Google account Now as soon as a customer logs in for the first time Their account will be created So if you go their inbox You can see that they have received a mail Which says their account has been created Okay so now let’s go back to our website So once a user has logged in They can now complete the purchase just by entering their address here And then place the order So now as you’ll see their order has been placed So now you recognize how your customer can use the social login feature for place an order Next let’s say the same customer wants to check their order status after some time So after placing an order all they have to do is just go to your site And then click my account And here you can see that we have again got the same Google login On our login page Now in order to login all they have to do is just click here And then select their Google account And now the customer has logged into you website And here they can see the orderwhich they have placed on your site Now if they go to addresses You can also see that their address hasbeen saved to their account So now you know how your customer can log into their account using their social login Now as an example after a couple of days an equivalent customer wants to shop for another product from your site so that they are going to your store And then buying another product And once they reach their checkout page Now if they login here with the same Google account You can see that your customer’s address has been automatically entered here Now to put the order all they need to try and do is click place order and therefore the order are going to be placed

So now we have successfully connected our website with Google Next if you see here your customers name appears on the menu When they have logged in to your site Now by default this name won’t appear here Instead it’ll show as my account like this So next let’s examine how you’ll be able to add your customer’s name on on the menu after they login to your website Now to display your customer’s name on the menu We are going to do two steps The first step is to install a plugin in WordPress So let’s go to our WordPress dashboard And then go to plugins And click add new Now search for user menu in this box And you will get this plugin Now let’s click install And then click activate So now we have successfully installedthe plugin on our website So once you’ve installed the plugin we can now go to step two Which is to add your customer’s name to your menu So to add the name let’s go to appearance click menus And here you can see all your menu items Now let’s open my account Now here enter the name you want to show Before a customer logs in So I’m gonna enter login here Now since we want login to appear only when customers are logged out Let’s click here And select logged out users Then click save menu Now if we go to our website And click refresh You can see that we have the login menu here Now if you login You can see that we don’t have any menu item here Now in order to display your customer’s name here After they login You need to create another menu item on your website

So to create another menu item Let’s go back to WordPress Now these are the pages which we have on our site And now you need to select the page Which needs to appear when the customer clicks on their name So as I want to show the my account page When the customer clicks on their name I’m going to select my account And click add to menu And now this new menu item will be added here And let’s click here to open the menu Now to display this menu item only when the customer is logged in Let’s click here And change it to logged in users Now this menu item will only be shown to logged in uses Now to show your customer’s nameinstead of my account Let’s delete this And now if you click here You can see that we now have the optionto display our customer’s name So let’s select first name And now your customer’s name will be displayed like this Now if you want to add any text before your customer’s name Like welcome or hello You can do that just by entering that text here So I’m gonna type hello Next we need to choose which users you want to show this menu item to So in WordPress users will have different roles So since we want to show this menu to customers Let’s select customer And in WordPress customers also be treated as subscribers So confirm you choose this feature too So now if you click save menu then move to our site and click refresh You can see that we know how the customers name on our menu This is how you can display your customers name on the menu Once they are logged in So now we have seen how you can add the Google login to your website And we have also seen how we can add the customers name to the menu So next let’s go to the final part of this artical Where we see how you can add another social network to your website So next we are going to add the Facebook login to our web site So once you do this step Facebook login will appear on your website along with the Google login And your customers will be able to login to your site using their Facebook account Now in order to add Facebook login You must have SSL on your site If you don’t have SSL you can watch this video to get it for free So to add Facebook login we are going to do three steps

The first step is to enable Facebook login So to enable it, let’s move to WordPress then move to super socializer and click on social login Now to enable Facebook login just select Facebook here And Facebook login are going to be enabled So now let’s attend step two Which is to attach your website with Facebook So to attach it Like we did before we’d like to induce these details from Facebook So to urge these details Let’s open a replacement tab then enter developers.facebook.com Now click login And login to your Facebook account Now to urge the small print , let’s click here and click on Next Now select other then click create first app Now here you’ll enter any name you would like I’m getting to enter my first app and click on create Now as we are adding Facebook login Let’s select this feature then select web here Now here you would like to enter your website’s URL So let’s attend our website then copy this link And paste it here confirm you remove this slash And now if we click Save Our details are going to be created So to check the details Let’s click settings then click basic Now as you’ll see we’ve got the small print which we would like So once you’ve got got these details All you’ve got to do is just copy these details then paste it on your website So let’s copy this then paste it here Next let’s copy this one And paste it So now we’ve entered our details for the Facebook login So now if you click Save Changes you’ll see that we’ve got a message Which says we’d like to feature this URL to our Facebook settings So let’s copy this URL Now click Facebook login here then click settings Now paste the URL in this box and click on Save Changes So now we’ve successfully connectedour website with Facebook So once you’ve connected your websitewith Facebook you’ll now attend the final step Which is to activate your Facebook login So to activate your Facebook login just enable this button Now as soon as you click this button you will get a message saying You need to provide your privacy policy link to activate your Facebook login

So next we’d like to feature our privacy policy page to Facebook So to feature it Let’s click here And now you would like to feature your privacy policy link during this box Now if you have already got a privacy policy page on your website you’ll add its link here But if you do not have it you’ll easily create a replacement page immediately So to make the privacy policy page Let’s attend our WordPress dashboard then attend settings and click on privacy Now to make the privacy page Click create new page then click publish And now we’ve got our privacy policy link here Now to activate your Facebook login all you’ve got to try to to is simply copy this link And paste it on Facebook So let’s click here to repeat this link Now let’s go here then paste it during this box Once you’ve got added the privacy policy link Next you would like to pick your website’s category So I’m getting to select shopping then click save changes Now to activate Facebook login Let’s enable this button Now if you click switch mode The Facebook login will now be added to your website So let’s examine how it works So let’s attend our checkout page and click on refresh you’ll see that we’ve now got theFacebook login button on our website So now let’s try logging in with ourFacebook account So let’s click here And login to our Facebook account And as you’ll see we’ve successfullylogged into our website using Facebook So that’s it guys this is often how you’ll add Facebook login to your WordPress site

So that’s it guys this is how we can add social logins to your WordPress website. I hope this article is helpful to you

Leave a Reply