{"id":18751,"date":"2023-10-03T15:30:32","date_gmt":"2023-10-03T15:30:32","guid":{"rendered":"https:\/\/hivepress.io\/?p=18751"},"modified":"2023-10-03T15:30:33","modified_gmt":"2023-10-03T15:30:33","slug":"add-social-login-to-wordpress-directory-website","status":"publish","type":"post","link":"https:\/\/hivepress.io\/blog\/add-social-login-to-wordpress-directory-website\/","title":{"rendered":"How to Add Social Login to Your WordPress Directory Website"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/em><\/p>\n\n\n\n

In this short tutorial, we\u2019ll show you how to set up the HivePress Social Login extension<\/a> so you can allow your website visitors to sign in via Facebook and Google. We\u2019ll explain step-by-step how to get Facebook App ID and Google Client ID and correctly integrate them with your website.<\/p>\n\n\n\n

Before we begin, it’s important to note that the Social Login extension is based on HivePress<\/a>, 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 multipurpose WordPress theme, ListingHive<\/a>.<\/p>\n\n\n\n

Let\u2019s get started!<\/p>\n\n\n\n

Feel free to check our tutorial<\/strong> <\/a>on how to create a directory website with WordPress for free and without any coding skills. <\/p><\/div>\n\n\n\n

Installing the Social Login Add-on<\/h2>\n\n\n\n

First of all, you need to install the Social Login extension by going to the WP Dashboard > Plugins > Add New<\/strong> > Upload Plugin<\/strong> section. Then select the extension ZIP file, install it and proceed by activating the extension.<\/p>\n\n\n\n

Once you install the add-on, you need to select the authentication methods for your website. To do that, go to the WP Dashboard ><\/strong> HivePress > Settings > Users<\/strong> section and select one of the available methods. If you want to allow users to sign in either via Facebook and Google, it\u2019s necessary to select both methods and save changes, as shown in the screenshot below.<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

After you select the authentication methods for your website, you can proceed to the next step.<\/p>\n\n\n\n

Adding Facebook Login Button<\/h2>\n\n\n\n

In order to add the \u201cLog in with Facebook\u201d 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)<\/em> required for logging users in.<\/p>\n\n\n\n

So, let\u2019s move to the first step.<\/p>\n\n\n\n

Registering on Facebook<\/h3>\n\n\n\n

Before creating a Facebook App, you have to register a Facebook Developer account. To do that, navigate to the Facebook for Developers<\/a> page and click on the Log In<\/strong> or Get Started<\/strong> 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.<\/p>\n\n\n\n

Creating an App<\/h3>\n\n\n\n

Once you finish the registration, you can go to the App Dashboard<\/strong> to create your first app. Simply click on the Create App<\/strong> button.<\/p>\n\n\n\n

\"Creating<\/figure>\n\n\n\n

Then, you have to choose what you want your app to do. For the purposes of this tutorial, you have to select \u201cAllow people to log in with their Facebook account\u201d and then proceed.<\/p>\n\n\n\n

\"Creating<\/figure>\n\n\n\n

Next, you need to set the app name (e.g., your website name)<\/em> and enter your valid email since all the developer notifications will be sent there (you don\u2019t have to mention the Business Manager account if you don\u2019t have one). <\/em>Finally, click on the Create App<\/strong> button.<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

Once you are in your Dashboard, go to the App Settings > Basic<\/strong> section.<\/p>\n\n\n\n

\"Facebook<\/figure>\n\n\n\n

On the settings page, you have to:<\/p>\n\n\n\n