Facebook Account Quick Registration / Member Login (New)

4. EC + SC (EN).png

Your customers can utilize the one-click quick registration/ login feature of their Facebook accounts to access your store besides email. The one-click login using a Facebook account is a feature developed by Facebook, which requires you to install the Facebook application into the store. You need to create a Facebook application first and proceed with the installation in the SHOPLINE Admin.

Due to the multiple setup steps involved, we kindly ask for your patience in following the instructions below for the configuration process. If you encounter any discrepancies between the screens displayed and the instructions provided, please capture screenshots of your screen actions and provide them to SHOPLINE's Online Merchant Success Team for troubleshooting.


*Notes:

  1. The Facebook application is an asset created by your company through a personal Facebook account and does not belong to SHOPLINE. Please pay attention to the permissions and usage conditions, especially the annual notices and data audits by Facebook. If you receive a "Data Use Checkup (DUC)" message from Facebook in the app inbox in the future, please respond within the specified deadline to prevent your app from being disabled by Facebook.
  2. If you have created the Meta for Developers Facebook app for your store before 1 June 2023, please refer to Facebook Account Quick Registration / Member Login
  3. If you wish to learn more about the FAQs and troubleshooting methods related to quick registration/ login using a Facebook account, please refer to this article.

 

This article will cover the following:

 

1. Steps to set up Facebook Login

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

*Note: The Meta for Developers app 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. As per Step 12, add your store's personnel-in-charge as app administrator for subsequent maintenance and management.

Screenshot

Screenshot

If you haven’t created any app before this, upon clicking My Apps, you will see a page that says "No apps yet" to invite you to create your first app.

Screenshot

 

Step 2. Create a Facebook app

After clicking 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

Select which platform you will use for your app and click Next to continue.

Screenshot

The field “Add an app name” is required. It is suggested to enter a “Store or Brand name”. “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

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

Screenshot


Step 3. Add the "Facebook Login" app

Next, you'll be directed to "Dashboard." Find Products to the left of the page and click it.

Screenshot

On the right of the "Facebook Login" block, click on the drop-down menu and select [Configure] > [Quickstart].

Screenshot

Choose Web as the platform for your app.

Screenshot


Step 4. Enter your store URL

Please input your store's homepage URL in the "Site URL" field, such as "https://www.test123.com" or "https://www.test123.com.tw". When you confirm, click Save and wait for the app to access the URL.

Screenshot

*Note: Be sure to fill in the secure encrypted URL starting with "https://".


Step 5. Basic settings

Go to "Dashboard" on the left side and navigate to [Settings] > [Basic] to complete the following fields: "App domains," "Privacy Policy URL," "App icon (1024 x 1024)," "User data deletion," "Terms of Service URL," "Category," and the "Website" field that appears as you scroll down. The items numbered 1 to 7 below will be explained respectively.

Screenshot

Screenshot


1. App domains (Required)

Screenshot

This field requires a total of 2 URLs (naked/root domain & URL including a subdomain). Please follow the instructions below to obtain the URLs and paste them separately. After pasting each URL, press "Enter (Window) / Return (Mac)" on your keyboard. The URL will be displayed in the gray box to indicate a successful input, as shown in the image below.

Screenshot

  • If your store applies a "unique URL": https://www.test123.com 
    Please fill in 2 URLs: www.test123.com and test123.com 

  • If your store applies a "free URL": https://test456.shoplineapp.com
    Please fill in 2 URLs: test456
    .shoplineapp.com and shoplineapp.com

Please change the above links in bold orange to your store URL links. If you are unsure of your store's unique URL or free URL, go to your store's homepage to copy it.

*Note: Please fill in your store's URL instead of the official website URL of SHOPLINE.

 

2. Privacy Policy URL (Required)

Screenshot

The privacy policy is a statement that explains how a website will handle the personal data of its users. Having a disclosed "Privacy Policy" in your store is one of the requirements for payment gateway review, Google ad placement review, and Facebook app review.

First, return to SHOPLINE's Admin > [Online Store Design] > [Pages] (see the image below) to obtain the URL of your store's "Privacy Policy" page, and paste it back to the field here.

Screenshot

If you haven't created a Privacy Policy page yet, you can either choose to use the default "Privacy Policy" page (A) or create a new page (B):

A. Use the default "Privacy Policy" page

You can refer to SHOPLINE Sample Store Page to supplement relevant information (please write according to actual regulations and requirements). Once you have completed the setup, fill in the URL into the "2. Privacy Policy URL" field.

  • If your store applies a "unique URL," you'll get a URL similar to:
    https://www.test123.com/about/privacy-policy

  • If your store applies a "free URL," you'll get a URL similar to this one:
    https://test456.shoplineapp.com/about/privacy-policy

Please change the above links in bold orange to your store URL links. If you are unsure of your store's unique or free URL, go to your store's homepage to copy it.

*Note: Please fill in your store's URL instead of the official website URL of SHOPLINE.

 

B. Create a new page

Click on ⊕ Text Page or ⊕ Advanced Page to create a "Privacy Policy" page. For format and content, you may refer to SHOPLINE Sample Store Page (please write according to actual regulations and requirements, and remember to specify the "Data access and deletion" information).

Screenshot

*Note: If your store is currently using 
"Facebook Account Quick Registration / Member Login"
and has previously provided a 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,
go to Meta for Developers and
pages that contain the old privacy policy
to manually update it with the new URL.

Please ensure that the SEO "Title" of that page includes the words "Privacy Policy" and the "Descriptive URL" contains "privacy-policy" to make it easier for Facebook to identify the page as having relevant privacy-related content. Next, fill in the URL in the "2. Privacy Policy URL" field.

  • If your store applies a "unique URL," you'll get a URL similar to this one:
    https://www.test123.com/pages/privacy-policy
  • If your store applies a "free URL," you'll get a URL similar to: https://test456.shoplineapp.com/pages/privacy-policy

Please change the above links in bold orange to your store URL links. If you are unsure of your store's unique URL or free URL, go to your store's homepage to copy it.

*Note: Please fill in your store's URL instead of the official website URL of SHOPLINE.


3.
App icon (Required)

Screenshot

The app icon will appear along with the "Display Name" in the customer login process. SHOPLINE recommends uploading your store's logo or brand icon to fully present your brand and reduce customer concerns about it being a fraudulent or unofficial channel for collecting user data. Facebook requires uploading an image with dimensions between 512 x 512 and 1024 x 1024 pixels and a file size of up to 5MB.

 

4. User data deletion (Required)

Screenshot

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


Screenshot

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://".

 

5. Terms of Service URL (Optional)

Screenshot

This URL link will be displayed in the "App Terms" of the Facebook login application window. SHOPLINE recommends editing your store's default page for "Terms and Conditions" and describing your store's service offerings and transaction details based on actual circumstances. Once completed, paste the page URL in this field.

 

6. Category (Required)

Screenshot

Please select the appropriate option from the "Choose a category" drop-down menu based on the type of products or services your store provides. If your online store primarily sells products, it is recommended to choose Shopping.

 

7. Website (Required)

Screenshot

Scroll down to the "Website" section. Normally, the system will automatically populate the URL. However, if the field is blank, please re-enter your store's homepage URL, such as "https://www.test123.com" or "https://www.test123.com.tw". Be sure to fill in a secure encrypted URL starting with "https://". Upon confirmation, click Save changes at the bottom right.

 

Step 6. Complete "Facebook Login" settings

Path 1: Go to [Products] > [Added products (X)]Click the "Configure" drop-down menu next to "Facebook Login" and select Settings.

Screenshot

 

Path 2:

  1. Go to [Build your app] > [Use cases]. Click the Customize button next to "Authentication and account creation". Screenshot 2023-11-06 at 12.06.23 PM.png
  2. Under the "Facebook Login" section, click Go to settings.
    Screenshot 2023-11-06 at 12.07.47 PM.png

Upon entering the page, please refer to the following two points:

i. Switch on designated function toggles

Enable the following 4 toggle switches (ensure that the switches display as "Yes") and compare them to the image below for confirmation.

  • Switch on "Client OAuth login"
  • Switch on "Web OAuth login"
  • Switch on "Enforce HTTPS"
  • Switch on "Use Strict Mode for redirect URIs"

Screenshot

 

ii. Enter the link into "Valid OAuth Redirect URIs"

Follow the instructions below to obtain the link and paste it into the "Valid OAuth Redirect URIs" field. After pasting the link, press "Enter (Window) / Return (Mac)" on your keyboard. The URI should turn blue to indicate successful input, as shown in the image below. Once you have completed the setup, click Save changes at the bottom right. Please note that upon submission, double-check if the "Use Strict Mode for redirect URIs" toggle is switched off (displayed as "No"). If it is switched off, you need to switch it back on and click [Save changes] again.

  • If your store applies a "unique URL": https://www.test123.com 
    Please paste: https://www.test123.com/users/auth/facebook/callback  

  • If your store applies a "unique URL": https://test456.shoplineapp.com
    Please paste: https://test456.shoplineapp.com/users/auth/facebook/callback

Please change the above links in bold orange to your store URL links. If you are unsure of your store's unique or free URL, go to your store's homepage to copy it.

*Note: Please fill in your store's URL instead of the official website URL of SHOPLINE.

Screenshot

 

Step 7. Check the status of use cases

Go to "App Review" and click on Request Permissions or Features.

Screenshot


Click Edit on the right of the "Authentication and account creation" block.

Screenshot


Ensure that on the "Use case permissions" page, you have two options "email" and "public_profile" available.

Screenshot

*Note: Apart from these two options, do not add any other options here to avoid additional document verification during the business verification process by Facebook. Adding more options may lead to further compliance requirements and potentially impact the business verification process.

 

Step 8. Complete business verification

As of 1 February 2023, business verification is required if your app needs advanced-level access. Upon verification, Facebook will automatically update the status of use case permissions.

Go to "Dashboard" on the left, find "Verification," click on Start Verification, and complete the process as per instructions.

Screenshot


Once you've completed verification, a green circle indicating "Verified" will be displayed within the "Business verification" block, which means your store has been successfully verified by Facebook.

image_720.png

 

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

eef727b5362a07d85d7e574fb4fe1c767dbe67dd.png

 

Step 9. Check application status

Go to "Dashboard" and click Go live to check if "Privacy policy URL," "Data deletion URL," "Platforms," and "Category" are all set. Once the "Business verification" block displays a green circle indicating "Verified," click on Go live at the bottom right to activate the app.

*Note: If you haven't completed business verification, please click [Complete verification] at the right of the block. 

Screenshot


Next, scroll down the page and click on Review next to "Facebook Login" to review your options and the app's review permissions before your app goes live. As you enter the page, follow Step 7 and click Edit located on the right side of "Authentication and account creation."

Screenshot


On this "Use case permissions" page, the status of "email" and "public_profile" should both be "Ready for Live mode."

image_720-1.png

 

Step 10. Have your App ID and App secret ready

Go to [Dashboard] > [Settings] > [Basic] and click Show on the right side of "App secret." For account security, the system will require you to re-enter your password. Once entered, "App secret" will be visible. Copy "App ID" and "App secret" and proceed to the SHOPLINE Admin for configuration.

Screenshot

 

Step 11. Return to SHOPLINE Admin for configuration

Path 1

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

Screenshot


Paste the "App ID" and "App Secret" into their respective fields. Click on Connect and then click the Update button at the bottom right of the page to save the settings. Your store will now be able to access the Facebook Login feature.

Screen

 

Path 2

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

Screen


Paste the "App ID" and "App Secret" into their respective fields and click Connect.

Screen


Switch on the "Online Shop Facebook Login" toggle, and your store is now able to access the Facebook Login feature. 

Screen

 

Step 12. Add relevant colleagues as administrators to your Facebook account

You can add relevant personnel from your company as administrators of this app for future maintenance and management. Go to "Dashboard" > [App Roles] > [Roles], click on Add Administrators on the right side of "Administrators," enter the name, fbid, or username of the person you want to add, and finally click on Submit.

Screenshot


Step 13. Test the Facebook account one-click registration/ login feature

Congratulations on completing the setup! Now, proceed to your storefront to perform the testing.

Go to the registration/ member login page of your store and click on the "Facebook Register/Login" button. A Facebook window will pop up, requesting customers to log in and authorize your app. The app's display name and icon will be shown here on this page.

At this point, customers must authorize the Facebook Login application to access their data in order to use the Facebook Login feature. If customers choose not to grant authorization, they will not be able to use the Facebook Login feature.

EN_Step17.jpg

*Please be reminded again that as this feature involves many setup steps, should you encounter any issues during the configuration process, feel free to take screenshots of the problematic areas and provide them to SHOPLINE's Online Merchant Success Team. We will assist you promptly in resolving the issues. 

 

2. The Facebook Login button on checkout pages

Please ensure that the "Online Shop Facebook Login" feature has been enabled for your store. For further details, you can refer to Step 11.

Regardless of which path above is chosen, the following pages will display the "Facebook Login" button, and customers will be able to log in directly by clicking this button:

*Notes:

i. Member Sign up / Sign in page

Screen

 

ii. Checkout page in general: Shopping Cart & Customer Info

fbloginbtncart.png

fbloginbtncheckout.png

 

iii. Express checkout page

fbloginbtnfastcheck.png

 

 

 

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments