This article will show you how to add a "Continue with Facebook" button to your signup, login, and profile forms. Part one is a 3-minute video with step-by-step instructions to connect your Memberstack account and Facebook Developer account. Part two will show you how to set up the front end.
Part 1: The Backend
Here's a link to the Facebook Developer site.
- The Data Deletion Instructions URL is a page on your site that members can use to request their data be deleted.
- Click "Get Advanced Access" for email and public_profile.
- I had quite a bit of trouble getting the Facebook UI to load properly. If you experience difficulties, I recommend trying again in a private or incognito browser.
- You must complete a Data Use Checkup.
- Toggle your app from test mode to live mode.
Part 2: The Frontend
If you're using Memberstack's pre-built sign-up, login, or profile UI, then you're already finished. Enabled social auth providers will automatically appear in the pre-built UI.
If you'd like to add a social auth button to your Webflow project this section is for you.
Sign up & Login Forms
I recommend copying one of our Webflow social auth buttons. They are 100% built in Webflow, already have the attributes you need, and are easy to customize:
A) Light Theme Facebook Button
B) Dark Theme Facebook Button.
To create your own from scratch:
- Review Facebook's Branding Guidelines for Sign-in buttons.
- Create a link block with the attribute
- Add the Facebook logo.
- Add your button text. We recommend something like "Continue with Facebook"
That's it for signup and login buttons. Profile buttons have a few additional elements.
In this other tutorial, we'll create a UI for members to connect providers, view previously connected providers, and (optionally) disconnect providers.
Social Auth Buttons in Profile Forms
I've gone up to the frontend implementation of the button and did all the facebook integration on the backend part. But upon clicking the button, I get an error
How do I solve this?
Please sign in to leave a comment.