Apps Built By Commerce7

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/
  2. If you are already logged into Facebook, you will be taken directly to the Developer app dashboard (go to Step 3). If you are not already logged into Facebook, you will be required to enter in your FB credentials first. 
    Screen Shot 2023-08-14 at 3.09.54 PM

  3. 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
  4. Choose the Allow people to log in with their Facebook Account option and click Next.
    Screen Shot 2023-08-14 at 3.16.12 PM
  5. 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
  6. When you are finished, select Create AppScreen Shot 2023-02-07 at 12.42.05 PM
  7. You will be asked to enter your Facebook Login Password to continue.
  8. Choose Products by clicking the forward symbol on the right.
    Screen Shot 2023-08-14 at 3.25.11 PM
  9. Choose Quickstart.
    Screen Shot 2023-08-14 at 3.25.51 PM

  10. Next, select WebSpectra-Winery-Login-Facebook-Login-Facebook-for-Developers
  11. 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
  12. Once you have entered the Site URL to the field, select Save and Continue

    Screen Shot 2023-02-07 at 12.49.42 PM
  13. On Step 2, simply select Next
    Screen Shot 2023-02-07 at 12.52.01 PM
  14. On Step 3 scroll down to select Next again. Screen Shot 2023-02-07 at 12.53.55 PM
  15. On Step 4 select Next again. Screen Shot 2023-02-07 at 12.55.10 PM
  16. 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
  17. Now go back to Commerce7 Admin and select the Apps & Extensions tab.
  18. Click on the Extensions tab at the top of the page.
  19. Select the Facebook Login extension. 
  20. Click Add Extension at the top right of the page.
    Screen Shot 2023-02-07 at 12.59.58 PM
  21. 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
  22. Almost done! Back in Facebook, click on Settings > Basic.
  23. On this page, in the Privacy Policy URL and User Data Deletion fields enter your website URL and add "/legal" to the end. 
  24. Under the Category section use the drop down menu to select Business and Pages. Save Changes. Screen Shot 2023-02-07 at 1.16.15 PM

  25. Next, go to App Review and click on the Permissions and Features button.
  26. Click the Add button for the Email and public_profile sections. You want them both to be in 'Ready for testing' Status.
  27. Click the Go Live link in the lower left.
    Screen Shot 2023-08-14 at 3.49.57 PM
  28. Next, click the Blue Go Live button in the lower right.
    Screen Shot 2023-08-14 at 3.50.59 PM
  29. If you are already a verified business with Facebook, then you can proceed to the next step below.
    If you are not a verified Business with Facebook, you will see the following popup. Follow their instructions to become verified by clicking on the 'Learn more' link. Once verified, click the Go Live links again as described above. 
    Screen Shot 2023-08-14 at 4.02.13 PM 
  30. You should now see that it's in (blue) 'Live' mode at the top of the page.
    Screen Shot 2023-02-07 at 1.25.27 PM

  31. 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