Facebook Login Add-On

Overview

The One-Click Facebook Login add-on gives the users the ability to easily register and log in to the website using their existing Facebook account.

This seamlessly integrates with the default login and registration system. The 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

Enabling the Add-On

REQUIREMENT: Make sure to have the SSL installed on the website, otherwise the Facebook Login is not going to work.

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:

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.

https://www.facebook.com

2. Once logged in please click on Go to Docs:

3. Go to the App section of Facebook for Developers:

4. Click on create an app:

5. In the next pop up please select Set up Facebokk Login, and click Next:

6. Choose Website for the platform, and "No, I'm not building a game" then click Next:

7. Provide details about the app being created and click on Create App:

8. After the app has been created, it will be redirected to the Dashboard. From there please make sure to click on Products:

8. In the products you will see the Facebook Login option, click on Configure and Quickstart:

9. In the next screen please click on Quickstart on teh left sidebar, then click on the Web option.

10. Add the URL of the website here and click Save.

11. Next go to Settings > Basics to add the website's information:

12. In the Settings > Basic section the App ID and the App secret key can be found in the top section.

Please add the Privacy Policy URL and Terms of Service URL, also include the App Domains that will be using the App ID, for the User data deletions select Data deletions callback URL and add the domain /unsync-fb, as shown in the screenshot 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 - Permissions and Features.

15. Look for Authentication and account creation and click on Edit:

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.

16. After this, go to Products > Facebook Login > Configure > Settings: cebook Login - Settings:

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!):

17. Once all is ready, you can click on Go Live, verify that all the steps were saved correctly and click on Complete verification:

18. Go to the General Settings and click on the Integrations tab.

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: