Facebook Magento Store Front Shop Tab Application

created October 28, 2012, last updated March 3, 2017.

.
closeThis post was last updated 6 years 7 months 20 days ago, some of the information contained here may no longer be actual and any referenced software versions may have been updated!

I saw an email last week from a company offering a Facebook store front tab application service for Magento that imports your Magento products and creates a basic Magento store front presence in a Facebook tab application. I thought this was a pretty neat idea especially if you are using Facebook as a marketing tool for your Magento e-commerce site. What I did not find so neat was the price, they want upwards of $1000.00 per year for a fully dynamic storefront with up to date products and support.

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

 

Conversions From the Tab

 

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.

 

 

 

 

 

 

 

 

Comments

  1. Paul says:

    Hi,

    Just installed the script and its working perfect!
    Thank!

    Just need to translate some txt.
    I found a txt file and renamed it to nt.txt.
    But i need to translate some more text and i can’t find where.
    I want to translate the Contact and About us menu and content anf the menu text Previous and Next.
    Hope you can help me with that.

    Thanks,

    Paul

  2. Jay says:

    Hi, I tried to install this today but its throwing me an error
    An error has occurred : Undefined see trace > !
    Your error submission report has been received.

    Ive setup the userconfig.ini and applicationconfig.php with the correct path already but its seems to not want to load the products.

  3. jay says:

    Hi, this is the trace I’m getting… any ideas?
    #0 /var/www/html/app/code/core/Mage/Core/Model/App.php(834): Mage_Core_Model_App->throwStoreException()
    #1 /var/www/html/app/code/core/Mage/Catalog/Model/Resource/Product/Collection.php(510): Mage_Core_Model_App->getStore(‘2’)
    #2 /var/www/html/facebook/magentotab/php/class.MagentoCollection.php(165): Mage_Catalog_Model_Resource_Product_Collection->addStoreFilter(‘2’)
    #3 /var/www/html/facebook/magentotab/php/class.Application.php(240): MagentoCollection->getAllProducts(‘2’, 1, 9)
    #4 /var/www/html/facebook/magentotab/php/class.Application.php(69): Application->getProductCollection(‘allproducts’)
    #5 /var/www/html/facebook/magentotab/index.php(32): Application->__construct()
    #6 {main}

  4. Ed says:

    Hi Paj,

    I tried to use the unitprice in order to display the price of the product, but when i try use this variable $_unitPrice it doesn’t show on the page. Can you send me a snippet of code on how to display the SpecialPrice.

    Thanks!
    Ed

    • PAJ says:

      My code first gets a data collection from magento and then filters that into another array used to build the html. I have not included the product price because of issues that arise when displaying the price with VAT etc. But to get the price you will need to add the price attribute to the Magento product collection and then also add it to the array used to build the html. If you need help with this let me know.

  5. Viral Mehta says:

    Hi
    I used this code, but does not work on facebook. if use as standalone it works
    but in facebook it does not work.

    it ask for invalid certificate, can you please help to sort out the issue.

  6. A1Guy says:

    Hi PAJ,
    I tried to use your solution on the website and got similar issue as JAY mentioned above. The callstack is below.

    I use magento 1.7, PHP 5.2 and hosted on bluehost. I already tried the app.php suggested fix to include ‘default’ where it says $id = $this->_currentStore;. That did not solve the issue.

    I like your solution and would really appreciate some help regarding this.
    Thanks

    #0 /home3/thesite/public_html/app/code/core/Mage/Core/Model/App.php(842): Mage_Core_Model_App->throwStoreException()
    #1 /home3/thesite/public_html/app/code/core/Mage/Core/Model/App/Area.php(159): Mage_Core_Model_App->getStore()
    #2 /home3/thesite/public_html/app/code/core/Mage/Core/Model/App/Area.php(124): Mage_Core_Model_App_Area->_initDesign()
    #3 /home3/thesite/public_html/app/code/core/Mage/Core/Model/App/Area.php(92): Mage_Core_Model_App_Area->_loadPart(‘design’)
    #4 /home3/thesite/public_html/app/code/core/Mage/Core/Model/App.php(774): Mage_Core_Model_App_Area->load()
    #5 /home3/thesite/public_html/facebook/magentotab/php/class.Magento.php(52): Mage_Core_Model_App->loadArea(‘frontend’)
    #6 /home3/thesite/public_html/facebook/magentotab/php/class.Magento.php(35): Magento->loadMagento(‘2’)
    #7 /home3/thesite/public_html/facebook/magentotab/php/class.MagentoCollection.php(33): Magento->__construct(‘2’)
    #8 /home3/thesite/public_html/facebook/magentotab/php/class.Application.php(228): MagentoCollection->__construct(‘2’)
    #9 /home3/thesite/public_html/facebook/magentotab/php/class.Application.php(69): Application->getProductCollection(‘allproducts’)
    #10 /home3/thesite/public_html/facebook/magentotab/index.php(32): Application->__construct()
    #11 {main}

    • PAJ says:

      Hi,

      I can’t see anything obvious from the trace, I am running the demo of this script on. Magento 1.7 store too, so it should work. Perhaps your shop setup is different and causing a problem. If you email me some access details I can take a look for you.

  7. Shiv says:

    I am unable to create App Tab on my Facebook page. Please guide me how i have to setup?. I have installed your module and its working fine in URL. But Please tell me about the setup On Facebook page.

    • PAJ says:

      Hi, due to recent changes to the Facebook API I need to rewrite this tab app, I can’t support any installation issues until I release the new version. Sorry about that.

      • Sofiane says:

        Hi Paj,

        Did you re-write the tab to work with the new facebook API??

        this is really a good application if you can support release.

        Thanks

        Sofiane

  8. Joe says:

    Hi, this is working great. I love this app. I only have one issue, the product images aren’t showing. I’ve been trying to fix it for hours now. Would you have any idea what it could be?

    Thank you
    joe

  9. Pedro says:

    Hey Paj, how are you? any help about products with Tax rate? i have my website with tax rates and products just dont appear only have categories…

This site uses Akismet to reduce spam. Learn how your comment data is processed.