---
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-04-09
author: "Aditya Sharma"
description: "Are you looking to add a Facebook login to your Elementor website? Adding a Facebook login feature to your Elementor website can greatly enhance user experience and improve engagement by..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/image-42-1024x536.png
word_count: 682
---

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

## Key Takeaways

- The Plus Addons for Elementor includes the WP Login & Register widget, which allows users to add a Facebook login feature.
- Users must generate a Facebook App ID and App Secret through Facebook for Developers to enable Facebook login.
- The Facebook App must be made live by adding a Privacy Policy URL and turning on the App Mode toggle.
- To enable Facebook login in the WP Login & Register widget, users must select a form type and enable the Facebook toggle from the Social Login/Register tab.

Are you looking to add a Facebook login to your Elementor website? Adding a Facebook login feature to your Elementor website can greatly enhance user experience and improve engagement by simplifying the login process.

With the WP Login & Register widget from The Plus Addons for Elementor, you can easily add a Google login to your Elementor website.

*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 its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-login-form/)

First, you have to generate your **Facebook App Id **and** Facebook App Secret**.

### Generate Facebook App ID and App Secret

1. For this, you have to login to your Facebook account and go to [Facebook for Developers](https://developers.facebook.com/).

2. If you don’t have a developers account, click the **Get Started** button at the top.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Generate-Facebook-App-ID-and-App-Secret.png)

3. Then you have to register for a developer account, follow the steps to create your account.

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

4. Once done, you’ll get to the Apps page, click on the **Create App** button. 

![](https://theplusaddons.com/wp-content/uploads/2024/05/Create-App.png)

5. On the next screen, you have to select your app type, select **None** and click on **Next**.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Select-App-type.png)

6. Then add an app name, email id and optionally connect your business account. Once done click on **Create App** button.

![](https://theplusaddons.com/wp-content/uploads/2024/05/App-Details.png)

7. On the next page, from the left sidebar, click on **Settings** > **Basic**.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Basic-Settings.png)

8. Now you’ll find your App Id and Secret, click on the **Show** button in the **App secret** field to see the secret key. 

Copy and paste both App Id and Secret into a notepad. You’ll need it later. You need to perform a few more steps before you can use them. 

![](https://theplusaddons.com/wp-content/uploads/2024/05/App-Id-and-App-secret.png)

9. Now you need to make the app live. In order to do so, you’ll have to add a **Privacy Policy URL**.

You can add your website URL or privacy policy page URL. Then from the **Category** dropdown you have to select a category for your app.

Once done click on **Save changes** button.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Select-app-category.png)

10. Then from the top, turn on the **App Mode** toggle to **Live**.

![](https://theplusaddons.com/wp-content/uploads/2024/05/App-Mode.png)

11. Now click on the **Add Product** link in the left sidebar.

12. On the next page, click the **Set up** button in the **Facebook Login**.

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

13. This will add a **Facebook Login** link in the left sidebar. Go to **Facebook Login** > **Settings**.

14. On the next page, in the **Valid OAuth Redirect URIs** field add the page URL where you have added the Login & Signup block.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Valid-OAuth-Redirect-URIs.png)

15. Then turn on the **Login with JavaScript SDK** toggle to **Yes,** and in the **Allowed Domains for the JavaScript SDK** field, add your website URL. Then click on the **Save changes** button.

![](https://theplusaddons.com/wp-content/uploads/2024/05/Login-with-JavaScript-SDK.png)

### Add the Facebook App ID and Facebook App Secret in The Plus Addons for Elementor

Once you have your Facebook App ID and App Secret, go to

- **The Plus Addons **→** Extra Options → Settings** 

- Scroll down to the **Login with Facebook **section then click on the Setting Icon and you can see the Login with Facebook popup section**. **

- Then in the Popup section paste your Facebook **App ID **and **App Secret ID** and click on **Save**.

![](https://theplusaddons.com/wp-content/uploads/2024/05/login-register-facebook-id-settings.gif)

### Enable Facebook Login in the WP Login & Register widget

Add the WP Login & Register widget on the page and follow the steps - 

1. Select the appropriate form type (except Forgot Password) from the **Type** dropdown under the **Forms Layout** tab.

2. Then enable the **Facebook** toggle from the **Social Login/Register** tab.

![](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-facebook-login.png)

You can select a button layout from the **Layout** dropdown. 

From the **Alignment,** you can align the button in the form.

Then in the **Redirect URL** field, you can add a page link to redirect users to a specific page after login.

By enabling the **Hide Form** toggle, you can hide the manual form and only keep the Facebook login button.

This is how easily you can add a Facebook login option to your Elementor website.

![](https://theplusaddons.com/wp-content/uploads/2024/05/wp-login-register-facebook-login-demo.png)

***Suggested Reading***: [*How to Add a Google Login to WordPress with Elementor?*](https://theplusaddons.com/docs//add-a-google-login-to-wordpress-with-elementor/)

## Frequently Asked Questions

**Q: What should I do if I cannot generate a Facebook App ID and App Secret?**
A: If you're having trouble generating a Facebook App ID and App Secret, ensure you have a Facebook Developer account. If you don't have one, follow the steps to register for a developer account after clicking the Get Started button on Facebook for Developers. Missing these credentials will prevent you from integrating Facebook Login with The Plus Addons for Elementor.

**Q: Can I use The Plus Addons for Elementor to add Facebook Login to my website?**
A: The Plus Addons for Elementor allows you to easily integrate Facebook Login into your WordPress site. You need to use the WP Login & Register widget, which supports this feature. This widget simplifies user login, enhancing the overall user experience on your Elementor website.

**Q: What settings work best for enabling Facebook Login in the WP Login & Register widget?**
A: When enabling Facebook Login in the WP Login & Register widget, ensure you select the appropriate form type and enable the Facebook toggle in the Social Login/Register tab. Additionally, consider using the Hide Form toggle to display only the Facebook login button, which can streamline the login process for users.

**Q: What if the Facebook Login option is not appearing after setup?**
A: If the Facebook Login option is not showing up, double-check that you have correctly entered your Facebook App ID and App Secret in The Plus Addons u2192 Extra Options u2192 Settings. Also, ensure that the Facebook App is set to Live and that the Valid OAuth Redirect URIs field has the correct URL where the login block is located.

**Q: Are there any limitations when using Facebook Login with The Plus Addons for Elementor?**
A: One limitation to consider is that the Facebook Login feature requires a live Facebook App to function correctly. If your app is in development mode, users who are not listed as developers or testers will not be able to log in. Make sure to add a Privacy Policy URL and set your app to Live to avoid this issue.

**Q: Does adding Facebook Login improve user engagement on my site?**
A: Adding Facebook Login can significantly improve user engagement by simplifying the login process. Users often prefer quick login options, and integrating this feature through The Plus Addons for Elementor can lead to higher conversion rates and a better overall user experience on your Elementor website.