Facebook Login Add-On
The One-Click Facebook Login add-on gives users the ability to easily register and login to the website using their existing Facebook account. This seamlessly integrates with the default login and registration system. Existing users can add or remove their linked Facebook account at any time from within their member dashboard on the website.
How To Get This Add-On
- Websites with the VIP Add-Ons Club automatically have this add-on available: Join The VIP Add-Ons Club
- Purchase Individually: One-Click Facebook Login Add-On
Overview
In this article, we'll go over the process of setting up the One-Click Facebook Login Add-On. By following the outlined instructions, the admin will be able to integrate the Facebook Login Add-On into the platform, allowing users to utilize this login method.
Requirements
- SSL Certificate: Facebook requires the website to have an SSL Certificate installed for security precautions.
- Facebook Developer Account: Estimated Setup Time – 5 minutes. Learn More
Configuration Steps
Before the admin is able to use this great tool on the website, first create a Developer's account on Facebook. Please follow these steps in order to continue. Make sure to visit this link to get started:
Create Facebook Developer Account
https://developers.facebook.com/products/facebook-login/
1. Make sure to be logged in to a Facebook account, otherwise, it will ask to create an account.
2. Once logged in please click on My Apps:
4. Click on create an app:
5. In the next pop up click on Create app:
6. Select the business portfolio do you want to connect to this app, if you do not have one to use yet choose I don't want to connect a business portfolio yet, very important that in order for this app to work, you will eventually need a business portfolio:
For Use Cases select: Authenticate and request data from users with Facebook login
For the Are you building a game question, select No, I'm not building a game:
Add a name for the app:
Finally click Create App:
7. After the app has been created, it will be redirected to the Dashboard. Click on the Use Cases option:
8. Click on the Go to Quickstart button:
9. Select the Web option:
10. Enter the site URL, click on Save and Go Back.
11. Next go to Settings > Basics to add the website's information. The App ID and The App secret key are added automatically.
12. Add the App Domains that will be using the App ID, website's Privacy Policy URL and Terms of Service URL.
For the User data deletions select Data deletions callback URL and add the domain /unsync-fb, as shown in the image below and be sure to select the best category that describes the website and click on Save Changes:
13. Scroll down, and make sure to complete the Data Protection Officer Contact Information if it applies to the website and save these changes.
14. Once those steps are completed, please go to App Review click on Request Permissions or Features.
15. The system will redirect to the Use cases page. Look for Authentication and account creation and click on Customize:
16. Confirm the advanced access for both public_profile and email, if any is missing click on Add:
Once the advanced access is requested, a message will appear at the bottom. Facebook now requires a Facebook Business Verification to be completed in order to get the Advanced access.
17. On the Uses Cases page click again on the Go to Settings button:
18. Make sure to turn on the option to Login with the Javascript SDK, also make sure to add the domain in the Allowed Domains for the JavaScript SDK field (very important!):
19. Save the changes.
20. Once all is ready, you can click on Go Live. In the Business verification section, click on Start Verification:
21. Start the verification process or go back to the dashboard.
22. Go to App Settings - Basic Settings and copy the App ID and App secret key:
23. Paste the App ID in the Facebook App ID field (1) and the App Secret ID in the Facebook App Secret ID (2) :
NOTE: The Facebook App Secret ID is now required by Facebook for data deletion request callback.
Frontend Use:
The admin also has the option to Enable the Facebook Login per membership plan.
These next steps are to activate the Facebook Login per plan:
1. Once the setup has been completed, the admin will need to go to Finance - Membership Plans and edit the plan that will have the Facebook Login option enabled:
2. Click on Member's Dashboard Tab and make sure this is set to YES:
3. Make sure to Save.
Once this is set to Yes the login form will contain this option:
If it's set to No, they will not have the ability to use the Facebook login but they will be able to use their Facebook account to sign up.
Also, if there isn't a key in the field, this option will never show up on the login form.
Additional Information: