Having recently done some work both with Facebook tab apps and exporting Magento product collections in PHP I thought that this is actually a pretty easy task to achieve and coded up an example Facebook Magento Store Front running in a Facebook tab that presents a simple view of your products, product information and a direct link to the product on your Magento web for customers to place orders.

The app talks directly to your Magento database so it will always be up to date. It supports multi language stores and will detect the customers browser language and switch languages accordingly.

This is really a quick win app, integrating quickly with your Magento installation and takes about 30mins to setup and get up and running in Facebook.

Check out my demo Facebook storefront / shop tab app here.

Update

This app has been replaced by version 2. You can see it working here.

DOWNLOAD

Download the latest version of the application source code here.

Basic installation and usage instructions below.

12.11.2012 – v0.97 – bug fixes and changes to user configuration setup, user config now held in .ini file.
22.11.2012 – v1.0.1 – first public release

Magento Facebook Store Front Tab Application

1. Introduction
2. Prerequisites
3. Installation
4. Configuration
5. Usage
6. Languages

Introduction

Magento Facebook Store Front Tab is an object oriented PHP script that integrates with a Magento installation to render product HTML designed to be displayed within a Facebook Tab. The application is able to render various product views, all products, new products, categories etc. with a simple product description and link to your actual Magento web store for purchases.

The application supports normal desktop clients.

Prerequisites

This application requires a configured Facebook Account, Facebook Page and a configured Facebook application. A good knowledge of your Magento installation and Operating System is assumed as well as some experience with Facebook applications and PHP.

Installation

Extract the source files ideally to a sub folder of your Magento installation. e.g. /home/www/magento/facebook

A new folder ‘magentotab’ will be created. Feel free to rename this folder if required.

The application will then be accessible from your browser via the following url

http://www.YOURSHOP.com/facebook/magentotab

Where www.YOURSHOP.com is the url to your Magento shop frontend. If you install the application somewhere other than your Magento installation folder then you will need to browse to the application via your configured web server path.

Configuration

Edit the file applicationConfig.php in /magentotab/config.

Edit

const PATH_TO_MAGENTO_INSTALLATION = ‘/home/www/dev/magento/’;

With the actual path to your Magento installation.

Edit fbAppID, fbAppSecret and fbUrl with the App ID, Secret and URL from your configured Facebook app.

To display a menu on the product page set the showMenu constant to true. Depending on traffic and your hosting etc. the application may run faster when the menu is disabled.

To exclude categories from being shown in the product menu, configure the excludedProductCategories constant with a list of category id’s separated by a comma, e.g.

const excludedProductCategories=’4,5,16,17,18,19,22,23,25,27,28,29,30,31,32,33,34,35,37′;

For google UTM tagging configure the googleUTMTag constant with a valid Google UTM URI.

The bannerImage constant holds the name of the graphic file used as the banner at the top of the Facebook Tab page.

Set the productLimit constant to define the number of products that will appear per page. This should be divisible by 9.

Set the defaultCollectionType constant. This defines the default product view that will be shown. Options are

newfromdate – Products set with the NEW FROM attribute – i.e. New Products.

allproducts – All Products

categoryproducts – Products from a category.

Determine which product description will be shown for the product

useShortDescription=true – Use short description

useLongDescription=true – Use long description

Configure language options

const storesConfigured=’1,2,3′;

const storesLanguage=’de,en,fr’;

const storeDefaultLanguage=’en’;

In this example there are three stores configured with the id’s 1, 2 and 3. The store languages for store 1,2,3 are de, en, fr – German, English, French. And the default language is ‘en’ – English.

The showContact and showAbout constants enable a Contact and About button on the menu when set to true. This is currently in development.

The allowStandAlone constant lets the application run in a standalone browser when set to true. When set to false the application will redirect to the Facebook URL of the app. Set to true for debugging the app standalone outside of Facebook.

Set the pageLikeRequired constant to true if visitors must first Like the Facebook page the tab is running in before they can access the application.

Set the URIToApp value to the URI path of the app on your server.

Save the configuration file.

Usage

To run the script for the first time browse to the URL of the script as defined above

i.e. http://www.YOURSHOP.com/facebook/magentotab

If the Magento configuration path is correct you should see a list of products displayed, with or without menu options as specified in the configuration.

If the application works correctly standalone then you are ready to integrate it with Facebook.

To install the application as a Facebook Tab ensure that your Facebook application has been created and configured with the correct canvas URL’s to the application and then goto the following link

http://www.YOURSHOP.com/facebook/magentotab?fbtab=true

This will return a link that will start the Tab installation process via Facebook. Select the Facebook page to install the Tab on.

When the Tab is installed goto your Facebook page to confirm that the app is working.

Languages

To translate some of the interface text used in the application to your language, simply create a new language file in the php/locale folder named XX.txt where XX is your two letter language code. Use an existing language file as a template and add your translations to the file in the format

Text=TranslatedText.

Make sure your language settings are configured correctly in the application. You can force the application to the language you want using the storeid variable in the url

i.e. http://www.YOURSHOP/facebook/magentotab/?storeid=2

Will force the application to the language configured for store id 2.