Facebook PS Shop Tab

Version : 3.1.0 Last update : 10/04/2013 Development : Business Tech Demo : http://www.facebook.com/arthusandco

NEW: Discover Facebook PS Photo Albums

You sell clothing, decoration objects or any visual type of product where photos matter and are an important communication tool ? This module is meant for you ! Publish your products as photo albums in a just a few clicks to increase your number of fans and sales. http://addons.prestashop.com/en/social-commerce-facebook-prestashop-modules/7106-facebook-psphoto-albums.html

Discover Facebook PS Wall Posts

A perfect complement to this Shop Tab module! Facebook PS Wall Posts allows you to automatically post your new products and back in stock products on the wall of your Facebook page. A manual publication function also allows you to publish any product, product category or brand at any time! http://addons.prestashop.com/en/social-networks/4429-facebook-ps-wall-posts.html

Discover Facebook PS Essentials

The Ultimate Facebook and social networks toolbox : all the Facebook widgets (Like Button, Like Box, Comments...), as well as Twitter, Google Plus, Pinterest and LinkedIn share buttons. http://addons.prestashop.com/en/social-networks/5025-facebook-ps-essentials.html

Server prerequisites
The new Facebook authentication uses the PHP CURL extension. Most web hosts support it, but if in doubt, contact your host. You must also have an SSL certificate installed on your website if you wish your visitors to view your shop tab in Facebook secured SSL / https mode.

Facebook prerequisites
You must first of all have a regular (personal) Facebook account. Only personal accounts can get a Facebook Developer account to create an application. If not, create a standard account at http://www.facebook.com. You must also own / be an administrator of a Facebook Fan Page. If you do not yet have a fan page, create one at http://www.facebook.com/pages (you must be logged in with your personal Facebook account). You must then register an application on Facebook so it can be linked to your Prestashop module. This application will then be added to your Facebook page, after correctly installing and configuring the module on the Prestashop back-office.

Go to https://developers.facebook.com/apps/ and click on Create New App.

For App Display Name , simply pick a descriptive name to give to your application. You may not use words that belong to Facebook, such as Wall, FB, Facebook etc For App Namespace , this parameter will be part of a URL, so no spaces, accents or special characters etc... It must also be unique on Facebook. The availability will be indicated to you on screen by Facebook. You will then be taken directly to the Settings page, Basic tab. If you are not redirected automatically, use the left menu to get there.

Fill out all the fileds using the above screenshot as a model. Of course, replace arthusandco.com with your real domain name. For the App. Namespace, pick a short name, using only lowercase standard characters without accents (a to z). For the Secure Page Tab URL, be sure to enter the https:// prefix as indicated. If you are using a shared SSL certificate, you will need to ask your host for the URL. With OVH, it is usually something like https://ssl10.ovh.net/~your_username where ssl10 can vary (ssl8 or ssl12 or other, according to which server you are on) and your_username usually matches your FTP username. Write down the Application ID, Application Secret displayed at the top, as well as the Canvas Page URL under the App on Facebook section. Youll need those later.

Prestashop prerequisites
There is only one prerequisite for Prestashop : you must create a new image size of 160 x 160 pixels in the back office (unless you already have a 160 x 160 size available). Go to Preferences, then Image and create a new type. Pick any name you want. Activate Products and Categories.

160

160

Then, regenerate your thumbnails.

Module installation
As for any other module, uncompress the .zip file and upload the facebookpsshoptab directory to your modules directory on your server via FTP. Put recursive write permissions (propagate to sub-folders and files) on the images and home_html sub-directories. Install the module via the back office as usual.

A few notes on configuring the module

Facebook Application Settings Copy back the Application ID and Application Secret you saved earlier. The other Facebook Application Settings are explained on the configuration screen itself. Header and Top Settings Choose the existing meta-tag model for your module. Logically, pick the one for the homepage, index. Menu Settings Some stores may have a large number of categories and sub-categories. Since Facebook changed their layout width to 520 pixels, the categories has been moved to the top as a drop down suckerfish menu. For large shops, it may be necessary to limit the subcategory depth to 1 or 2. The Max. depth for categories / sub-categories setting is meant just for that. If you are in this case and you restrict your category depth, you will then also want to set the Display sub-categories ? setting to Yes under the Category and product listing settings so people can still navigate through sub-categories. Homepage Settings Nothing out of the ordinary here, except the Homepage Image link . You can enter 2 types of links here : a link that is relative to the application (pages on your Facebook mini-shop ), or an absolute link pointing to the outside (your real Prestashop site). The following are valid relative application links : ./?ctx=best-sales (Best Sales page of your application) ./?ctx=prices-drop (Promotions page of your application) ./?ctx=new-products (New Products page of your application) ./?ctx=category&id_category=xx (a product category page of your application, replacing xx with the actual category ID) The following are valid absolute external links : Any fully qualified URL such as : http://www.mysite.com/path/page.html For the Homepage custom HTML editor, if you insert any images, make sure that their src attribute is an absolute, fully qualified URL such as http://www.mysite.com/modules/facebookpsshoptab/images/img.jpg - If you insert any links, the link logic explained above is also applicable. Category and Product Listing Settings Given the base CSS implemented, the number of products per row in Grid list view is 3 per row. So, for the Grid list view, select a multiple of 3 for Number of products per page . For the Rows list, pick anything you want, but, so that your pages will load quickly on Facebook, you should not enter anything higher than 10 anyway. The setting Display sub-categories ? can be No, Yes, as images or Yes, as text. If you select Yes, as text, it will display any products listed in the main category, and will add text links to the

sub-categories at the top of the page. This is related to the Max. depth for categories / subcategories in the Menu Settings section. Very large shops with many categories will want to limit the menu depth to 1 or 2 and give access to the sub-categories in the main content. These 2 Yes options just give you a choice on how this is accomplished. Feel free to play with the settings to see what setup works best for you.

Last step : installing your application on your Facebook page

All that is left to do is to attach your application to your Facebook page as a tab. In the module configuration screen on your PrestaShop back-office, go to the Test and link your app tab and follow the instructions.

Step 2 will open a new window on Facebook, that will offer you a list of pages you are an admin of. Simply select the desired page and click the Add Page Tab button.

Congratulations, youre done !

Technical FAQ
I want to customize my module a bit. How do I easily test it ? In the modules Prestashop back-office configuration screen, temporarily deactivate the Check Facebook credentials. Then simply go to http://www.mysite.com/modules/facebookpsshoptab (replace mysite.com with your own URL of course).

Why do the shop information pages open on my Prestashop website ? The information pages (CMS pages) initially created for Prestashop sites often contain a layout adapted to the width of your site, plus eventually personalized CSS styles that are not defined in the modules stylesheet. To prevent any display problems or require having to modify your CMS pages, we have decided to open them directly on your site.

Facebook PS Shop Tab and Ads & Slideshow (by Presta-Module) compatibility
The Facebook PS Shop Tab module is compatible with the Ads & Slideshow module, version 1.3.3 or higher, available on http://addons.prestashop.com/en/slideshows/2656-ads-a-slideshow.html. The principle is simple: The Ads & Slideshow module allows you to create slideshows and put them on different hooks. In collaboration with Presta-Module, their module has implemented our Facebook PS Shop Tab fbpsstHome hook, which displays your Facebook Shop Tabs homepage. This allows you to replace the static JPEG image uploaded via the Facebook modules configuration screen with a more attractive animated slideshow. To use this functionality, follow these steps : 1) Purchase and install the Ads & Slideshow module 2) In the Facebook modules configuration screen, set Display image / banner on homepage to No

3) In the Ads and Slideshow , create your slideshow in the fbpsstHome tab (please refer to the Ads and Slideshow documentation for help with their module) Thats it. The slideshow will now replace the static image on your Facebook PS Shop Tab homepage.

Note to developers
The module implements 6 new hooks, on which it attaches itself: fbpsstCore, fbpsstHeader, fbpsstTop, fbpsstRight, fbpsstHome and fbpsstBottom. It is therefore possible to pile up other modules on each of these hooks (their CSS will however need to be copied in this modules main stylesheet). Furthermore, the fbpsstHome hook being executed itself by the fbpsstRight hook has been made independent and it is possible to unhook this Facebook PS Shop Tab module from it and replace it with another homepage module. This allows developers to create new mini-modules with alternative homepage presentation concepts for Facebook PS Shop Tab, while keeping the remaining functionality of the module. The hookFbpsstRight function expects a $_GET[ctx] parameter for the execution of the appropriate actions. For now, the following actions / ctx values have been implemented:

home (default) best-sales prices-drop new-products search category (category expects a $_GET[id_category] parameter)