Setting up Facebook Login for your store
page last edited on 03 May 2017
To add the “Login with Facebook” feature to your X-Cart store site, complete the following steps:
- Create and configure a new App on Facebook (See Creating a Facebook App).
- Obtain your Facebook App ID and App Secret and enter them on the “Social Login” module settings page in your X-Cart store’s Admin area (See Configuring the Social Login module: Facebook)
Creating a Facebook App
To create an App for Facebook login:
Go to the Apps page of the developers section of Facebook and sign in with your Facebook username and password.
Click on the button + Add a new app:
A popup titled “Create a New App ID” will be displayed.
Enter a name for your App into the Display Name field (this will be the user-facing name of your App; using your store name is recommended). In the Contact Email field, provide a valid email address (will be used for important communication about your app). Select the category “Apps for Pages”. Click Create App ID.
On the App Products screen select Set Up for the Facebook Login product:
Choose the Website platform:
This will start a wizard that will help you to complete your app configuration.
On the first step of the wizard enter your site URL and click Save and Continue:
The next steps are already integrated in the Social Login module, you can skip them.
Scroll to the page top and use the Settings -> Basic section to see the app details:
Copy-paste your App ID and App Secret to use later in the configuration of the Social Login module. Make sure the following fields are filled in with your X-Cart site info:
- App Domains
- Terms of Service URL
In the Facebook Login -> Settings section specify the value of the Valid OAuth Redirect URIs field. It should be of the kind - https://YOUR_XCART_STORE_URL/?target=social_login&action=login&auth_provider=facebook
Make sure your store is configured to use HTTPS (X-Cart Admin -> System Tools -> HTTPS Settings). Otherwise the Facebook Login feature won’t work.
As your app is now in development mode, to go live with your app, you need to switch the mode to live. To do so, switch ON the selector near to the Status: In Development to make your app available to the general public:
In the opened popup, select a Category in a drop-down and click Confirm:
Your app is now published:
That is all. Your Facebook App has been configured.
Configuring the Social Login module: Facebook
Once you have created and configured your Facebook App, you will need to obtain two pieces of information: your Facebook App ID and App Secret. These will need to be entered in X-Cart so the module can connect to the App you created on Facebook and generate the Facebook login widget code correctly.
The Facebook App ID and App Secret can be found on the Settings -> Basic page for your App (You will need to click the Show button and enter your password to reveal the App Secret):
We recommend opening your X-Cart Admin interface in a separate browser tab or window so you can copy and paste the App ID and App Secret values from Facebook to X-Cart.
To configure the module:
In the Installed Modules section of your X-Cart store’s Admin area, locate the entry for the Social Login module and click the Settings link below it:
This opens the “Social Login” module settings page:
On the “Social Login” module settings page, complete the Facebook App ID/API Key and Facebook App Secret fields with the Facebook App ID and App Secret values you obtained on Facebook.
The “Social Login” module can also requests user location information, which requires additional approval from Facebook. This allows X-Cart to fill the address automatically upon user login (in case user has specified his location on the Facebook). You can disable this feature by using the Request user location checkbox.
After you’ve configured the Facebook section, click the Submit button near the bottom of the page to save the changes.
The “Login with Facebook” feature should now be enabled.
Help make this document better
This guide, as well as the rest of our docs, are open-source and available on GitHub.