Setting Up Facebook Login

Add Facebook Login to your website as a convenient login for your customers.

To add Facebook Login, you'll first need to take some steps with Facebook to create an App ID.

  1. To get started, click this link: https://developers.facebook.com/apps/ which will take you to the Facebook for Developers site.
  2. Click the  Create App button. (Depending on whether this is your first app, you will see one of two screens):
    Screen Shot 2023-02-07 at 12.24.08 PM

    All-Apps-Facebook-for-Developers
  3. Select Consumer as the Type and then click the Next button at the bottom of the page.choose consumer
  4. Next, enter the fields; 
    1. App Display Name - This is the app name associated with your app ID (for instance, 'Spectra Winery Login').
    2. App Contact Email - this email address is used to contact you about potential policy violations, app restrictions or steps to recover the app if it's been deleted or compromised.
    3. Select No Business Manager Account selected with the drop down menu
  5. When you are finished, select Create AppScreen Shot 2023-02-07 at 12.42.05 PM
  6. You will be asked to enter your Facebook Login Password to continue.
  7. On the next screen select Set Up under the Facebook Login square.Spectra-Winery-Login-Add-Product-Facebook-for-Developers
  8. Next, select WebSpectra-Winery-Login-Facebook-Login-Facebook-for-Developers
  9. In Step 1 you will need to enter the site URL. 
    1. To get your website URL from the Commerce7 Admin panel, navigate to Settings > General and copy and paste the Website URL into the Site URL field for the Facebook Login app.

      Screen Shot 2023-02-07 at 12.47.46 PM
  10. Once you have entered the Site URL to the field, select Save and Continue

    Screen Shot 2023-02-07 at 12.49.42 PM
  11. On Step 2, simply select Next
    Screen Shot 2023-02-07 at 12.52.01 PM
  12. On Step 3 scroll down to select Next again. Screen Shot 2023-02-07 at 12.53.55 PM
  13. On Step 4 select Next again. Screen Shot 2023-02-07 at 12.55.10 PM
  14. From Step 5 at the top of the screen Click to Copy the App ID by scrolling over the App ID number.Screen Shot 2023-02-07 at 12.56.45 PM
  15. You're almost done! Now go back to Commerce7 Admin and select the Apps & Extensions tab.
  16. Click on the Extensions tab at the top of the page.
  17. Select the Facebook Login extension. 
  18. Click Add Extension at the top right of the page.
    Screen Shot 2023-02-07 at 12.59.58 PM
  19. A window will open where you can paste the App ID from your Facebook for developers site.

    Screen Shot 2023-02-07 at 1.00.08 PM
  20. Next, go back over to the Facebook for Developers site and toggle the In Development option to 'on' Screen Shot 2023-02-07 at 1.02.50 PM
  21. Then, select from the pop up window select Basic Settings link. Screen Shot 2023-02-07 at 1.03.52 PM
  22. On this page, in the Privacy Policy URL and User Data Deletion fields enter your website URL and add "/legal" at the end.
  23. Under the Category section use the drop down menu to select Business and Pages Screen Shot 2023-02-07 at 1.16.15 PM
  24. Once you select Save Changes it will remain on this page and then toggle the In App Development to 'on' again.  Screen Shot 2023-02-07 at 1.02.50 PM
  25. This time, it should be successful and display that it's in (blue) 'Live' mode.

    Screen Shot 2023-02-07 at 1.25.27 PM
  26. Lastly, go to App Review > Permissions and Features Screen Shot 2023-02-07 at 1.34.12 PM
  27. Click the 'Request Advanced Access' for the Email and public_profile sections. (Note that there are a couple of verification popups to click through - and that you will likely have to enter your Facebook Password to complete this step).
    Screen Shot 2023-02-07 at 1.40.05 PM
    Screen Shot 2023-02-07 at 1.37.57 PM
  28. Your Facebook Login is now setup!

Test it out by going to your website, clicking "Login". It's a good idea to give it a quick test to make sure that it's working properly. 

Screen Shot 2023-02-07 at 1.47.28 PM