Table of ContentsSteps to Configure the Facebook Login PluginStep 1: Log Into Facebook Developers WebsiteStep 2: Meta for Developers HomepageStep 3: Go to the Apps PageStep 4: Create an AppStep 5: Add Details of the AppStep 6: Complete the Security CheckStep 7: Go to Settings from the DashboardStep 8: Add Platform to Add the WebsiteStep 9: Add the Website URLStep 10: Add a ProductStep 11: Share Information about The WebsiteStep 12: Generate the App ID and App Secret Keys
In a marketplace, users can create a 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. Their profile picture is automatically imported from Facebook. Yo!Kart provides the settings to enable Facebook Login for users when signing up.
These settings are provided in System Settings > Plugins > Social Logins > Facebook Login > Settings.
Steps to Configure the Facebook Login Plugin
The admin needs to enter App Id* and App Secret* to configure the Facebook Login plugin. Admin must follow the below steps to collect these two keys:
Step 1: Log Into Facebook Developers Website
Visit the Facebook Developers website at https://developers.facebook.com/. The admin will be redirected to the Facebook for Developers page.
Click on the Log In button to proceed further or Create an account in case the admin doesn't have one already (The admin may have to register as a developer). Follow the steps and create the account.
Step 2: Meta for Developers Homepage
After logging in, the admin will be redirected to the homepage. Click on the My Apps button to proceed on to the next step.
Step 3: Go to the Apps Page
The admin will be redirected to the Apps page. Click on the Create an App button.
Step 4: Create an App
A new form will appear from which the admin must choose the purpose for which they are creating the app (Recommended None).
Clicking on the Next button will redirect the admin to the second part of the form.
Step 5: Add Details of the App
This is the Create an App Id form, in which the admin must enter:
- Display Name: A new app name.
- App Contact Email: Their valid email address to be linked with their account.
- Business Account?: Select a Business Manager Account if already created. A new Business Manager Account can be created later as well.
After entering all the necessary details, click on the Create App Id button to proceed further.
Step 6: Complete the Security Check
A Security Check pop-up box will appear in which the admin must complete the security check step and then click on the Submit button.
Step 7: Go to Settings from the Dashboard
The admin will be redirected to Dashboard. From the side-navigation bar, the admin must go to the Settings module and then click on the Basic option.
The admin will be redirected to a form displaying all details of the newly created App.
In App Domains, the admin must add all the domains from which they want the Facebook login to work, i.e. all the marketplace domains. If the admin is moving between a subdomain and a custom domain, it's best to add both here to ensure that the Facebook login keeps working even when the domain changes. The domains must be added without https or www or subdomain:
- For your custom domain, the domain could be: <domainname>.com
- For your subdomain (in a trial or Starter), the domain could be: <sub-domainname>.<domainname>.com
Step 8: Add Platform to Add the Website
Click on the Add Platform button that is provided at the bottom when reaching the last segment of this form. Select the Website option from the Select Platform pop-up box. A Website section will appear.
Select the Website option from the Select Platform pop-up box and click on the Next button. With this, a Website section will appear in the above form at the end.
Step 9: Add the Website URL
In Site URL, add the full marketplace's URL with https and possibly www or the subdomain:
- If the admin is using a main domain, it could be: https://www.<domainname>.com, or
- If the admin is using a sub-domain, it could be: https://<sub-domainname>.<domainname>.com
Click on the Save Changes button provided below.
Step 10: Add a Product
Click on the Add a Product option from the side-navigation bar.
Click on the Setup button provided under Facebook Login.
Select the Web platform. The admin will be redirected to a new form.
Step 11: Share Information about The Website
Enter the Site URL and click on the Save button and then, click on the Continue button.
Leave the form like this and go to the left hand menu and click on Facebook Login and then click on Settings.
The Client OAuth Settings page will open.
Check whether 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
In the Valid OAuth redirect URIs field, admin must add their marketplace address with the format <DOMAIN>/public/index.php?url=facebook-login/index.
Admin must also check that the section Deauthorize/ Deauthorize Callback URL is empty and then click on the Save Changes button.
Step 12: Generate the App ID and App Secret Keys
From the top bar, the admin can turn the top switch from OFF to ON to make their app live.
On the left hand menu, click on the Dashboard button. The admin’s app should be public (This app is public and available to all users) and a green dot should be displayed.
Once the App ID has been set up and all the settings have been configured, go to the Settings module provided on the side navigation bar and then select Basic.
This page displays both App ID and App Secret. The admin can copy each of them one-by-one and paste them on their Dashboard in the respective input fields.
For the App Secret, when clicking on the Show button, the admin will have to answer a security check before it can be copied.
Click on the Save Changes button once both the keys have been entered on their dashboard.