---
title: "How to Add a Facebook Login to WordPress with Elementor?"
url: https://theplusaddons.com/docs/add-a-facebook-login-to-wordpress-with-elementor/
date: 2024-05-16
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "A Facebook login lets visitors sign in with an account they already have, instead of creating another password. The Facebook option of the WP Login & Register widget from The..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/image-42-1024x536.png
word_count: 623
---

# How to Add a Facebook Login to WordPress with Elementor?

## 

- WP Login & Register widget de The Plus Addons for Elementor añade el botón de Facebook solo después de conectar una Facebook app y guardar el App ID y el App Secret ID en The Plus Addons > Settings.
- WP Login & Register widget está disponible solo en The Plus Addons for Elementor Pro, y la versión gratuita lo muestra como un widget Pro bloqueado.
- Facebook Login requiere que Anyone can register esté activado en Settings > General, porque cuando está desactivado el plugin rechaza cada inicio de sesión de Facebook, incluso para miembros existentes.
- Facebook Login usa Facebook's JavaScript SDK y solicita el email del visitante; si Facebook no comparte esa dirección, al hacer clic en el botón no ocurre nada.

A Facebook login lets visitors sign in with an account they already have, instead of creating another password.

The **Facebook** option of the **WP Login & Register** widget from The Plus Addons for Elementor adds the button once you connect a Facebook app.

*To check the complete feature overview documentation of The Plus Addons for Elementor WP Login & Register widget, [click here](https://theplusaddons.com/docs/create-a-login-register-form-in-elementor/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/login-form/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — the WP Login & Register widget is only part of The Plus Addons for Elementor Pro. The free plugin lists it as a locked Pro widget and does not add it to Elementor.- **Widget to enable:** WP Login & Register, switched on under **The Plus Addons > Widgets**.- **Anyone can register** ticked in **Settings > General**. The Facebook login is refused while it is off, even for existing members.- A Facebook developer account and an app with the Facebook Login product.

## Step 1: Create a Facebook App

*These screens belong to Meta for Developers and change often, so the labels you see may differ.*

- Log in to Facebook for Developers. If you have no developer account yet, click **Get Started**.

![The Get Started button on Meta for Developers](https://theplusaddons.com/wp-content/uploads/2024/05/Generate-Facebook-App-ID-and-App-Secret.png)

- Complete the developer account registration.

![Registering a Meta developer account](https://theplusaddons.com/wp-content/uploads/2024/05/create-Meta-Developers-Account.png)

- On the **Apps** page, click **Create App**.

![The Create App button on the Meta Apps page](https://theplusaddons.com/wp-content/uploads/2024/05/Create-App.png)

- Choose the app type and continue.

![Choosing the app type for the new Facebook app](https://theplusaddons.com/wp-content/uploads/2024/05/Select-App-type.png)

- Enter the app name and contact email, then create the app.

![Entering the app name and contact email](https://theplusaddons.com/wp-content/uploads/2024/05/App-Details.png)

- Open **Settings > Basic** in the app's sidebar.

![The Settings > Basic page of the Facebook app](https://theplusaddons.com/wp-content/uploads/2024/05/Basic-Settings.png)

- Copy the **App ID** and, after clicking **Show**, the **App Secret**.

![The App ID and App Secret fields of the Facebook app](https://theplusaddons.com/wp-content/uploads/2024/05/App-Id-and-App-secret.png)

- Add a **Privacy Policy URL**, choose a category and save the changes.

![Adding a privacy policy URL and category to the Facebook app](https://theplusaddons.com/wp-content/uploads/2024/05/Select-app-category.png)

- Switch the app to **Live** mode.

![Switching the Facebook app to Live mode](https://theplusaddons.com/wp-content/uploads/2024/05/App-Mode.png)

- Add the **Facebook Login** product to the app.

![Setting up the Facebook Login product](https://theplusaddons.com/wp-content/uploads/2024/05/Click-Set-up-button.png)

- In **Facebook Login > Settings**, add the address of the page with your login form.

![The Facebook Login settings with the redirect URI field](https://theplusaddons.com/wp-content/uploads/2024/05/Valid-OAuth-Redirect-URIs.png)

- Turn on **Login with JavaScript SDK**, add your domain to the allowed domains and save.

![Allowing your domain for the JavaScript SDK in Facebook Login settings](https://theplusaddons.com/wp-content/uploads/2024/05/Login-with-JavaScript-SDK.png)

## Step 2: Save the App Keys in The Plus Addons

- Go to **The Plus Addons > Settings** and find **Login with Facebook** in the **API** group.- Click its settings icon, paste the **App ID** and the **App Secret ID**, and click **Save**.

![Saving the Facebook App ID and App Secret ID in The Plus Addons settings](https://theplusaddons.com/wp-content/uploads/2024/05/login-register-facebook-id-settings.gif)

## Step 3: Show the Button in the Widget

- Add the **WP Login & Register** widget with any **Type** except **Forgot Password**.- Open **Social Login/Register** and turn on **Facebook**.- Pick a **Layout** (Layout 1 or Layout 2), set the **Alignment**, and optionally a **Redirect URL** for after the login. Then publish.

![Facebook turned on in the Social Login/Register section with the Layout and Alignment options](https://theplusaddons.com/wp-content/uploads/2026/09/login-social.webp)

![A login form with the Facebook login button on the front end](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-facebook-login-demo.png)

## How It Behaves

- According to the plugin code, the button uses Facebook's JavaScript SDK and asks for the visitor's email.- The site checks the login with your App ID and App Secret, then logs in the member with the same email, or creates a new account.- **Hide Form** (for the **Login** or **Register** type with the **Standard Form** layout) leaves only the social buttons.

## Limitations

- We could not test a Facebook login end to end on our test site, so check the flow on your live site with a test account before relying on it.- While **Anyone can register** is off, the plugin refuses every Facebook login, including members who already have an account.- According to the plugin code, the login is only sent to your site when Facebook shares the visitor's email address; without it, clicking the button does nothing.- The widget is part of The Plus Addons for Elementor Pro only.

## Troubleshooting

### The button does not appear

Check that the App ID is saved in **Login with Facebook**, that the app is Live, and that your domain is allowed for the JavaScript SDK.

### Login fails with a registration message

Tick **Anyone can register** in **Settings > General**.

## Related Docs

- [WP Login & Register widget: create a login and register form](https://theplusaddons.com/docs/create-a-login-register-form-in-elementor/)- [Add a Google login to WordPress](https://theplusaddons.com/docs/add-a-google-login-to-wordpress-with-elementor/)- [Show Google sign-in on both forms](https://theplusaddons.com/docs/show-google-sign-in-with-both-login-and-registration-forms-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding a Facebook login to WordPress with Elementor?**
A: The setup depends on three things: The Plus Addons for Elementor Pro, the WP Login &amp; Register widget being switched on under The Plus Addons &gt; Widgets, and a Facebook developer account with an app that has the Facebook Login product. WordPress also needs Anyone can register enabled in Settings &gt; General, because the plugin refuses Facebook login when that option is off. That last part is the common gotcha when existing members still cannot sign in.

**Q: How do I connect a Facebook app to the login widget in WordPress?**
A: The connection happens through the API settings in The Plus Addons for Elementor. After creating the app in Meta for Developers, copy the App ID and App Secret, then paste them into Login with Facebook under The Plus Addons &gt; Settings. This link matters because the widget checks logins against those keys before it lets a visitor in or creates a matching account by email.

**Q: Why does the Facebook login button not appear on my page?**
A: The button usually disappears when one of three pieces is missing: the App ID is not saved in Login with Facebook, the app is not Live, or your domain is not allowed for the JavaScript SDK. The page also says the widget must be WP Login &amp; Register and not Forgot Password. That combination matters because the social button only shows when the widget, app state, and allowed domain all line up.

**Q: Why does Facebook login fail with a registration message?**
A: That failure points straight at WordPress registration settings. The page says Facebook login is refused when Anyone can register is off in Settings &gt; General, even for existing members. Turning it on matters because the plugin may create a new account when it matches a visitor by email, and without open registration that flow gets blocked before login completes.

**Q: Can I use Facebook login on both the login and registration forms?**
A: The social button can appear in both flows when you use the WP Login &amp; Register widget and turn on Facebook under Social Login/Register. The page also notes that Hide Form works only for the Login or Register type with the Standard Form layout, leaving just the social buttons visible. That makes it useful when you want a cleaner social-only entry point instead of a full form.

**Q: What are the main limitations of adding Facebook login with The Plus Addons for Elementor?**
A: The biggest limits are practical, not cosmetic. The page says testing was not completed end to end on their test site, so live-site verification with a test account is important before relying on it. It also depends on Facebook sharing the visitor’s email address, because without that email the click does nothing. On top of that, this feature is part of The Plus Addons for Elementor Pro only.
