Making a website /Blog perfect in all aspects is really important and crucial. In this article, we’ll show you “How to Add Social Logins to WordPress Website”. It’ll help your users to log in to your website /Blog from their social accounts.
Example: If a user wants to log in to your site and they have one option to logins. which is with E-mail. Mean, he has to enter their Name, Email, Password to login to your site. But, if you add social logins to your Blog.
It will make it easy for your user to log in to your site. Just they’ll click on the social button and they will be logged in without any hesitation. By adding this feature, your visitors will be able to quickly log in to your website. Ex:)
So, now you know what we’re gonna add to our website. We’ll do this in just 4 steps:)
- Install a Plugin in WordPress.
- Connect your website with Google.
- The appearance of Social Login Buttons.
- Connect your website with Facebook.
1. INSTALL A PLUGINS IN WORDPRESS TO ADD SOCIAL LOGINS TO WORDPRESS WEBSITE
In order to install a plugin in WordPress. We’ll go to our WordPress dashboard.
In the WordPress dashboard click on Plugins > Add New. It will take you to the plugins section of WordPress where you can install a new plugin.
So in the plugins section, search for a plugin called *Super Socializer*. Click on Install Now and after that click on *Activate* and this plugin will be activated on your site. This Plugin will help us Add Social Logins to WordPress Website.
2. CONNECT YOUR WEBSITE WITH GOOGLE
As soon as you activate this plugin you’ll find a new button in your WordPress. So, hover over there and click on *Social Login*.
Here, first, click on the top checkbox to enable Login. Then enable the Google option below. So, now we need to connect our website with Google. So, in order to connect our website with Google, we need two things. 1. Google Client ID – 2. Google Client Secret
To get these details open google chrome in your browser. Search *Google Developer Console* and click on this official link and it will take you to the next page. This is an official tool from Google that will help us get all those details to Add Social Logins to WordPress Website.
If you are not seeing this page make sure you log in to your Google ID and then try to reach this page and click on the *CREATE* button.
So, here enter any name as a project name. I have entered my blog name and click on the create button below. Your new project will be created.
Click on *OAuth consent screen* and enter the name which we entered earlier as a project name. So, I’ll enter *TechMoll* in the Application Name and scroll down.
After scrolling down enter your domain name in the first box, yousite.com. Note: Please don’t use HTTPS OR www just enter like mine, yoursite.com that’s it. and click *Save*
As soon as you click *Save* it will show this pop-up so click on *Create Credentials* and choose *OAuth Client ID* It will take you to the next page.
On this page select the Web Application at the top and enter your website’s URL below in the *Authorized redirect URLs* tab.
But, this time make sure you’ll enter the entire URL with HTTPS and www like I have entered “https://techmoll.com” Note: Make sure to remove the forward-slash after .com, That’s it. Click on *Create* And it will show you all those details which you need.
So, here you’ll see your credentials on your screen. So, copy the first one by clicking the button in front of it. And go back to the WordPress dashboard.
Paste that code here in the first box. And go back to that page
So, now copy the 2nd code and press *OK* on this pop-up below. And go back to the WordPress dashboard.
Paste that 2nd code here and click *Save Changes* Now our site has been successfully connected with Google.
3. THE APPEARANCE OF SOCIAL LOGIN BUTTONS
Now in this step, we’ll set a place for social buttons to appear.
Click on the *Advanced Configuration* button and it will show all the places where you can choose to appear your social login buttons. The necessary places are selected by default. So, choose the additional place if you want and click *Save Changes*.
So, now our users can log in to our site with their Google account. One social login has been successfully created.
4. CONNECT YOUR WEBSITE WITH FACEBOOK
Now we need to connect Facebook with our website So, the users will be able to log in to your site using their Facebook ID.
Hover over the Super Socializer button and click on the Social Login button. It will open up a previous window.
On this page select Facebook to enable Facebook Login, and it will be enabled. And now we need to connect our website with Facebook. So, in order to connect it, we need some details from Facebook.
So, to get those details, go to developers.facebook.com and click on Login. It will show a new pop-up.
Here you’ll log in with your Facebook account, which you wanna use with your website.
After logging with your Facebook account, click on *Get Started* button right at the top.
Here if you never use this developer account it will as you to create a new one here. So, click on the *Next button here to create it.
Here it is asking to describe a little bit so, we’ll select another. And go to the next step.
Here click on *Create First App* button to get those details.
So, here in the *Display Name* enter any name you want, as we did before connecting Google I entered my blog name you can enter your website/Blog name you want and it will detect your email and click on *Create App ID*
It will show this window So, we wanna add Facebook Login so, we’ll click on Sign up under the Facebook Login Box.
In this window just click on *Web* button. It will show another window.
So, in the box enter your website’s URL and click on the Save button below to save it. Make sure to enter a complete URL of your website with HTTPS and www.
As soon as you click the save button and your details will be created. So, to see those details click on the settings button and select Basic.
Here are the details which we want to enter on our website. So, copy the first value from *App ID* and go back to WordPress.
Paste that code here in the *Facebook App ID* Box. And go back to the other tab.
Here copy the second value from *App Secret* and go back to WordPress.
Paste the 2nd value here. Scroll down and click *Save Changes* It will show a link at the top of your screen. Which we need to paste in the facebook.
Copy this code and go back to *Facebook*
In this tab click on the *Facebook Login* and then choose *Settings* and paste that code here in the *Valid OAth Redirect URLs* and click *Save Changes* and your Facebook will be connected with your website.
But one thing else. First, you will need to enter the privacy policy link in Facebook to enable Facebook Login and as soon as you do it, add Social Logins to WordPress Website will be completed
In order to get privacy policy links to go back to WordPress.
In WordPress click on settings and press *Privacy*
On this page click on *CREATE NEW PAGE* to create a page of Privacy Policy. Your page will be created. Then publish it. And it will show the link of the page.
So, here you’ll see the link to your privacy policy page, copy it, and go back to Facebook.
Paste that page link here in the box under the Privacy Policy URL.
Select your website’s category here and click on save changes below.
After saving changes switch the top button to on. Now your Facebook login is activated on your website. If you go to your website and refresh. It will be enabled. So, I hope this will help you to Add Social Logins to WordPress Website.
OUR POPULAR GUIDES:)
