How to Add Social Login to Your WordPress Business Directory Website
A quick guide on adding Google & Facebook login buttons to HivePress-built websites.
September 1, 2021By Serhii Andrushchenko
Forward-looking businesses are always searching for ways to increase conversion rates, so they care about the user experience on their website. That’s why many companies are using social login, also known as a social sign-on feature, on their websites.
For website visitors, social login means that they can skip the registration procedures required to create a new account and can simply sign in with one click. It’s a truly convenient alternative to the traditional registration forms that improve UX.
At the same time, for website owners, social login is a useful feature that can help simplify user verification while also providing more reliable access to user data for personalization.
In this short tutorial, we’ll show you how to set up the HivePress Social Login extension so you can allow your website visitors to sign in via Facebook and Google. We’ll explain step-by-step how to get Facebook App ID and Google Client ID and correctly integrate them with your website.
Before we begin, it’s important to note that the Social Login extension is based on HivePress, a free WordPress directory plugin, and can be used only on HivePress-powered websites. So in this walkthrough, we’re going to use the HivePress plugin along with its default WordPress directory theme, ListingHive.
Let’s get started!
Feel free to check our tutorial on how to create a directory website with WordPress for free and without any coding skills.
Installing the Social Login Add-on
First of all, you need to install the Social Login extension by going to the WP Dashboard > Plugins > Add New > Upload Plugin section. Then select the extension ZIP file, install it and proceed by activating the extension.
Once you install the add-on, you need to select the authentication methods for your website. To do that, go to the WP Dashboard > HivePress > Settings > Users section and select one of the available methods. If you want to allow users to sign in either via Facebook and Google, it’s necessary to select both methods and save changes, as shown in the screenshot below.
After you select the authentication methods for your website, you can proceed to the next step.
Adding Facebook Login Button
In order to add the “Log in with Facebook” button to your website, you need to get a unique App ID from Facebook first. This ID links your website with Facebook and allows you to request the Facebook profile details (e.g., the email address) required for logging users in.
So, let’s move to the first step.
Registering on Facebook
Before creating a Facebook App, you have to register a Facebook Developer account. To do that, navigate to the Facebook for Developers page and click on the Log In or Get Started buttons. Then, you need to sign in with your FB account to proceed. Once you verify your account, you can move to the next step.
Creating an App
Once you finish the registration, you can go to the App Dashboard to create your first app. Simply click on the Create App button.
Then you have to select your app type. The app type determines which Facebook APIs are available to your app. Simply saying it defines what features you’ll be able to add in your App Dashboard. Since you want to enable the “Social Login” feature in the case at hand, you need to use the “Consumer” app type.
Next, you need to set the app name (e.g., your website name) and enter your valid email since all the developer notifications will be sent there. You don’t have to mention the Business Manager account if you don’t have one. Finally, click on the Create App button.
Once you create the app, you’ll be redirected to the App Dashboard. Here you need to select what features you want to add to your app. Simply click on the Set Up button in the Facebook Loginsection, and on the next page, select the “Web” platform.
Then, you’ll see the setup form, where you can enter your website details. In order to allow users to sign in to your website via Facebook, it’s enough to fill in the Site URL field only. But if you are a more experienced user, you can also fill in the other fields as well.
The next step is to navigate to the Settings > Basic section in the left sidebar.
On the settings page, you have to:
- Enter your website domain.
- Indicate the Privacy Policy URL, so users can read them before logging in.
- Specify the Data Deletion Instructions (a page with info on how your website visitors can get their data deleted).
- Finally, select the category that your website belongs to.
Once you add all the required details, save changes.
Enabling Social Login
Okay, you have just created an app. Now you need to switch your App mode to “Live” and copy the App ID.
Finally, go to your website, navigate to the WP Dashboard > HivePress > Settings > Integrations section, paste your Facebook App ID in the App ID field, and save changes.
That’s it! Now there should be a Facebook button in your sign-in form that allows users to sign in to your website via their Facebook accounts. However, you may have to wait a few minutes before changes will take place.
Now let’s move to the next part of this tutorial to create and add the Google Login button.
Adding Google Login Button
If you want to add the “Log In with Google” button to your HivePress-powered website, you need to get a unique Client ID from Google that will link your website with the Google authentication API. So, let’s do it!
Creating a New Project
The first step is to create a new Google API project (you may use an existing project if you already have one). To do that, go to the Google API Console and click on the Create Project button. Then you need to enter the name of your project and click on the Create button.
Now you have to go to the OAuth consent screen section and select the OAuth consent screen option (internal or external) according to your website requirements. For the sake of this tutorial, we’ll choose the External option.
Then you’ll be redirected to the App Registration form. Within this form, you need to:
- Set the App name (e.g., your website name).
- Indicate user support email and developer’s email so Google can notify you about any changes to your project.
- Specify links to your homepage, privacy policy page and the link to your terms of service page.
- Finally, add your website domain.
When finished, click on the Save button. You may skip the other steps within the registration form and come back to your Dashboard.
The next step is to create API credentials, namely – OAuth Client ID. You can do so by going to the Credentials > Create Credentials > OAuth Client ID section.
Within this section, you need to fill in the name field and enter your website’s URL in the “Authorized JavaScript origins” field. Optionally, you can fill in the “Authorized redirect URLs” field if you want to specify the path where users will be redirected after they’ve logged in with Google.
Once you are done, click on the Save button.
Enabling Social Login
Finally, you got a unique client ID. Now you need to copy and paste it in the WP Dashboard > HivePress > Settings > Integrations > Client ID section. Don’t forget to save changes.
Conclusion
That’s it! By following the steps above, you can easily set up the Social Login extension and allow your users to log in via third-party services like Facebook and Google. Once you complete all the steps, you’ll have the same Facebook and Google buttons in the login form, as shown in the screenshot below.
If you have any trouble adding the social login buttons, please try disabling third-party plugins (there may be a caching issue or a conflict with third-party plugins). Also, please make sure that you enabled the authentication methods in the WP Dashboard > HivePress > Settings > Users section and save changes.
