Integrate Webasyst Shop-Script with Facebook iframe Application

We Also Provide WebAsyst – Facebook Integration service and other Facebook iFrame Integration services – contact us.

Online store as a Facebook application

Integration between Shop-Script and social network Facebook (www.facebook.com) allows online merchants to embed their storefronts in Facebook as an iframe application and to receive orders directly from Facebook users. To integrate your online store as a Facebook application, sign up for an account in the social network and follow the instructions provided below.

1. In backend section “Tools -> Social” enable Facebook integration by clicking on “Enable”.

2. Enabling the integration automatically makes a special storefront version available at a URL of the form http://(your storefront URL)/facebook/ which is supposed to be used only within Facebook. This is a simplified storefront version; ordinary Facebook users who are not savvy about the functioning of iframe applications will never notice that the storefront actually resides on a different domain name outside Facebook.

3. Create a new application in Facebook:

1. Find Developer application in the Facebook application catalog at http://www.facebook.com/apps/directory.php and install it.

2. When in Developer, click on the button which creates a new application:

3. Specify the Canvas URL in Facebook application settings (in section Facebook Integration) — this value must be copied & pasted from field “Facebook storefront URL” in Shop-Script settings.

Select the following values: Canvas Type = IFrame, and IFrame Size = Auto-resize.

4. Done. NO PARAMETERS of the newly created application (including Application ID and Application Secret) need to be copied to the Shop-Script backend. Your new application is already fully functional and represents a Facebook-based storefront which is available at a URL of the form http://apps.facebook.com/your_application_name/ (“your_application_name” here is what you have typed in field Canvas Page in your application profile).

From this moment your online storefront becomes available within Facebook, where users can immediately place orders.

Special offers. The screen shot above shows a sample storefront with three products displayed as special offers. To have your selected products displayed in a similar way in your Facebook storefront, create a product list in Shop-Script backend section “Products -> Lists” with id facebookspecial. Products included into such a list are automatically displayed in Facebook as a special offer of your online store. If no product list with this id exists, a plain category list of your online catalog will be displayed in your Facebook application.

Like. The Like button in an application helps increase the number of the online store fans. (The target URL of the Like button is adjustable in the Facebook integration settings in the Shop-Script backend. We recommend you specify the main URL of your storefront’s Facebook page there, as it will allow you to point all of your fans in one place.)

Main Facebook page of your online store

Your new Facebook application only displays a storefront and allows visitors to place orders within the interface of the social network. In addition to these functions we suggest creating the main Facebook page for your online store. This kind of page is similar to your personal Facebook profile page with the exception that it is created for a company/store/club/group, etc. rather than for a person. Below are provided several examples of such pages:

http://www.facebook.com/Google

http://www.facebook.com/pages/Moscow-Russia/Mega-Podarki/104202259646986

It is easy to create a main Facebook page for your store — simply open URL http://www.facebook.com/pages/create.php and follow on-screen instructions. On your online store’s page visitors will be able to read your latest news, communicate with each other, view photos, etc.

After you create the main page for your online store, attach it to your application by placing a link to the application on that page.

The best method to do so is to add a new tab (e.g. “Shop”) to your Facebook page using the special FBML application. Below is shown an example of such a tab on the Facebook page of the “1-800-Flowers.com” online store:

Follow general guidelines below to create a new tab using FBML (for additional instructions please refer to the Facebook forum and help system):

1. Find application Static FBML in the Facebook application catalog.

2. Install the application using the Add to my Page link for the main Facebook page of your online storefront.

3. Open the main Facebook page of your storefront, click on Edit page and open the Applications tab.

4. Click Go to Application for the FBML application:

Now specify the title and text for the new tab (FBML code):

Note: You can use almost any HTML tags in the FBML text area together with FBML markup. However, iframe tags are not allowed; you may only add a link to your online store here.

Please read more about FBML at http://developers.facebook.com/docs/reference/fbml/.

Like buttons in the main storefront

The above instructions will allow you to implement the “Facebook -> Shop-Script” integration. In addition to that, you can also very easily take advantage of the integration in the opposite direction: “Shop-Script -> Facebook”. This kind of integration is possible using JavaScript functions provided by Facebook (rather than Shop-Script!) and is limited to the ability of adding Like buttons to your main storefront which can be clicked by visitors who have a Facebook account to publish information about your products on their personal walls.

The main advantage of the “Shop-Script -> Facebook” integration is its simplicity: all you need to do is to obtain the code of the Like button on the Facebook website and to add it to your storefront using the built-in design editor. You do not even have to register your online store in the social network in this case!

1. Obtain (copy) XFBML code of the Like button for your website at http://developers.facebook.com/docs/reference/plugins/like:

Be sure to copy XFBML code and NOT the iframe code because the Like button must be generated for the current storefront page. It is important since the button will be added to the product page (it has common layout and design for all products but has individual URL and contents for each item).

2. Open online store backend section “Design -> Design editor” and switch to the Advanced (HTML-editing) mode and paste the code copied in the previous step to the desired location in the page layout.

Note: Code containing curly brackets { and } must be surrounded by special tags {literal} and {/literal} in the built-in HTML code editor as shown below:

{literal}

paste the Like button code here

{/literal}

We recommend adding the button to the product details page (“Product” tab of the built-in design editor) because in this case integration will have best effect — visitors will be able to express their attitude to individual products rather than to the entire website. Adding the button under the “Product” tab will make it appear on all product pages in your online storefront.

You can view an example of the Like button added to product pages in Shop-Script at http://www.mega-podarki.ru/product/mega-chupa-chups/.

Recommendations

Please keep in mind that integration between Shop-Script and Facebook is not an advertising “cure-all” and does not guarantee an instant boost of sales. It only provides a good extra source of new customers as an addition to the main storefront. Among advantages of this integration is the ability to use the advertising facilities of a social network: a) targeted marketing and b) encouraging users to spread information about your online store and products.

Social promotion within Facebook mainly means promotion of the main Facebook page of your store and gradual growth of your fans community.

To start with, you may first set up automatic translation of your RSS feed to the main Facebook page of your online store. To achieve that, you may use RSS Graffiti application as described below:

Install RSS Graffiti application and enable it for your store’s main Facebook page.

Set up translation of your main RSS feed to that page. If you use the default RSS generation mechanism in Shop-Script, then your RSS feed address has the form feed://(your storefront URL)/rssfeed.php?type=blog (you can find out the exact address on the http://(your storefront URL)/news/ page by clicking the orange RSS icon).