Facebook Account Quick Registration / Member Login – SHOPLINE Help Center

Facebook Account Quick Registration / Member Login

4. EC + SC (EN).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 the Facebook login feature

Step 1. Enter Meta for Developers

Click this link to enter Meta for Developers and log in with your personal Facebook account. Go to [My Apps > Create App] to begin creating a Facebook application.


*Note: The Meta for Developers application is bound and created under a personal account. To avoid potential conflict of access permission in your company’s internal personnel, you are recommended to use your company’s Facebook personal account for convenience. Also, pay attention to Step 12 to add your company personnel-in-charge as the administrator of the application for subsequent maintenance and management.

Screenshot_2023-05-23_at_5.37.27_PM.png

Screenshot_2023-05-23_at_5.44.15_PM.png

 

Please be reminded that if you haven’t created any app before this, upon hitting My Apps, it will show you a page that says “No apps yet” to invite you to create your first app.

Screenshot_2023-05-23_at_5.18.41_PM.png

 

Step 2. Create a Facebook App

After clicking on Create App, you will be asked “Which use case do you want to add to your app?” Select Set up Facebook Login then click Next.

Screenshot_2023-05-23_at_5.18.59_PM.png


Select which platform you will use for your app. Upon completion, click Next to continue.
Screenshot_2023-05-23_at_5.19.10_PM.png

The field “Add an app name” is required. It is suggested that a “Store or Brand name” be entered here. “App contact email” will be automatically filled in with the email address associated with the account as you access this page. If you have a Meta Business Manager, you can also select a platform via “Business Account” in the optional field to manage your app. Next, click Create app.
Screenshot_2023-05-23_at_5.19.20_PM.png

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

Screen_Shot_2022-06-28_at_12.04.45_PM.png

 

Step 3. Add the "Facebook Login" Application

Next, you will be directed to “Dashboard.” Find Products on the left side of the page and click on it.

Screenshot_2023-05-23_at_5.42.32_PM.png


On the right side of the “Facebook Login” block, click on the drop-down menu and select Configure > Quickstart.
Screenshot_2023-05-23_at_5.43.02_PM.png

Choose Web as the platform for your app.

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

First, go to [Online Store Design] > [Pages] in the Admin to look up the URL of the privacy policy page. Then, paste the URL here:

basic_settings_EN__1_.png

If you do not have a privacy policy page, you can use the default "Privacy Policy" page or create a new one.

A. Using the default "Privacy Policy" page

For format and content, please refer to SHOPLINE Sample Store Page (please edit according to your actual use, specifications, and requirements). After the setup, enter the URL on the "2. Privacy Policy URL" block.

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

Screen_Shot_2023-01-05_at_11.48.05_AM.png

 

B. Create a new "Privacy Policy" page

Click on + Text Page or + Advanced Page to create a "Privacy Policy" page. For format and content, please refer to SHOPLINE Sample Store Page (please edit according to your actual use, specifications, and requirements, and remember to specify the "Data access and deletion" information).

The term "Privacy Policy" should be included in your SEO page title, while the descriptive URL should include "privacy-policy" so that Facebook would easily identify your page and privacy policy content. After the setup, enter the URL on the "2. Privacy Policy URL" block.

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

Screen_Shot_2023-01-05_at_11.57.47_AM.png

*Note: If your store is currently using 
"Facebook Account Quick Registration / Member Login,"
and has previously provided descriptive URL with
"privacy-policy" to Facebook,
please do not delete the old privacy policy page
to avoid disabling the login feature.
If you want to delete the old privacy policy page
and shift to the default/new privacy policy page,
please go to "Meta for Developers" and
pages that contain the old privacy policy
to manually update it with the new URL.

 

3. User Data Deletion (Required)

Select "Data deletion instructions URL" from the drop-down menu. 

In the "You can also provide a link" field below the drop-down menu, enter your store's homepage URL, like "https://www.test123.com" or "https://www.test123.com.tw". Make sure to fill in a secure encrypted URL starting with "https://".

截圖 2024-04-24 下午2.16.41.png

 

4. Category (Required)

Screen_Shot_2023-01-05_at_12.09.02_PM.png
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)

Screen_Shot_2023-01-05_at_12.10.46_PM.png
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)

Screen_Shot_2023-01-05_at_12.11.20_PM.png 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. Complete business verification

Since 1 February 2023, business verification is required if your app requires advanced-level access.

Scroll down the page to the "Business Verification" section, and follow the instructions to complete the verification.

Screenshot_2023-02-24_at_2.19.46_PM.png

*Note: If you have not completed the business verification, when the customer quickly registers/logs in with the Facebook account at the storefront, it will display "Some of the following permissions below have not been approved for use by Facebook."

eef727b5362a07d85d7e574fb4fe1c767dbe67dd.png

 

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

Screen_Shot_2023-01-05_at_12.15.03_PM.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 8. 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 9. 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 10. 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 11. 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 12. 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 13. Check the Facebook login function

Congratulations! The setup 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 this feature. If you have any questions about the App and login settings, 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. 

*Notes:

  • The setup steps above do not apply to the setting up of the Facebook login button Shopper App.
    If you want to show the Facebook login button on the Shopper App, please refer to
    Facebook account quick registration / member login|Shopper App.
  • 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