How to Let Customers Login to Your Store Using a Facebook Account

4.SHOPLINE_Support_EC_SC.png

In addition to email, customers can also register with your SHOPLINE store using a Facebook account.

One-click login using a Facebook account is a feature developed by Facebook. Merchants can enable it by installing the Facebook application to 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 Merchant Success Team to help you confirm.

Note: The Facebook application is the assets created by your company through your Facebook personal account, which are not owned by SHOPLINE. Please pay attention to the permissions and usage conditions, especially to the annual notices and data audits issued by Facebook. If you receive a Facebook "data usage check" message in the app inbox in the future, please reply within the deadline to prevent your app from being disabled by Facebook.

 

1. Steps to set up Facebook login feature

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.

Note: Since the Facebook for Developers application is bound and created under a personal account, to avoid potential conflicts in your company’s internal personnel and access permissions, it is recommended to use your company’s Facebook personal account for cooperation. Please also pay attention to Step 11 to add your company personnel-in-charge as the administrator of the application for subsequent maintenance and management.

___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 "Select an app type". Please select the third option "Consumer" to create your app and then follow the steps below to finish the setting.

image.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, User Data Deletion, 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 gray text on a blue background is it 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.

Note: Please fill in your store URL instead of the official SHOPLINE URL.

 

2. Privacy Policy URL (Required)
The privacy policy is a statement on how the website will use the 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 ([Online Store Design] > [Pages]) 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 use, specifications, and requirements).

The term "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.

Note: Please fill in your store URL instead of the official SHOPLINE URL.

 

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 (Required)
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 (Required)
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 (Required)

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

Note: Please fill in your store URL instead of the official SHOPLINE URL.

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 URLs'" 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 data authorization status

Please go to [App Review] > [Permissions and Features] to confirm and enable the email and public_profile options to obtain advanced access permissions.

7.png

Please note that if your application is disabled by Facebook, you will need to complete the Facebook review before you can turn on the advanced access authorization. Please confirm that the application settings are correct and then submit it for re-review to Facebook for confirmation.


Step 8: 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 9: 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 10: 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 11: Set colleagues' accounts as administrators

As the Facebook for Developers application is created and bound to a personal account, to avoid internal operational conflicts, it is recommended to add the Facebook accounts of your co-workers as administrators. 


Step 12: 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

As 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 Merchant Success Team. We will assist you as soon as possible. 

 

2. Facebook login button on checkout pages

Method 1

In the SHOPLINE Admin, go to [Settings] > [Customer Settings] and enable the Customer Facebook Login feature. Paste the Facebook App ID and Facebook App Secret retrieved in Step 10 stated above.

fbloginbtn1.png

 

Method 2

Go to [Channel Integration] > [Facebook] and click Connect to Facebook Development Account. Enter Facebook App ID and Facebook App Secret.

fbloginbtn2.png

 

Then turn ON the Facebook Login & Sign Up toggle.

fbloginbtn3.png

 

After the setup, a "Log in with Facebook" button will appear on the pages listed below. Customers can click the button to sign in with their Facebook accounts. 

*Note: Only customers who have registered through Facebook can use the "Log in with Facebook" button.

  1. Member Sign up / Sign in page
    fbloginbtnlogin.png

  2. Checkout pages: Cart & Fill Information
    fbloginbtncart.png

    fbloginbtncheckout.png

  3. Express checkout page
    fbloginbtnfastcheck.png

 

3. FAQs and troubleshooting

A. If a customer cannot log in with Facebook, how can I help?

  • The error message "Feature Unavailable" appears:

Since Facebook reviews and updates the app from time to time, it is recommended that merchants can return to the Facebook for Developers store app regularly, check the "Inbox" in the "Alerts" on the left to view the latest Facebook reminders, and reply to Facebook according to the message content. (Especially the "App review request" issued by Facebook to you). Merchants can also check the API version in "Settings" >> "Advanced", and pull down the version to select the latest version.

1.png

 

Please be sure to reply to the Facebook data usage in the "Permission and Features" of the application, check the following fields and click Continue to submit your reply, so as not to be disabled by Facebook and your application will not be able to use this login function:

2.png

3.png

 

  • Reminders like "No authorization code" or "access to email" appears

When logging in with Facebook, the store will get access to the customer’s Facebook user name and email to create a membership profile. If a red "no authorization code" notice appears when the customer logs in with Facebook, please instruct the customer to

1) Go to their Facebook account settings to confirm that they have filled in their name and email,

2) Enter the name and the primary contact email in the General Account Settings ([Facebook] > [Settings & Privacy] > [Settings]), and 

3) Allow connecting to the login function in Apps and Websites, and complete the email verification. 

4.png

If you are unable to access authorized emails, please also confirm your [App Review] > [Permissions and Features] and confirm that the email and public_profile options are turned on to gain advanced access permissions so that your store can create membership using customer's Facebook account information:

5.png

 

  • When logging in, it shows that "this app does not have the advanced access to public_profile"

Please go to [App Review] > [Permissions and Features] of the app to confirm that the email and public_profile options are enabled to obtain advanced access permissions.

 

6.png

7.png

  • If the above three conditions have been solved, but the customer still cannot log in, please follow the setting steps in this article to confirm the Settings and "Live mode" of the Facebook application. If you have any questions, please provide screenshots and contact your online consultant.

 

B. I already have the Facebook quick login feature, but why can’t I find my application on Facebook for Developers after logging in? Why is the application number different from the Admin dashboard?

If the store has enabled the Facebook quick login feature, it means that the quick login application has been created. The Facebook for Developers application is bound to a personal Facebook account. Therefore, if you log in with a Facebook account different from the previous person, and the logged-in account does not have the management permissions of the application, you will not be able to find the application in the store in Facebook for Developer.

It is recommended that you ask the colleagues who originally set up this feature to help log in to Facebook for Developer and edit the application. Merchant can also refer to Step 11. Set colleagues' accounts as administrators for smooth operation and management in the future. 

 

C. Why is my application disabled by Facebook? How long should I wait after the appeal?

The operation of the Facebook login function is provided by the store's application. If your application is not completed in accordance with the above settings which causes operation failure or incomplete privacy policy, etc. After detection, Facebook might warn and disable your application (misidentification might occur). It is recommended that you read the content of the message carefully to confirm that your application has been set up completely.

After confirming that your application is in compliance with the requirements and the settings, you can request an appeal through the application. The Facebook login function of your store can only be re-operated after getting passed from Facebook. However, SHOPLINE cannot confirm the time duration of Facebook's review. If the waiting time is too long, you can resubmit the appeal or contact Facebook to confirm the review progress or consider recreating a new application with reference to the steps listed in this article for customers to re-authorize.image.png

QA3-2.png

 

4. I have received a notification from Facebook that my privacy policy is incomplete. How can I fix it?

During the review, Facebook will pay special attention to the application URL field and the description of the privacy policy. In case they are incomplete, please refer to the second point in Step 5: Enter the settings in the "Basic" of the App (Please refer to the demo store case for writing format). Confirm the content of your website's privacy policy page and whether there you have filled in the fields of the application. Please reply to the Facebook message after you have confirmed it and ask them to review it for you again.

mceclip2framed.png

 

 

 

 

 

Have more questions? Submit a request

Comments