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

Shop-Script » Integrations »

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

The setup consists of 2 major steps:

Adding a special storefront in Shop-Script.
Creating an app in your Facebook account.

1. Adding a special storefront in Shop-Script

Install an SSL certificate for your domain name. It is 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 or ***.host.webasyst.com. You can use a default domain name to create a fully functional online storefront in Facebook without registering a personal domain name at .com, .org, or .net.

Create an account in Webasyst Cloud or install and set up Shop-Script by following the guide.
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.
Open “Structure” section in Site app and add a new rule for “Shop” app. When adding a rule, enter address facebook/*
Enable "Hidden settlement" option to prevent a link to the special storefront from appearing in your website’s main navigation menu. Select other parameters to your liking and save the storefront settings.
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 later to publish your Facebook app for all users.

Open the URL of the newly created Facebook storefront to ensure that everything described above has been done correctly. The storefront design has to match that of has to match that of the social network.

2. Setting up a Facebook application

Log into Facebook. Create an account in the social network if you have none yet.

Open the app creation page. Extend your Facebook account status to the developer level.

a. Create a Facebook page for your online store

To publish your store in the social network, create a Facebook page for it. It will be similar to a personal Facebook profile page with the exception that it is created for a company, store, club, or 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

Proceed to the page creation. Select page type “Business or Brand”) and click “Get Started”.

Enter a page name an select a category. Enter the company address and a phone number.

Then follow on-screen instructions. Here is what your store’s page might look like:

Now you need to add a tab to your page so that page visitors can view your special storefront on it and do their shopping. Visually, a Facebook user will remain within the social network, but the storefront contents will be provided by your online store powered by Shop-Script.

The store’s page must have more than 2000 followers for you to be able to add a tab. This is a requirement of the social network.

b. Create a Facebook app

Open Facebook app management page.
Click “Add a New App”.
Enter an arbitrary name for your app; e.g., your store name, and select a category; e.g., “Shopping”, and click “Create App ID”.
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”.
Select “Facebook Web Games”.
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.
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

On Facebook app editing page, open “Settings → Basic” and click “Add platform”.
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.
Save the changes.
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/
    
```
On the page that opens at that URL, select the page name from the “Choose Facebook Pages” list and click Add Page Tab.

Your Facebook-styled storefront should appear in the browser tab. That will mean that the application tab has been added to the store’s page.

Here is how your app's tab might appear on your store's page:

d. Connect your design theme to Facebook app

Open the list of your Facebook apps. Click your app’s name.

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 using the button at the bottom.

Wait until your app is verified by the Facebook moderators.

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 relative URLs of appropriate settlements 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.