Facebook Account Quick Registration / Member Login

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 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 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 the annual notices and data audits 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.

This article will cover the following: 

 

1. Steps to set up Facebook login feature

Step 1. Enter Meta for Developers

Please click this link to enter Meta for Developers, log in with your Facebook personal account, and click My Apps > Create App to start creating a Facebook application.

Note: Since the Meta 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.

Screen_Shot_2022-10-06_at_4.35.29_PM.png

Screen_Shot_2022-10-06_at_4.36.20_PM.png

 

Remind you that if your Facebook account has already built the Facebook app, it will show you a pop-up to choose the option of "Select an app type". Please select "Consumer" to create your app and then follow the steps below to finish the setting.

select_type_EN.png

 

Step 2. Create a Facebook App

Enter the App Display Name and App Contact Email. Please note that the "App Display Name" will appear during the login process for customers to view, so it is recommended that you fill in your "Store/Brand" name. If you have a Meta Business Manager, you can also select a platform you use to manage the app in the optional field, then click Create App

create_an_app.png

A pop-up window will appear. Please re-enter your password, and click Submit to continue.

Screen_Shot_2022-06-28_at_12.04.45_PM.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.

Screen_Shot_2022-06-28_at_12.06.20_PM.png

 

After entering the Facebook Login settings page, please choose to use the app on Web.

Screen_Shot_2022-06-28_at_11.09.28_AM.png


Step 4. Enter the store URL

Please enter your store homepage URL in the 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. 

Screen_Shot_2022-06-28_at_11.09.57_AM.png


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

Next, please go to [Settings] > [Basic] in the left panel to complete the settings of the App Domains, Privacy Policy URL, User Data Deletion, App Icon, Terms of Service URL, Category, and Site URL.

basic_settings_EN.png

 

1. App Domains (Required)

basic_settings_EN.png 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 until the URL turns into a gray box.

  • If your store uses a unique URL, for example, https://www.test123.com
    Please fill in 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 text in bold red to your store URL links. If you are unsure 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 to the privacy policy statement, 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 go to [Online Store Design] > [Pages] in the Admin and edit the default "Privacy Policy" page, or create a "Privacy Policy" page with a text or advanced 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.

Screen_Shot_2022-09-13_at_3.11.51_PM.png

Once setup is complete, return to "2. Privacy Policy URL" to enter: 

basic_settings_EN__1_.png

  • 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 text in bold red to 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)

callback_URL_EN.png

Select Data deletion callback URL from the drop-down menu. 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 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 your store's default "Terms and Conditions" page and describe your service policy and transaction details based on your situation. Then, paste the page URL 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 a file size of 5MB.

 

7. Website URL (Required)

Then enter the homepage URL again. 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://. Click Save Changes at the bottom right after confirmation. 

Screen_Shot_2022-06-28_at_12.19.42_PM.png


Step 6: Proceed to [Facebook Login] > [Settings] for setup

Proceed to the main product panel on the left and enter the "Client OAuth Login Settings" in the [Facebook Login] > [Settings] of the application.

Screen_Shot_2022-06-28_at_12.21.14_PM.png

1. Turn on the designated function switches
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''

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 URL 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 text in bold red 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.

 

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 to "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 toggle 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!


Step 9. Prepare to enter information in the store Admin

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 Admin panel for setup!EN_Step15.jpg


Step 10. Go Back to SHOPLINE Store Settings

Method 1

Proceed to SHOPLINE Admin > [Settings] > [Customer Settings] and switch on the toggle to the right of "Facebook Login". 

Screen_Shot_2022-09-13_at_3.31.33_PM.png

Once enabled, copy and paste the App ID and App Secret to the corresponding fields, then click Connect. Then click the Update button on the bottom right to save your settings, and your store will be ready to start using the Facebook Login feature. 

Screen_Shot_2022-09-13_at_3.37.28_PM.png

 

Method 2

Proceed to SHOPLINE Admin > [Channel Integration] > [Facebook] > [Online Store Application] tab. Click the Connect button on the right of "Connect to Facebook Developer account". 

Screen_Shot_2022-09-13_at_3.40.24_PM.png

Paste the App ID and App Secret to the corresponding fields, then click Connect

Screen_Shot_2022-09-13_at_3.44.43_PM.png

Switch on the toggle to the right of "Online Shop Facebook Login", and your store will be ready to start using the Facebook Login feature. 

Screen_Shot_2022-09-13_at_3.46.48_PM.png

 

Step 11. Set colleagues' accounts as administrators

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


Step 12. Check the Facebook login function

Congratulations! Set-up has been done, and you can finally check it on 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 (Your 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. The Facebook login function cannot be used if the customer chooses not to authorize it.

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

Please confirm your store has enabled the Online Facebook Login feature, for more information, please refer to Step 10

Regardless of which method you used above, the following page will display the "Facebook Login" button, and customers will be able to log in directly by clicking the login button. 

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

  1. Member Sign up / Sign in page
    Screen_Shot_2022-09-13_at_3.57.14_PM.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 Meta 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 go to [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 a 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 Meta 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 Meta 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 Meta for Developer.

You should ask the colleagues who originally set up this feature to help log in to Meta for Developer and edit the application. Merchant can also refer to Step 11 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, it 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, 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

 

D. 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 privacy policy description. In case they are incomplete, please refer to the second point in Step 5 (Please refer to the demo store case for writing format, currently available in Chinese only). 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