Skip to content
theplus logo smallTPAG Black Logo

  • Blocks
    • Login Signup Latest
    • Dark Mode
    • Audio Player
    • Coupon Code
    • Preloader
    • Data Table Popular
    • Table of Contents
    • Video Player
    • Social Sharing
    • Advanced Typography
    • Scroll Sequence
    • Dynamic Device
    • Google & Facebook Review
    • Row Background Unique
    • Form Styler
    • Social Feeds
    • Social Embed
    • Accordions Unique
    • Switcher
    • Tabs & Tours Unique
    • Advance Chart
    • Custom Cursor
    • Carousel Anything Popular
    • View all 85+ Blocks
    Ready to get started?
    Download Now
    View all 85+ Blocks
    Questions? Ask Now
  • Listing
    • Blog Posts
    • WooCommerce Products
    • Custom Loop Skins Powerful
    • Ajax Search Bar
    • Testimonials Unique
    • Team Members
    • Image Gallery
    • Video Gallery
    • View All Listings
    Ready to get started?
    Download Now
  • Builder
    • Blog Builder
    • WooCommerce Builder Coming Soon
    • Header Builder Unique
    • Mega Menu Builder Popular
    • Popup Builder
    Ready to get started?
    Download Now
  • Extras
    • White Label
    • Equal Height
    • Global Typography & Colors
    • Cross Domain Copy Paste
    • Magic Scroll Animations Unique
    • Grid Design Tool
    • Floating Effects
    • Mouse Hover Parallax
    • Sticky Column
    • Advanced Display Condition
    • On Scroll Animations
    • Global Tooltips
    • Shape Divider
    • Dynamic Content
    • Advanced Border Radius
    • Global Tilt 3D Effect
    • View All Extensions
    Ready to get started?
    Download Now
    View all 85+ Blocks
    Questions? Ask Now
  • Design
    • 18+ Page Templates
    • Sliders Unique
    • UI Blocks
    • Hero Sections
    • Carousel Active Background
    • Main Content
    • Creative Content
    • Features Content
    • Wdesignkit Coming Soon
    • View All Designs
    Ready to get started?
    Download Now
  • Resources
    • Integrations
    • Whats New? Recently Updated
    • Feature Request
    • Blog Helpful
    • Join Affiliate Start Earning
    Ready to get started?
    Download Now
  • Support
    • Facebook Community
    • Video Tutorials Weekly Videos
    • Helpdesk Technical Support
    • Documentations
    • Live Chat PreSale Support
    Ready to get started?
    Download Now
  • Pricing
Home
Blocks
Listing
Builder
Extras
Design
Docs
Support
Changelog
Get Pro Now
60 Days Money-Back Guarantee

Download Now
Account

How to Add Facebook Login to a WordPress website?

Updated on March 4, 2023

Home » Documents » Plus Blocks » Login & Signup » How to Add Facebook Login to a WordPress website?

Table of Contents

As an online business, having a user-friendly login process is essential for attracting and keeping customers. Utilising a platform such as Facebook for logging in to your website is a great way to streamline the process for your users. Allowing for a Facebook login not only simplifies the process for your members but also reduces the amount of data you need to collect from your users. Implementing a Facebook login can also help build user trust, as it shows that you value their privacy and security.

With the Login & Signup block from The Plus Addons for Block Editor, you can easily add a Facebook login option to your login or registration form.

To check the complete feature overview documentation of The Plus Addons for Block Editor Login & Signup block, click here.

Requirement  – This widget is a part of The Plus Addons for Block Editor, make sure its installed & activated to enjoy all its powers.

LIVE BLOCK LINK

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.

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

facebook app id secret 1

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

facebook app id secret 2

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

facebook app id secret 3

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

facebook app id secret 4

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

facebook app id secret 5

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

facebook app id secret 6

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. 

facebook app id secret 7

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 the Save changes button.

facebook app id secret 8

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

facebook app id secret 9

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.

facebook app id secret 10

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.

facebook app id secret 12

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.

facebook app id secret 13

Add the Facebook App Id and Facebook App Secret in the Login & Signup block

Now add the block on the page, got to Forms > Type and select any form types Login, Register or Login & Register. 

Select the appropriate layout from the Layout section. 

Note: Here, we are using the Login form, but following the same process, you can add Facebook login to both Register and Login & Register forms.

login signup login type

Once your form fields are ready, go to the Login tab and click the +Add Field button.

From the Field dropdown, select Social Login.

login signup facebook

Turn on the Facebook toggle. From the Layout dropdown, you can select a layout for the button.

Then in the Facebook App Id and Facebook App Secret fields, add your Facebook app id and secret key, respectively.

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

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

Also, read How to add Google login to a WordPress website.

Previous PostHow to add Google login to a WordPress website?
Read NextHow to Send WordPress New Account Registration Email to Mailchimp?

Still in Doubt? Let us Assist You — Raise a Ticket Now

Explore 85 Blocks from The Plus Blocks for Gutenberg Check Now
Join our WordPress Community!
- Ask and Learn Together.
Be a WordPress Expert!
Subscribe for Video Tutorials
Related Docs

How to add Login Button in WordPress Header Menu?

How to Enable Passwordless Login via Email in WordPress?

How to Make Custom Password Reset Email in WordPress Login Form?

How to make WordPress user registration GDPR compliant?

How to Redirect after Login in WordPress Login Form?

How to add Custom fields to WordPress registration form?

How to add Google reCAPTCHA in WordPress registration form?

How to make Custom Password Reset Form Page in WordPress?

How to Enable Email Verification Magic Login Link in WordPress Login Form?

How to Send WordPress New Account Registration Email to Mailchimp?

How to add Google login to a WordPress website?

Login & Signup Block Settings Overview

Ready to Supercharge your site?
With our #60daysMoneyBackGuarantee and perfect 5-star reviews, you can stay worry-free and purchase with complete confidence.
GET PRO NOW

60 Days Money Back
Guarantee

Upgrade or cancel anytime

4.5 Star Rated

The premium support you deserve

Our Friendly Support
Extensive Documentations
Detailed Video Tutorials
Active Users Community
Get Exclusive WordPress Tips, Tricks and Resources
Delivered Straight to Your Inbox!

NO SPAM GUARANTEE

    Features

    Plus Creatives

    Plus Blocks

    Plus Core

    Plus Sections

    Marketing Blocks

    Plus Listings

    Plus Builder

    Plus Extras

    Plus Design

    Popular Blocks

    Mega Menu

    Carousel Anything

    Blog Builder

    FREE

    Advanced Charts

    Live Copy Paste

    Dynamic Content

    Display Conditions

    Popup Builder

    Dark Mode

    Lottie Animations

    Resources

    Pricing

    Integrations

    Free vs Pro

    Changelog

    NEW

    Feature Request

    Roadmap

    🔥 HOT

    Join Affiliate

    💰

    Our Blogs

    Uptime

    99.99%

    Brand Kit

    Get Support

    Login to Portal

    Helpdesk

    Documentation

    Facebook Community

    Video Tutorials

    Our Products

    The Plus Addons for Elementor

    The Plus Blocks for Gutenberg

    NexterWP Theme

    WDesignKit

    Company

    Website

    About Us

    Team

    Career

    Hiring Now

    POSIMYTH Security Program

    Terms of Services

    Privacy Policy

    Cookie Policy

    Refund Policy

    Support Policy

    Tpag footer logos
    Tpag logo

    This website uses cookies to ensure you get the best experience on our website Cookie Policy

    Click to copy
    Copy
    How it works?