How to Add Social Login to WordPress Site

How to Add Social Login to WordPress Site: 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 quickly login to your site using their social media accounts. So let’s get started We are going to add our social media buttons in just five steps. 

Install Socializer Plugin

The first step is to install a plugin in WordPress. So we have to install the plugin on 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 that is going to help us to 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 socialized. 

Enable 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 that we can add to our site. So once you’re enabled the social login feature

Google Login Feature

We can now go to step three Which is to choose the social network. If you want to add your site, the first thing 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. 

Connect Website to Google

Now we have 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 log in to your Google account. Now to get these details Just click create, and enter any name, and 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 to let’s click here, and then enter social login. Now scroll down, and enter your website address here, and then click Save.

Now to get the details to click create credentials, and then click here. Now select web application, and here you need to enter your website’s URL. So let’s go to our website, and then copy this URL. Now let’s go back to this tab, and then paste it here. Now make sure you remove this slash and then click create. Now 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 successfully connected our website with Google. So once you’re connected your website with Google. We can now go to the final step. 

Social Login Button Placement

Now we have to choose where you want your social login buttons to appear. So to choose the place where we want our buttons to appear Let’s click advanced configuration. So these are the places where you can display your social login buttons. Now let’s say you have an e-commerce website, and you want your social login buttons to appear on a login page like 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 log in 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 the customer is visiting your website, and buying a product Now if they click to proceed to checkout, you can see that we have now got the Google login on our checkout page. So now if a customer wants to log in 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 as 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 to 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 can see their order has been placed. So now you know how your customer can use the social login feature to 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 to log in all they have to do is just click here, and then select their Google account, and now the customer has logged into your website, and here they can see the order which they have placed on your site.

Now if they go to addresses, you can also see that their address has been saved to their account. So now you know how your customer can log into their account using their social login. Now let’s say after a few days, the same customer wants to buy another product from your site. So 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 place the order all they have to do is click place order, and the order will be placed. So now we have successfully connected our website with Google. Next, if you see here your customer’s name appears on the menu when they have logged in to your site. Now by default, this name will not appear here. Instead, it will show as my account like this. So next let’s see how you can add your customer’s name 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 

Installing the User Menu Plugin

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 the 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 installed the plugin on our website. So once you’ve installed the plugin we can now go to step two. 

Step 1

In this step, we need 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 going to enter login here.

Now since we want the login to appear only when customers are logged out Let’s click here and select logged out users, then click the 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 log in you can see that we don’t have any menu item here. Now to display your customer’s name hereafter they log in, 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 that 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 my account page, When the customer clicks on their name I’m going to select my account, and click add to the 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 in this menu item will only be shown to logged in uses. Now to show your customer’s name instead of my account Let’s delete this, and now if you click here You can see that we now have the option to display our customer’s name. So let’s select the 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 going to 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 customers, and in WordPress, customers can also be treated as subscribers. So make sure you select this option too.

So now if you click save menu, and then go 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 customer’s 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 customer’s name to the menu. 

Step 2

So next let’s go to the final part of this tutorial, 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 websites. 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 to add Facebook login You must have SSL on your site If you don’t have SSL you can get it for free. So to add Facebook login we are going to do three steps. 

First Step

The first step is to enable Facebook login. So to enable it, let’s go to WordPress, and then go to super socializer, and click social login. Now to enable Facebook login just select Facebook here, and Facebook login will be enabled. 

Second Step

So now let’s go to step two, Which is to connect your website with Facebook. So to connect it Like we did before We need to get these details from Facebook So to get these details Let’s open a new tab, and then enter developers.facebook.com. Now click login, and log in to your Facebook account Now to get the details, let’s click here, and click Next.

Now select other, and then click create the first app Now here you can enter any name you want I’m going to enter my first app and click create. Now as we are adding Facebook login Let’s select this option, and then select web here. Now you need to enter your website’s URL So let’s go to our website, and then copy this link, and paste it here Make sure you remove this slash, and now if we click Save Our details will be created. So to see the details Let’s click settings, and then click basic.

Now as you can see we have got the details which we want. So once you have got these details, All you have to do is Just copy these details, and then paste it on your website. So let’s copy this, and then paste it here. Next let’s copy this one, and paste it. So now we have entered our details for the Facebook login. So now if you click Save Changes. You can see that we have got a message Which says We need to add this URL to our Facebook settings.

So let’s copy this URL Now click Facebook login here, and then click settings Now paste the URL in this box, and click Save Changes. So now we have successfully connected our website with Facebook. So once you’ve connected your website with Facebook, You can now go to the final step. 

Third Step

The final step 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’ll get a message saying You need to provide your privacy policy link to activate your Facebook login. So next we need to add our privacy policy page to Facebook. So to add it Let’s click here, and now you need to add your privacy policy link in this box Now if you already have a privacy policy page on your website You can add its link here, But if you don’t have it you can easily create a new page right now.

So to create the privacy policy page Let’s go to our WordPress dashboard, and then go to settings, and click privacy. Now to create the privacy page Click create a new page, and then click publish, and now we have got our privacy policy link here. 

Now to activate your Facebook login all you have to do is just copy this link and paste it on Facebook. So let’s click here to copy this link. Now let’s go here, and then paste it in this box. Once you have added the privacy policy link. Next, you need to select your website’s category. So I’m going to select shopping, and then click save changes. Now to activate Facebook login Let’s enable this button Now if you click to switch mode, the Facebook login will now be added to your website. So let’s see how it works.

So let’s go to our checkout page, and click refresh. You can see that we have now got the Facebook to log in button on our website. So now let’s try logging in with our Facebook account. So let’s click here, and log in to our Facebook account, and as you can see we have successfully logged into our website using Facebook. So that’s it guys this is how you can add Facebook login to your WordPress site. Now instead of having these buttons If you want to get more designs like this, You can get it by getting the premium version of the plugin. 

So that’s it guys this is how we can add social logins to your WordPress site. Now if you want to learn how to make an e-commerce website You can comment on this article or else you can contact us via email. I hope you would like this article.