How to Login by a Facebook Account in WordPress

You probably have surfed dozens of websites that show Continue with Facebook account option when you try to sign up or sign in. Many people love this button because they could save time because of no need to register and remember the password as well. All they need is their existing Facebook accounts.

This feature promises to improve the registration rate on your website dramatically. And with the huge number of Facebook users at present, you can not miss such a bargain, right? Moreover, promoting people on using their available social network accounts will also help you pretty much in your later marketing campaigns.

If you love such a great feature but are still wondering how to allow users to log in by a Facebook account on your WordPress website, this post is for you!

Keep reading!

Step 1: Set up the “Nextend Social Login” plugin

There are many plugins that can help you to create an option to allow users to log in by their Facebook account on a WordPress website. Nonetheless, the Nextend Social Login plugin is now the best plugin with the largest number of users and good feedbacks.

This plugin is used to create the sign up and sign in with social networks option on your web. Not only Facebook but other famous platforms such as Paypal, Pinterest, Disqs, Amazon, Twitter, Google, etc. can also be integrated with your site. This plugin is so convenient and powerful, isn’t it? Now let’s learn how to install it.

From the Admin Dashboard, go to Plugins menu. Click on Add New and search for the keyword nextend social login.

Choose the first result Nextend Social Login and Register (Facebook, Google, Twitter) and click Install Now. Wait for a few seconds then continue to click Activate when this button appears.

Next, in the admin dashboard, go to Settings > Nextend Social Login to adjust its settings.

In the new window, various choices of different platforms will show up. Maybe in the next posts, I will guide you to set up them all. But now, back to Facebook only, just click Getting Started in the Facebook box.

Now, on the screen, there is a step-by-step guide to create a Facebook App (16 steps). Let me show you an intuitive instruction below.

Step 2: Setting up a Facebook App

2.1. Sign up/Sign in a Facebook for Developer account

First of all, navigate to https://developers.facebook.com/apps/ as the plugin tells you to do.

When you see the screen of the Facebook for Developer site, click Register Now on the top right of the page to create a Facebook Developer account.

This site will ask you to register with your Facebook account. In the event, you have more than one Facebook account, just choose one. Then, press Next and fill in the password of your Facebook account if asked.

Next, just choose one option when it asks you which one is the best to describe to you. If you are not sure about this, select Other.

2.2. Create a Facebook app

In the new pop-up window, press the Create New App button to create a new Facebook app for this account. This corresponds with the 3rd step in the guide from the Nextend Social Login plugin.

Following, fill a name in Display Name box and an email in Contact Email provided that they are for the best management. Or else, you can write anything there and edit them later.

To finish, press the Create App ID button.

2.3. Configure the new Facebook app

In the upcoming screen, DO NOT select any option in the Scenario section. Instead, go to Settings > Basic menu on the left first.

An interface as below will appear:

Fill in those fields with the missing information as follows:

• App Domain: Write your website’s domain there.
• Privacy Policy URL: Fill in this box with the URL liked to your website’s privacy policy page.
• Terms of Service: Fill in this box with the URL linked to your website’s terms of service page.

Here is an example of my website. I put these URLs at the footer of my web page. Now I just need to go there and copy their URLs then paste into required fields.

After completing all 3 fields above, press the Save Changes button under those fields.

In the same window, click on the cross (+) in the Products (+) menu on the left. Here we press the Set Up button in the Facebook Login box.

 

Now, the product named Facebook Login will show up in the Products (+) menu. Click on it then choose the Quickstart option. You will see 4 options here. Just choose the 3rd option - Web - as you are trying to integrate your Facebook Login with a website.

In the next screen, there will be a blank field named Site URL. Let’s fill it with your website URL. After that, click Save.

Now, go to Settings submenu in the Facebook Login product to configure it.

Find the Valid OAuth Redirect URIs field inside the Valid OAuth Redirect URIs section. You should fill a URL into this box as follows:

http://your-website-domain/wp-login.php?loginSocial=facebook

Just copy this link and replace your-website-domain with your website domain, then click Save Changes.

2.4. Activate the Facebook app you have created:

At the top of the current page, look at the grey Off button next to Status - In Development. Press it to make your app public.

Choose a category of your website in the upcoming popup. then press Confirm button.

The Off button now changes to On and has a green color. Furthermore, the Status also changes from In Development to be Live at the same time. That means your Facebook App has been activated.

Don’t forget to click Save Changes again to save this setting.

Step 3: Integrate your Facebook App with the plugin on your site

Go back to the Nextend Social Login plugin’s setting page on your WordPress site. Look at the bottom of the page and click the I am done setting up my Facebook app button to confirm that you have completely installed and configured your Facebook app.

You will be navigated to this screen:

Let’s fill in the App ID (required) and App Secret (required) fields with your Facebook App information and press Save Changes.

To get the necessary information of your Facebook App, back to Facebook for Developers homepage. From the dashboard, go to Settings > Basic and you will see which you want. Copy them and paste to the fields in the plugin’s settings page.

Now a notification Your configuration needs to be verified will show up. Just press Verify Settings to confirm what you have configured.

A new window will appears right now and ask you to log in to your Facebook account. Log in with the account which you used to register the account in Facebook for Developer. Press Continue as ... to complete the login process.

A notification from the plugin that The test was successful will be shown. That means your setting is done.

However, if the plugin shows you a notification is Work Fine - Disabled in the yellow box (as in the picture below), it means that the Facebook App has not been enabled on your website. Therefore, press the Enable button to allowed your Facebook App to be valid on your site. Then click Save Changes.

Step 4: Add a new page to display the “Login by Facebook account” button on your web

In the WordPress Admin Dashboard, go to Pages > Add New. There you will add a totally new page to your website with the title such as Facebook app login for web.

In the body of the new page, write down there the shortcode [nextend_social_login] then press Publish on the right sidebar.

So now, your WordPress site has got a page for Facebook login already.

You may check if you have succeeded or not. Copy the permalink of the page you have created, log out of your current web account then paste the link into the navigation bar to get access to your new login page.

Your new login page will show up as a kind of below:

When you come back to log in your admin account, you will see that one more option to log in using Facebook account is added.

Bonus: How to customize the “Continue with Facebook” button

As you see, the default button has the text Continue with Facebook and has the classic blue color. If you want to modify it, do as follows:

On the admin dashboard, go to Settings > Nextend Social Login, then choose the Buttons tab.

There will be 3 fields which correspond with 3 buttons that Nextend Social Login plugin provides. Change the text in each field to edit the text on each button.

In there:

• Login Label: This label displays on the button when the user wants to log in your site.
• Link Label: This label displays on the button when the user wants to link a Facebook account with your site.
• Unlink Label: This label displays on the button when the user wants to unlink a Facebook account from your site.
• Default Button: If you satisfy with the default design of the button, leave this box blank. Otherwise, tick the box to customize the button as you want.

After finishing your adjustment, click Save Changes.

Remark

If you and any other user can not register a new account on your website using a Facebook account, recheck your setting for membership on your site.

In the admin dashboard, go to Settings > General. There will be two options named Membership and New User Default Role.

Be sure that the Anyone can register box in the Membership section is ticked.

Choose a suitable role for the new register in the New User Default Role field. For my site, I set it is Customer.

Scroll down and click Save Changes to save your settings.

Now anyone can use the Continue with Facebook button on your website’s login page to register his new account.

Final words

Though this is quite a long post, that it is one of the most minute guides and using the best plugin for WordPress.

However, there are plenty of ways to achieve the same result. If you have knowledge about CSS or PHP, you definitely code a little bit to make your WordPress website allows logging in with a Facebook account.
Anyway, if you know how to login by a Facebook account in WordPress in other simple ways, share with us by leaving a comment below. Thank you!