How to Add Facebook Login on WordPress [Step by Step Guide]

Updated on July 24, 2024 by Editorial Team

Looking to add Facebook login on WordPress website? You’re in the right place.

What do you do after multiple failed login attempts? Most probably, you click the “forgot password” option and reset your password.

However, almost 92% of users leave the website login page without trying to recover login credentials.

If you have a login/registration page set up on your site, this may be one of the reasons your site has a high bounce rate. It also hinders your ability to create a personalized user experience and drive engagement.

This is where a “Sign in with Facebook” option comes in handy.

So, let’s explore some benefits of using Facebook to log in and the steps to add a sign-in with a Facebook button.

Table Of Content

What is Facebook Login for WordPress Website?

Facebook login for a WordPress website is a feature that allows users to register and log in to your site using their Facebook credentials instead of creating a new username and password specific to the website.

This functionality can be integrated into a WordPress site using plugins or custom coding that utilizes the Facebook SDK for JavaScript or the Graph API.

Upon implementation, a “Login with Facebook” button appears on the login, registration, or comment sections of the site.

When users click this button, they are prompted to log in to their Facebook account (if not already logged in) and then to grant permission to the WordPress site to access their public profile information from Facebook.

Why Add Facebook Login to Your WordPress Site?

Here are some benefits of using a Facebook login for your website:

  • Improves User Experience: Facebook has over 3.049 billion monthly active users. So, the chances of your audiences already using this social platform are quite high. A social login button will simplify the login process for these users, allowing them to log in without the need to remember their credentials.
  • Boost Engagement Levels: With an easier login and registration process, audiences may be more likely to engage with your content, be it by leaving a comment or sharing a post on their social accounts.
  • Collect User Data: Depending on the permissions granted, you can access user data from Facebook, such as the user’s name, contact email, and profile picture. You can use these details to personalize the user experience on the WordPress site.
  • Offer Tailored Recommendations: You can also track details such as likes and friend lists of users who sign in with Facebook. This allows you to understand the preferences of these users and recommend relevant content, promotions, and products to them.

Have a YouTube channel with tutorials and useful videos for your audiences? Use any of these five YouTube plugins to embed videos on your site.

How to Add Facebook Login on WordPress Website (Step-by-Step)

Now, let’s see how you can add a Facebook login to a WordPress site:

Step 1: Install The Plus Addons for Elementor

On other platforms, you may need to use coding to add a login, but on WordPress, you can simply use The Plus Addons for Elementor plugin. The addon includes over 120 unique widgets, including a Login & Register widget.

You can drag and drop this widget on your site using the Elementor page builder to enable Facebook login on your site and customize it using a point-and-click interface.

To install The Plus Addons, go to your WordPress menu and select Plugins > Add New.

Install the plus addons for elementor how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Then, search for The Plus Addons for Elementor, install it, and click Activate.

Add plugins how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

The Login & Register widget is part of the premium version, so you must upgrade to The Plus Addons Pro. Check out our guide on how to upgrade to The Plus Addons Pro in a few simple steps.

Once you’ve upgraded, you’ll be able to use the Login & Register widget and many more cool and advanced features that come with the addon.

Step 2: Create a Facebook Developer Account

Next, you must create a Facebook developer account. It will give you access to tools used to create Facebook apps and integrations for websites and mobile apps.

First, log in to your Facebook account. In a new tab, open the Facebook Platform for Developers.

Facebook platform for developers how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Click the Get Started button, complete the simple registration process, and move on to the next step.

Step 3: Build a Facebook Web App

Once you’re logged into the Facebook developer account, click the Add New button.

Build a facebook web app how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Then, select the third option that says Other, and click Next.

Create an app how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Now, select the first option, i.e., Consumer, and click Next.

Select an app type how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Give your app a name, enter your email address, and click the Create App button.

App details how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Step 4. Set Up the Facebook Site Login

Now, you’ll be in the Facebook developer account’s dashboard.

Under the section Add products to your app, hover your mouse over Facebook Login and click the Set up button.

Add products to your app how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Since we are adding a Facebook login to our website, we’ll select the www or web option.

Quickstart how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

In the Tell Us About Your Website section, enter your site’s address.

Click Save. All remaining options are suited for advanced users so we can skip them.

Tell us about your website section how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Now, head over to the left side of your screen, expand App Settings, and select Basic.

App settings how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Here, you’ll see your App’s ID and Secret Key.

But before we can use them, we must enter URLs to our website domain, its privacy policy, and terms of service.

Apps id and secret key how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Next, choose your site’s Category and click the Save Changes button.

Finally, head over to the top menu bar and toggle the App mode from Development to Live.

4mby7mostfy0aeazqncx how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Note: Privacy Policy and Terms of Service page must be accessible on your live site in order to switch to Live mode. If you don’t have these pages on your site, you must add them and then continue with the procedure.

Step 5: Integrate Your Facebook App with The Plus Addons

Now, we need to head back to the WordPress admin dashboard, so we can integrate the Facebook app with The Plus Addons.

From the left menu bar, open The Plus Settings and navigate to Extra Options.

Theplus settings how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Scroll down, and look for the Facebook App ID and Facebook App Secret boxes.

Simply copy your ID from the developer account tab and paste it into the Plus Addons’ Facebook App ID box.

Repeat the steps for the secret key. Click the Save button.

Plus addons facebook app id box how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Do your contact forms get spammed with fake responses? Learn how to stop Elementor contact form spam completely.

Step 6: Add The Plus Addons Login & Register Widget to Your Site

Next, open the page where you want to add a Facebook login in the Elementor page builder.

Search the WP Login & Register widget and drag and drop it to your page. You can set this widget to allow users to register, log in, or do both.

Wp login and register how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

By default, the form will only allow manual login and signup.

To enable Facebook login, scroll down, expand the Social Login/Register section, and toggle Facebook login.

This will enable both Facebook login for existing users and registration for new users.

Social login or register how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

And that’s it. Your new Facebook login button is ready and you can publish your new page. Or, you can customize the look and feel of your login forms to match your site’s design.

The Plus Addons lets you tweak options like typography, background, colors, borders, animations, and more.

Facebook login button how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

If you don’t want to design a login form from scratch, that’s no problem either.

Simply head over to The Plus Addons’ Login & Register landing page, scroll down, and pick a template you like.

Click the Copy button that appears on the right side of your screen when you hover your mouse over a prebuilt form.

Live copy paste feature how to add facebook login on wordpress [step by step guide] from the plus addons for elementor

Once copied, head back to the Elementor page builder, right-click, and select the Plus Paste option.

The copied template will be added to your page and ready to go live.

Plus paste how to add facebook login on wordpress [step by step guide] from the plus addons for elementor
20 checklist for wordpress site maintenance how to add facebook login on wordpress [step by step guide] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​



    Wrapping Up

    A Facebook social login button helps you enhance the user experience by allowing visitors to log in or register to your site with a single click of a button.

    What once was a code-intensive exercise, WordPress widgets make it a breeze even for beginners.

    Simply install The Plus Addons for Elementor to add a Facebook login/signup to your site using the drag-and-drop widgets.

    This widget is fully customizable and lets you enable features like forgot password, subscribe to the newsletter, Google login, my Account menu, spam protection, password difficulty, and more.

    Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!

    If you use forms to collect leads, you must use reCAPTCHA to prevent bot responses and spam. Here’s how you can add reCAPTCHA to your Elementor forms.

    FAQs on Adding Facebook Login on WordPress Website

    Is it necessary to create a Facebook App for WordPress Login integration?

    Yes, it is necessary to create a Facebook app for WordPress login integration. You can create a Facebook login app using a Facebook developer account.

    Do I need to use a separate plugin to add Google login on my website?

    No, you don’t need separate plugins to add Google login to your site. In fact, The Plus Addons for Elementor lets you enable manual, Facebook, and Google login from its single Login & Register widget.

    How do I add a Facebook login to my website?

    To add a Facebook login to your site, you’ll need two things: a Facebook developer’s account to create a website login app and a social login plugin to integrate the app into your site. Check out our complete guide on how to add a Facebook login using The Plus Addons for Elementor.

    Can I allow users to register and login with both Facebook and email on my WordPress site?

    Yes, you can let users log in and register using Facebook and email on your site. All you need is a plugin like The Plus Addons for Elementor. It comes with a Login & Signup widget which helps you enable login and signup using social media accounts and emails.

    What role does the Facebook for Developers platform play in WordPress integration?

    The Facebook for Developers platform lets you create apps for integrating social login functions into registration forms on WordPress sites.

    Is it possible to add Facebook Login to a specific page or section of my WordPress site?

    Yes, you can add a Facebook login to any specific page or section of your WordPress site. You can install The Plus Addons for Elementor to use the Login & Signup widget to add a registration form on any page or section of your site.

    Related Blogs