How to create an online store in Facebook with Shop-Script

With Shop-Script, you can create an online storefront directly inside Facebook. Your product catalog and checkout process will be displayed within Facebook. All storefront pages will match the style of other Facebook pages so that customers perceive your storefront as a part of the social network.

Shop-Script & Facebook

The setup consists of 2 major steps:

  1. Setting up a Facebook storefront in Shop-Script.
  2. Creating an app in your Facebook account.

1. Setting up a Facebook storefront in Shop-Script

Install an SSL certificate for your domain name. It’s a requirement of Facebook.

If you are a user of Webasyst Cloud, then you already have an SSL certificate free of charge for domain name ***.webasyst.cloud. You can use that default domain name to create a fully functional online storefront in Facebook without registering a personal domain name at .COM, .ORG, or .NET.
  1. Create an account in Webasyst Cloud or install and set up Shop-Script according to the instructions.
  2. Install design theme Facebook via Installer app in your Webasyst account. That theme was specially created to make the storefront appear as part of the Facebook interface.
  3. Open “Structure” section in Site app and add a new rule for “Shop” app. When adding a rule, specify the following URL mask: facebook/*



  4. Enable the "Hidden settlement" option, select other parameters for the Facebook storefront, and save the changes.
  5. In Store app’s section “Storefront → Pages” add a new page for Facebook storefront, with Facebook users privacy policy. Copy the URL of the new page, you will need it to publish your Facebook app for all users.

Open the URL of the created Facebook storefront to ensure that the above instructions have been completed correctly and this extra storefront is indeed styled in accordance with the social network design.

2. Setting up a Facebook application

Extend your Facebook account status to the developer level if you do not have that status yet.

a. Create a Facebook page for your online store

To publish your store in the social network, create a Facebook page for it. This kind of page is similar to a personal Facebook profile page with the exception that it is created for a company/store/club/group rather than for a person. On a Facebook page you can publish various useful information about your store and your company. Here are some examples:

https://www.facebook.com/Webasyst
http://www.facebook.com/Google
http://www.facebook.com/MegaPodarki (an online storefront created using Shop-Script and embedded in a Facebook page tab)

In order to create a Facebook page, open "Create page" section. Select the desired page type (e.g., “Company, Organization or Institution”) and follow the on-screen tips.

Upon creation of a Facebook page, add a tab to the page so that Facebook users can click on it, open your online storefront inside Facebook, and proceed to shopping.

To add a tab, first create a Facebook app with your extra storefront as described below.

b. Create a Facebook app

  1. Open Facebook app management page.
  2. Click “Add a New App”.

  3. Enter an arbitrary name for your app; e.g., your store name, and select a category; e.g., “Shopping”, and click “Create App ID”.

  4. Open section “Settings → Basic”.

    In field “Privacy Policy URL” paste the URL of the Facebook users privacy policy page published in your online store. This is a requirement of the social network to publish an app for all its users.

    Click “Add Platform”.

  5. Select “Facebook Web Games”.

  6. New block “Facebook Web Games” will be added to the app settings page.

    In field “Facebook Web Games URL (https)” paste the URL of your store’s Facebook storefront, with https:// protocol.



    Save app settings.
  7. Copy “App ID” value at the top of the page. You will need it for further setup.

c. Adding a store tab to main Facebook page

  1. On Facebook app editing page, open “Settings → Basic” and click “Add platform”.
  2. Select “Page Tab” option.



    Specify the following value in provided fields:
    Secure Page Tab URL: Copy here the secure URL of the extra Facebook storefront set up in your Shop-Script backend.
    Page Tab Name: Text caption you want to be displayed on the tab. Facebook users will click on this tab to open your Facebook-styled storefront inside the main Facebook page and proceed to shopping.



  3. Save the changes.
  4. Open a new browser tab and paste the following URL to the address bar:

    https://www.facebook.com/dialog/pagetab?app_id=APP_ID&redirect_uri=SECURE_PAGE_TAB_URL
        
    Replace APP_ID and SECURE_PAGE_TAB_URL with the following values:

    APP_ID: your Facebook app’s ID
    SECURE_PAGE_TAB_URL: your store’s Facebook storefront https:// URL

    Example:

    https://www.facebook.com/dialog/pagetab?app_id=1234567890&redirect_uri=https://mydomain.com/facebook/
        

  5. On the page that opens at that URL, select the page name from the Choose Facebook Pages list and click on Add Page Tab.



    Your Facebook-styled storefront appearing in the browser window right after that will mean that the application tab has been successfully added to the main Facebook page.

Here is how an app's tab can appear on your store's main Facebook page:

d. Connect your design theme to Facebook app

Open the list of your Facebook apps at https://developers.facebook.com/apps/. Click on your new Facebook app name to view its details.

Copy the App ID and paste it to the corresponding design theme settings field in Shop-Script backend at "Shop → Storefront → Design → Appearance".

e. Making Facebook app available to general public

eturn to the Facebook app settings page, open “Settings → Basic” section and paste the URL of your Facebook users privacy terms page to the “Privacy policy URL” field. An example of the privacy policy text for a Facebook app is provided below. Save app settings.


On Facebook app editing page, open “App Review” section.

Switch the toggle to “Yes”.

Select a category; e.g., “Shopping”.

Confirm your choice with a button.

Done!

You have created your own online store in Facebook with Shop-Script. Its storefront is available via a tab on the store's main Facebook page, and you can already begin to accept orders from Facebook users.

You can also connect other Webasyst apps to your Facebook storefront as described in the next section.

Integration with other Webasyst applications

Design themes adapted to the appearance of Facebook pages are also available for other Webasyst apps: Site, Blog, Photos. This allows you to add extra tabs to your Facebook storefront such as “About us”, “Our blog”, “Photo album”, etc., powered by other Webasyst apps just like the storefront is powered by Shop-Script.

In order to add extra tabs to your Facebook storefront, you need to create corresponding hidden settlements in the “Routing” section of the Webasyst Site app for Site, Blog, or Photos and select the “Facebook” design theme for those settlements, exactly like you have created a hidden settlement for Shop-Script.

Then edit the index.html template of the “Facebook” theme to create a list of tabs to be displayed within your Facebook storefront as shown below (list items must be separated by commas!):

{$fb_tabs = [
[
    'url' => '/facebook/',
    'name' => 'Shop'
]
,
[
'url' => '/facebook/site/',
    'name' => 'About'
]
,
[
    'url' => '/facebook/blog/',
    'name' => 'Our blog'
]
]}

url elements should contain the relative URL of the appropriate settlement created in the Site app (without the trailing * character).
name elements should contain text captions to be displayed in the tabs you are creating.

Here is how your Facebook storefront may look with the extra tabs added in accordance with the above example:

Privacy policy example

This privacy policy, hereinafter referred to as “Policy”, defines the processing of personal information, which may be obtained from a user, hereinafter referred to as “User”, of this app , hereinafter referred to as “App”. The App is provided by [COMPANY NAME], hereinafter referred to as “Author”. Author’s website is www.domain.com. The use of or any access to the App means the consent of a User with the terms of the Policy.

1. Obtaining personal data from a User

The App is intended for a User to place orders towards the Author and for the Author to process them. Placemen of an order by a User includes transfer of their personal data to the Author, which is mandatory for the normal operation of the App. These personal data are hereinafter referred to as “Basic personal data”.

In addition to that, the App’s functionality enables a User to send other their personal data to the Author, which are hereinafter referred to as “Extra personal data”. The Policy governs the use of Basic personal data and does not govern the use of Extra personal data. Further in this Policy, User’s personal data are understood only as their Basic personal data unless explicitly stated otherwise.

The Author obtains the following personal data from a User:

  • full or brief name of the order recipient,
  • order delivery address,
  • [order payee’s address],
  • [list other contact fields that are requested from customers during checkout in you online store].

2. Use of personal data

User’s personal data are used by the Author’s staff to identify a User in the App’s backend interface, to deliver ordered items to a User, and automatically generate personalized messages to be sent by Author to User.

3. Transfer of personal data to third parties

The Author undertakes to protect and not to transfer User’s personal data to third parties with the exception of the following cases:

  • publication or transfer of personal data as required by the applicable law of [COUNTRY NAME],
  • transfer of personal data to another legal person in case of termination of business activity by the Author required to maintain the functionality of the App,
  • transfer of personal data after obtaining written consent from a User by email or via User’s online account on Author’s website www.domain.com.

4. Settlement of disputes

Any disagreements between a User and the Author related to the processing of a User's personal data by the Author during the use of the App are governed by the provisions of the Policy and the legislation of [COUNTRY NAME].

5. Age limitation

A User is allowed to access the App only if they have reached the age of 18 years. Underage Users may access the App only on the consent or under the supervision of their official guardians.

6. Amendments to the Policy

The Author may make changes to the Policy at any time without prior notification of a User. In case of changes made to the provisions of the Policy, the Author must notify a User about all such changes by publishing information on the Author’s website www.domain.com or by sending an email notification to a User. Updated provisions of the Policy will come into force as of the moment of such publication or of sending such an email notification.

7. User support

The Author undertakes to provide qualified response to each of a User’s support requests, relating to the processing of their personal data while using the App, without unnecessary delay. A User must send such support requests to the Author via their online account on the Author’s website www.domain.com.

1 comment

Add comment

To add a comment please sign up or login