How to Login by a Facebook Account in WordPress

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!

login by Facebook account in WordPress

Login in websites with existing Facebook accounts is very fast and convenient for both web owners and visitors!

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.

 Login the WordPress website with Facebook

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.

login by Facebook account in WordPress

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.

log in the WordPress website with Facebook - guide to create Facebook app

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.

login by Facebook account in WordPress - register a Facebook devveloper 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.

login by Facebook account in WordPress - create a Facebook devveloper account

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.

login by Facebook account in WordPress - create a Facebook devveloper account

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.

login by Facebook account in WordPress - register a Facebook devveloper account

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.

login by Facebook account in WordPress - create a Facebook app

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.

login by Facebook account in WordPress - configure the Facebook app

An interface as below will appear:

login by Facebook account in WordPress - configure the Facebook appFill in those fields with the missing information as follows:

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.

login by Facebook account in WordPress - get info to configure the Facebook app

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.

login by Facebook account in WordPress - configure the Facebook app

 

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.

login by Facebook account in WordPress - configure the Facebook app

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.

login by Facebook account in WordPress - configure the Facebook app - website info

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

login by Facebook account in WordPress - configure the Facebook app - website domain

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.

login by Facebook account in WordPress - activate the Facebook app

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

login by Facebook account in WordPress - activate the Facebook app - bussiness type

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.

login by Facebook account in WordPress - activate the Facebook app

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.

login by Facebook account in WordPress - intergrate the Facebook app

You will be navigated to this screen:

use facebook account to login WordPress - setup in the plugin

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.

get the necessary information of your Facebook App to login wordpress

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

press Verify Settings to confirm what you have configured to login wordpress

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.

log in your Facebook account

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.

Integrate your Facebook App with the plugin on WordPress - enable the app

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.

Add a new page to display the Login by Facebook account

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.

get access to new login page with facebook account

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

Your new login page will show up to login wordpress with facebook app

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.

have the Continue with Facebook option for WordPress site.

Now you have the Continue with Facebook option for your site.

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.

login by Facebook account in WordPress - configure the 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.

Choose a suitable role for the new register to login wordpress with facebook account

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!

Leave a Reply

Newsletter

Subscribe to our newsletter to receive news and tutorials about our themes and WordPress.