This post was last updated 11 years 4 months 25 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 Application
- Introduction
- Prerequisites
- Installation
- Configuration
- Usage
- 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.
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
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.
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}
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
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.
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.
Do you mean it is asking for an SSL certificate? Facebook requires an https connection for tab applications.
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}
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.
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.
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.
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
This is on my list of things to do, I will rewrite the app for the new API sometime this year.
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
same here 🙁 Product imagens not appear : ( only 2 descriptions 😐
If you can give me access to your installation I would like to try and fix this.
thank you PAJ 😀 already fixed!!! any possible to display the product price? 😀 thank you!
I didn’t include the product price because the main idea of the facebook app is to get people to click through to the main shop. Displaying the price is more complicated as the final price for each product needs to be calculated to ensure, tax, discounts and tier pricing are correct. I will include pricing in version 2 of the app, you can see the new version here https://www.facebook.com/pages/gaiterjones/243428839036258?sk=app_1659084167700338
wow!! very nice PAJ. thank you for your hard work ! 😀 hope we can try dat version 😀
Hey PAJ, it looks amazing!! thank you for your hard work!! hope we can try that version very soon 😀
Just a very belated thank you!
This has been working on my Magento 1.7.0.2 for about 3 years.
It is STILL working correctly as at January 2016, with no updates or patches needed.
For proof, see here;
https://www.facebook.com/Alond-Pty-Ltd-396696320397466/
Thanks PAJ, it works great!
Paul
Great! Glad it’s done it’s job. Version 2 of the Storefront is coming soon! https://github.com/gaiterjones/magento-facebookstorefront/
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…