Enable Customer Login with Facebook Account| Customer Setting

4.SHOPLINE_Support_EC_SC.pngIn addition to customers registering as members by Email, we also provide a login function by using a Facebook account, allowing customers to quickly register/login to your store with the one-click button. 

One-click login with the Facebook account is a feature developed by Facebook, which can be completed by installing the Facebook application in the store. We will need to create the Facebook application first and then go back to the store to install it. Since there are many setup steps, please be patient and follow the steps to set it up. If the screen does not match this description or there are related problems, please capture your operation screenshots and provide them to our online consultants to help you confirm.

 

 

Setting Step

Step 1: Enter Facebook for Developers

Please click this link to enter Facebook for Developers and log in with your Facebook personal account, and then click "My Apps" >> "Create App" to start creating a Facebook application.___2020-11-06___5.04.52.png

creat_app.jpg

 

Remind you that if your Facebook account has already built the Facebook app, it will show you a pop-up to choose the options of "How are you using your app?". Please select the third option "Build Connected Experience" to create your app and then follow the steps below to finish the setting.

___2020-11-06___5.05.46.png


Step 2: Create a Facebook App

Please note that "Display Name" will appear during the login process for customers to view. It is recommended that you fill in with your "Store / Brand Name" and your / company contact email. You could also select your Facebook Business Manager account. After filling, then click "Create App".

create_an_app.png

 

A pop-up window of "Security Check" will appear. Please click "Submit" after verification.

 EN_Step4.png


Step 3: Add the "Facebook Login" Application

Next, you will be taken to the page of creating an application. Please find "Facebook Login" and click "Set Up".select_app_product.png

 

After entering the Facebook Login settings page, please choose to use the app in ''Web''.EN_Step6.png


Step 4: Enter the store URL

Please enter your store homepage URL in "Site URL", for example, https://www.test123.com or https://www.test123.com.tw. Please make sure to fill in the securely encrypted URL starting with https: //. After confirming the URL, click the "Save" button in the lower right corner and wait for the application to save the URL. 

EN_Step7.png


Step 5: Enter the settings in the "Basic" of the App

Next, please go to the main panel on the left and enter "Settings" >> "Basic" to complete the settings of the App Domains, Privacy Policy URL, App Icon, Business Use, Terms of Service URL, Category, and Site URL.

 EN_Step8.png

fill1_eng.png

1.App Domains (Required)
This field will require a total of 2 URLs (original domain and URL with subdomain). Please follow the methods below to obtain and paste them, and then press "Enter (Window) / Return (Mac)" on your keyboard to type them in the field. Only when the URL becomes a grey text on a blue background is a correct entry.

  • If your store uses a unique URL, for example, https://www.test123.com
    Please fill in with 2 URLs:
    www.test123.com and test123.com respectively

  • If your store uses a free URL, for example, https://test456.shoplineapp.com
    Please fill in 2 URLs:
    test456.shoplineapp.com and shoplineapp.com respectively

Please change the above "red bold example text" into your store URL links. If you are not sure of your shop's unique URL or free URL, you can go to the front homepage of the store to copy it.

 

2. Privacy Policy URL (Required)
The privacy policy is a statement on how the website will use personal data of Internet users. If the website user agrees on the statement of the privacy policy, it will be effective as a standard form contract. The reveal of "Privacy Terms" in your store is one of the key reviews for applying for payment, Google Advertising, Facebook App and so on.

At the Beginning of 2020, Facebook improved the protection of Facebook accounts and will strictly review the privacy policies of external websites. You are recommended to visit your admin panel and use the text page or advanced page to create a "Privacy Policy" page, then paste the page link to this field. For format and content, please refer to SHOPLINE Sample Store Page (for reference only, please edit according to your actual using, specifications and requirements).

"Privacy Policy" should be included in your page title, while the SEO setting description should have "privacy-policy" as well so that Facebook would identify your page and privacy policy content.

  • If your store uses a unique URL, you will get a similar URL like:
    https://www.test123.com/pages/privacy-policy

  • If your store uses a free URL, you will get a similar URL like:
    https://test456.shoplineapp.com/pages/privacy-policy 

Please change the above "red bold example text" into your store URL links. If you are not sure of your shop's unique URL or free URL, you can go to the front homepage of the store to copy it.

 

3. User Data Deletion (Required)

If the field is blank, please enter the homepage URL, for example, https://www.test123.com or https://www.test123.com.tw. Please make sure to fill in the securely encrypted URL starting with https: //.

 

4. Category (Recommended)
Please select the appropriate option from the menu according to the type of your store or services offered in your store. 

 

5.Terms of Service URL (Recommended)
This URL link will be displayed in the "App Terms" of the Facebook login application window. We will advise you to edit the default page of your store, "Terms and Conditions" and describe your service policy and transaction details based on your actual situation. Then, place the pagination URL link in this field. 

 

6. App Icon (Recommended)
The App Icon will appear in the customer login process along with the "Display Name". We will suggest that you upload the store logo or brand icon for customers to reduce their concerns about fraud or informal channel collection of user information. Facebook recommends uploading images with a size of 1024 x 1024 pixels and file size of 5MB.

 

7.Business Use (Recommended)

  • If you run your own store, please click "Yourself or your own business".
  • If you are an agent/agency operator for other businesses, please click "Clients".

8. Website URL (Required)
Next, please slide down to the "Website" section. If the field is blank, please enter the homepage URL again, for example, https://www.test123.com or https://www.test123.com.twPlease make sure to fill in the securely encrypted URL starting with https: //. Click the "Save Changes" button in the lower right corner after confirmation. web_url.png


Step 6: Go to "Facebook Login" >> "Settings"

Next, please proceed to the main product panel on the left and enter the "Client OAuth Login Settings" in the "Facebook Login" >> "Settings" of the application.

EN_Step11.png

1. Turn on the designated function switch
Please enable the following 4 function switches. You can compare and confirm with the figure below after setting.

  1. Turn on  ''Client OAuth Login''
  2. Turn on  ''Web OAuth Login''
  3. Turn on ''Use Strict Mode for Redirect URIs''
  4. Turn on "Enforce HTTPS"
    EN_Step12.png


2. Enter the link in ''Valid OAuth Redirect URIs''

Please follow the instruction below and paste the corresponding link to the "Valid OAuth Redirect URIs" column. Press "Enter (Window) / Return (Mac)" on your keyboard afterward. When the URI becomes a grey text on a blue background, it means you have input successfully.

  • If your store uses a unique URL, for example, https://www.test123.com
    Please paste:
    https://www.test123.com/users/auth/facebook/callback

  • If your store uses a free URL, for example, https://test456.shoplineapp.com
    Please paste:
    https://test456.shoplineapp.com/users/auth/facebook/callback

Please change the above "red bold example text" into your store URL. If you are not sure of your unique URL or free URL, you can go to the front homepage of the store to copy it. 

After completing the settings, please click the "Save Changes" button in the lower right corner.

EN_Step13.png

Important Note: After submission, please check again whether the "Use Strict Mode for Redirect URIs'" switch is turned off ("Off" status). If it is turned off ("Off" status), please turn it on (change the status into "On ") and press" Save Changes " again.


Step 7: Confirm Application Status

Please check the "Switch" next to the "Application ID" at the top of the App page. The switch should be "Live" so that the application can be used. (If the switch is off, it will show '' In Development'' status.)
EN_Step14.jpg

When you turn on the switch, please click '' Switch Mode'' to set your application active. If the application is turned off, customers will not be able to log in to the store with their Facebook account!

EN_Step7-2.png


Step 8: Prepare to enter information in the store backend

Please check the main panel on the left, go to "Settings" >> "Basic" and click the "Show" button next to "Application Secret" to display the full codes. Copy the "App ID" and "App Secret", and return to your SHOPLINE store panel for set-up!EN_Step15.jpg


Step 9: Go Back to SHOPLINE Store Settings

After going back to your SHOPLINE store panel, please go to "Settings" >> "Customer Settings", look for the "Customer Facebook Login" field and turn on the function.
Then, paste the "App ID" and "App Secret" codes to the corresponding fields. When you are finished, please click the "Update" button in the lower right corner to save the settings. Your customers can use the Facebook login function after completing the above steps.EN_Step16.png


Step 10: Check If You Can Use Facebook Login Function

Congratulations! Set-up has been done and finally you can check it in your storefront!

Please enter the member login page of your store, click the ''Log in with Facebook" button and a Facebook window will pop up for requesting customers to log in and authorize your login application (app display name and icon appear here). Customers must authorize the Facebook login application to access data so that they can use the Facebook login function. If the customer chooses not to authorize, the Facebook login function cannot be used.

EN_Step17.jpg

There are many steps to set up for this function. If you have any questions about the App and login setting, please take a screenshot of the issue and send it to online consultants. We will assist you as soon as possible. 

 

 

 

 

 

Have more questions? Submit a request

Comments