Learn how to set up FACEBOOK Login through this tutorial video or could follow the steps mentioned below:
In a Panther marketplace, users can create a Panther user account and log in using their Facebook account. When using their Facebook credentials, users don’t need to remember a separate username and password for Panther. Their profile picture is automatically imported from Facebook.
When users create a marketplace account using their Facebook credentials, they need to grant Panther permission to view their Facebook details. By default, users will see Panther as the name of the app that is requesting these permissions. If you would like to show your marketplace’s name and logo instead, you will need to create a Facebook App and configure your marketplace to use this app instead. Creating a Facebook app is free. Follow the instructions below to set this up.
IMPORTANT! When creating a Facebook app for your marketplace, please do NOT add anything that is not specifically indicated in the instructions. Doing so, might create some issues and prevent you from finishing the setup. There are some fields that you may add optionally, like some specific URL’s, but in order to ensure a smooth app creation, it is better to add them after you have finished with the initial setup.
Create and set up a Facebook App
1. Go to https://developers.facebook.com/
2. Create an account (you may have to register as a developer).
3. Make sure you are logged in.
4. Click on the “My Apps” dropdown in the top right corner of the header, next to your profile picture.
5. Click “+ Add a New App”. A popup should appear.
6. Type your app Display Name. For example: “My Great Marketplace”. 7. Enter the contact email of your choice.
8. Click “Create App ID”. You may have to answer a security check.
9. Don’t select a Product or Recommended Product but instead…
10. … In the left-hand menu, click “Settings” then “Basic”.
11. In “App Domains”, add all the domains from which you want the Facebook login to work, i.e. all your marketplace domains. If you are moving between a Panther subdomain and your custom domain, it’s best to add both here to ensure that the Facebook login keeps working even when the domain changes. Add the domains without “https” or “www” or “subdomain”:
– For your custom domain (in the Growth/Premium plan), the domain could be: “mymarketplace.com”
– For your Panther subdomain (in a trial plan), the domain could be: “mymarketplace.pantherapp.com”
12. Click “Add Platform”.
13. Select “Website”.
14. In “Site URL”, add your full marketplace’s URL with https and possibly www or the subdomain:
– If you are on a Growth/Premium plan, it could be:
– If you are on a trial plan, it could be: https://mymarketplace.pantherapp.co”
15. Click “Save Changes” at the bottom right.
If you can’t save because the “App Domains” part complains about “This must be derived from Secure Canvas URL, Unity Binary URL, Site URL, Mobile Site URL or Secure Page Tab URL. Check and correct the following domains: (missingdomain-here.com)”, this is probably because you added two different domains while following the instructions above and only one is based on the current Site URL that you entered. The easiest way to overcome this limitation is to add a Secure Page Tab URL with following steps:
– Click “Add Platform”
– Select “Page tab”
– In “Secure Page Tab URL” add the missing domain (mentioned in the earlier error message) with https, e.g. “https://missing-domain-here.com” – Click “Save Changes”
– If you are on a Growth/Premium plan, it could be: “https://www.mymarketplace.com/infos/privacy”
– If you are on a trial, Starter or Hobby plan, it could be: “https://mymarketplace.pantherapp.co/infos/privacy”
17. Save changes if needed.
18. In the left-hand menu, click “+ Add Product”.
19. In the list, find “Facebook Login” and click “Set Up” for it.
20. Select “Web” (www) in the list of options.
21. Verify that your “Site URL” is correct and click “Save” then “Continue”.
22. In the left-hand menu, click “Facebook Login” then “Settings”.
23. Check that the following settings are correct:
– Client OAuth Login: Yes
– Web OAuth Login: Yes
– Force Web OAuth Reauthentication: No
– Use Strict Mode for Redirect URIs: Yes
– Enforce HTTPS: No (if set to ‘yes’ without possibility to edit leave it as ‘yes’) – Embedded Browser OAuth Login: Yes
– Login from devices: No
24. In the “Valid OAuth redirect URIs” field add your marketplace address followed by /people/auth/facebook/callback :
– If you are on a Growth/Premium plan, it could be: “https://www.mymarketplace.com/people/auth/facebook/callback”
– If you are on a trial plan, it could be: “https://mymarketplace.pantherapp.co/people/auth/facebook/callback”
25. Check that the section “Deauthorize / Deauthorize Callback URL” is empty.
26. Click “Save Changes”.
27. Make sure to enable the below permissions by going to FB Dashboard < App Reviews < Permissions & features.
28. From the top bar, turn the top switch from “OFF” to “ON” to make your app live.
29. Confirm the choice when asked. You may have to select a category and/or answer a security check. Your app doesn’t require an approval from Facebook so you don’t have to go through the submission process.
30. In the left-hand menu, click “Dashboard”. Your app should be public (“This app is public and available to all users”) and a green dot should be displayed. Your app is now created, configured and live. But this isn’t finished yet! You now have to configure it in your marketplace to use it.
Configure your Facebook App in your marketplace
You’ll have to copy some information about your app from Facebook to use it within your marketplace. If you haven’t created an app at Facebook yet, please follow the instructions above.
- Go to https://developers.facebook.com/ and log in.
2. Open the app you created via the “Apps” dropdown.
3. In the left-hand menu, click “Settings” then “Basic”.
4. Copy the value in “App ID”. It’s a long chain of characters (numbers and sometimes letters too).
5. Log in to your marketplace. You must be logged as an administrator.
6. Open the admin panel (“Admin” from under the “Menu” dropdown).
7. In the left-hand menu, click “Social media”.
8. Find the “Facebook Login” section
9. In “Facebook App ID”, paste the value “App ID” you copied earlier.
10. Go back to your app at Facebook, in the “Settings” then “Basic section.
11. Click the “Show” button in the “App Secret” field. You may have to answer a security check.
12. Copy the value in “App Secret”. It’s a long string of letters and numbers.
13. Go back to the “Social media” settings in your marketplace.
14. Paste the copied “App Secret” string into the “Facebook App Secret” field.
15. Click “Save settings”.
That’s it! Facebook Login is now active and set! Users will now see your Facebook App’s details when they create an account or log in to your marketplace using their Facebook credentials.Customize your Facebook App
When users create an account or log in with Facebook Login for the first time, they will be asked to authorize your app. At this point, they will see your Facebook App’s logo. You should customize it to match your marketplace. Doing this helps users trust your app.
1. Go to https://developers.facebook.com/ and log in.
2. Open the app that you created via the “Apps” dropdown.
3. In the left-hand menu, click “Settings” then “Basic”.
4. Upload your App icon in the correct section according to Facebook’s instructions. 5. Click “Save Changes” at the bottom right.