Home > Uncategorized > How to Set Up Your Web Store on Facebook

How to Set Up Your Web Store on Facebook

With social media connecting the lives of so many people these days, consumers want to always be plugged-in to social media platforms. And given how important convenience is for today’s shoppers, allowing them to both view and purchase items from their favorite stores while on Facebook is a great way to gain more sales. 

Read our guide below to see how to set up a Facebook sales channel for your online store.

Running your web store as a Facebook Canvas Application

Facebook offers the option to run Apps on its platform. These Apps leverage a concept called Canvas within Facebook.com. The canvas is essentially a part of the Facebook web page that allows running your own application within an iFrame.

The web store application is compatible with Facebook Canvas. It is pretty straightforward to configure the web store on your Facebook Canvas so that visitors or friends who visit your Facebook wall can also access your web store without navigating out of Facebook.

There are a few branding caveats that you need to be aware of:

  1. Facebook Canvas is a 810px wide iFrame. This means that if your web store pages are wider than 810px then they would show a horizontal scroll bar. That is not customer friendly. Consequently, your web page design needs to be less than 810px wide to fit into the Facebook Canvas.
  2. The Facebook Canvas would show a header on top of every page of your web store. See below for a reference page from Flixster facebook app. This top bar is owned by Facebook and carries Facebook’s branding.

Running your web store as a Facebook Canvas Application

How to publish your web store to Facebook

Publishing your web store to Facebook requires three different steps as illustrated below:

  1. Create a Facebook Canvas Application.
  2. Create a Facebook Page.
  3. Link Page to App.

How to publish your web store to Facebook

These steps are pretty simple to do once you have your web store up and running. The steps primarily involve Facebook Application Configuration and Page Configuration on your corporate Facebook Account.

Create a Facebook Canvas Application

As the first step you would need to create a Facebook Canvas Application. Detailed steps to create a Canvas Application on Facebook are given below:

developer registration process

continue the registration process

continue the registration process

continue the registration process

Once you click on ‘Done’, your Facebook Account will be enabled for publishing the web store application.

Create New App

Create New App

App Name must not use more than 32 characters and no less than 3. Please make sure that your app name does not violate the trademark or other rights of a third party. The app namespace is a unique name by which your application is registered on Facebook. If the name is already taken by someone else, you will need to pick an alternate one. Click on Continue after filling out this form.

additional information about your web store application

App Domain is the domain name where you have hosted your web store. This has to be a domain name or IP address available on the internet.

Canvas related URLs

  1. Create your corporate account on Facebook.
  2. Login to Facebook and change the URL to http://developers.facebook.com
  3. From the header click on ‘Apps’. If you are not yet registered as a Facebook developer, then you will see the below screen.
  4. Click on the highlighted button/link to complete the developer registration process.
  5. The developer registration process will ask for some more technical inputs as shown below. Make selections as shown in the screenshots below and continue the registration process.
  6. To host your web store inside Facebook, we will need to create a new application. To create a new application, click on the ‘Create New App’ icon present on the below screen.
  7. The next page will ask for additional information about your web store application, as shown below:
  8. In the same form, you would need to provide the Canvas related URLs as shown below. These URLs are your web store URLs. If you have multiple stores, it would require creating multiple Facebook Canvas Applications.
  9. If you are running a mobile version of your web store, then type in that URL in the mobile web section as displayed in the above screen.
  10. Page Tab related settings are used to show your application on your Facebook page. These settings and their contents will get displayed once we add this application to our page. Maximum Page Tab width available is 810px, so you need to rework your web store UI to adjust within 810px. Otherwise you will get horizontal scroll bar while viewing web store pages via the Facebook Application.

Create a Facebook Page

The second step in publishing your web store on Facebook is creating your own Facebook page. Given below are the steps to create a page in your Facebook account:

Create a Page

Like Pages

Create a Page

select the appropriate category for the new page

page related basic information

Specify the profile picture for the page

Add a description and website for the newer page

Specify the page address

setting for enabling ads

  1. Login to your Facebook account.
  2. Once logged-in, you will be able to see the ‘Create a Page’ option at the bottom of the page.
  3. You can also click on the ‘Like Pages’  link present in the left hand side navigation pane, as shown below, to start the new page creation process.
  4. Clicking on ‘Like Pages’ brings you to a page where the ‘Create a Page’ button is present.
  5. To create a new Facebook page, select the appropriate category for the new page. Usually these types of pages would be in the Brand or Product category.
  6. Enter page related basic information as shown below. The name of the brand and product should be the name that you want to advertise to your customers/web store visitors.
  7. Specify the profile picture for the page as shown below. This picture is usually an advertisement for your web store, so it can be a ‘Logo’ or another picture that visitors relate to your brand/merchandise.
  8. Add a description and website for the newer page. You can provide multiple links that are relevant to your brand – these can be blogs, a customer service page, a Twitter page, etc.
  9. Specify the page address as below, which should be unique in the Facebook database.
  10. The last section in this process is the setting for enabling ads.
  11. After following all of the above steps, your newly created Facebook page will be ready to host your web store application.

Link the Facebook Page to the Facebook App

Once you are done with the Facebook application and Facebook page creation, you are ready to link your Facebook application to this newly created Facebook page. Note that you can also link the application on an existing Facebook page within your account, if you wish to do so. Given below are the steps to link the application:

Select the web store application

Now open the notepad and create an URL as shown below: http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

In this URL, YOUR_APP_ID will be our application id that we want to add to the page, and the next parameter we will have will be the Canvas page URL.

For the application we created in this documentation exercise, the application URL will be: http://www.facebook.com/dialog/pagetab?app_id=164456380363965&next=http://apps.facebook.com/globalapparel/

add application to page

Facebook page

web store

  1. Open your browser and login to your Facebook account.
  2. In a separate tab open the FB developers URL: https://developers.facebook.com/
  3. Now that you are on the https://developers.facebook.com website, go to the Apps section.
  4. Select the web store application created previously, and note down the Application ID and Canvas Page URL from the application settings section.
  5. Copy this created URL from the notepad and try opening it in a separate browser tab and you will see the below ‘add application to page’ dialog in your browser window.
  6. All the pages existing in your account would be listed in the page list. Select the page on which you would like to add your web store application as a page tab.
  7. Once you click on Add Page Tab, the application will be a part of the specified Facebook page and will be visible on the page tab section, as shown below:
  8. In the above screenshot we can see that we have added three web store applications to the same page. Once we click on any application, the corresponding Canvas application will launch and the related web store will get displayed in the iFrame, as shown below.

If you have any questions on how to set up a Facebook sales channel for your web store, or if you would like more information on how to improve online sale operations, please email us at ecommerce@ignify.com, or call us at (888) 446-4395.

Vijay Kumar Phale is a Tech Lead for eCommerce at Ignify. Ignify is a technology provider of ERPCRMeCommerce and Point of Sale software solutions to organizations. Ignify has won the worldwide Microsoft Partner of the Year Award in 2013, 2012 and 2011. Ignify has been included as the fastest growing business in North America for 7 years in a row by Deloitte, Inc Magazine and Entrepreneur Magazine from 2007 to 2013.

Categories: Uncategorized Tags:
  1. No comments yet.
  1. No trackbacks yet.