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

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:

1 comment

Add comment

To add a comment please sign up or login