Facebook Login

Configure Facebook Login Plugin with Yo!Kart

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

facebook login plugin settings - yokart admin panel

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.

facebook developers website homepage - yokart third party plugins

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.

facebook developers website dashboard - yokart third party plugins

Step 3: Go to the Apps Page

The admin will be redirected to the Apps page. Click on the Create an App button. 

My Apps page on Facebook for developers - yokart admin panel

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

create an app page - yokart third party pluginsClicking 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:

add app details form - yokart third party plugins

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

securoty check box - yokart third party plugins

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. 

facebook side navigation options settings - yokart third party plugins

The admin will be redirected to a form displaying all details of the newly created App.

app id and details form - yokart third party plugins

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.  

verification and protection page - yokart third party pluginsSelect 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.
select platform window - yokart third party plugins

Step 9: Add the Website URL

In Site URL, add the full marketplace's URL with https and possibly www or the subdomain:

website url form - yokart third party plugins

  • If the admin is using a main domain, it could be: https://www.<domainname>.com, or
    https://<domainname>.com.
  • 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.

facebook side navigation add products option - yokart third party pluginsClick on the Setup button provided under Facebook Login

add a product option page - yokart third party plugins

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.

web platform form - yokart third party plugins

Leave the form like this and go to the left hand menu and click on Facebook Login and then click on Settings.

facebook side navigation facebook settings option - yokart third party plugins

The Client OAuth Settings page will open.

Check whether the following settings are correct:

Client OAuth settings - yokart third party plugins

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

app live on off toggle on facebook - yokart admin panel

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.

app settings form - yokart third party pluginsThis 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.