How do I configure the module ?
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. This is free or very inexpensive. For more information, please read this FAQ.
The module was successfully tested with shared SSL certificates on OVH shared hosting, with an URL such as https://ssl10.ovh.net/~mon_username/ as well as SSL Proxy on 1&1 shared hosting.
You must first of all have a personal Facebook account. Only personal accounts can get a Facebook Developer account to create an application. If not, create a standard account at www.facebook.com
You must also be an administrator of a Facebook page. If you don't have a page yet, click here to create one. Be careful : you must be logged in with your Facebook personal profile when you create your Facebook page.
You first have to create a Facebook app and link it to the "Advanced Shop for Fan Page" module. This application will allow you, once the module is completely configured, to display a custom shop tab on your Facebook page. To know how to create a Facebook app, click here.
Once the app is created and its parameters are filled in the module "Facebook application settings" tab, you will be able to configure your Facebook shop.
In "General settings" tab of the module "Shop tab settings" section, choose to display your product prices with our without taxes and to diplay or not a search bar.
You can then customize a banner that will appear at the top of your shop, with your logo for example.
In the "Menu settings" part, you can define the sub-categories maximal depth to display in the menu, i.e the number of "levels" of sub-categories. Indeed, if your shop has many "levels" of sub-categories, it whould be necessary to limit this depth to 1 or 2. Please note that the first "level" is (in general) the one of your homepage and then to display a single sub-level you have to enter the value of 2 for depth, as this is shown in the example below:
If you limit the depth of the sub-categories, we advise you, in this case, to activate the "Display sub-categories?" option in the "Category settings" tab so that visitors can still navigate through the sub-categories that will not be visible in the general horizontal menu of your Facebook shop.
Select the tabs you want to display in your menu. The module also gives you the possibility to insert in your menu, a custom link that will refer to a page of your online shop:
Note: The pages accessible via the "Shop info" tab of the menu (CMS pages) were created at the beginning for a "real" Prestashop shop. They therefore often include a layout adapted to the width of your site, with maybe custom CSS styles, that are not defined in the stylesheet of the "Advanced Shop for Fan Page" module. To prevent any display problems and to avoid having to modify the HTML code of your CMS pages, we decided to open these pages directly on your site.
Finally, after selecting the image sizes, you can decide to add a custom text at the bottom of the shop page with a link to a page of your website.
In the "Homepage settings" tab you can decide to display a banner on your Facebook shop homepage. Regarding the page to display at the click on the banner, you have the choice between:
- redirect visitors to one of the Facebook shop pages. The link to indicate is relative to the application.
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)
- redirect visitors to one of your online shop pages. The link to indicate is an absolute link pointing to the outside.
The following are valid absolute external links :
Any fully qualified URL such as : http://www.mysite.com/path/page.html
You also have the possibility to completely customize the homepage thanks to the « Custom HTML settings » editor. Please note that if you insert any images, you have to make sure that their src attribute is an absolute, fully qualified URL such as:
If you insert any links, you have the choice between application links or absolute outside links as this is explained above.
Click "Category settings" to define the number of products by category page and the display mode.
The "Display sub-categories?" option can take the value "No", "Yes, as images" or "Yes, as text".
If you select "Yes, as text", the module will display the sub-categories of the current category as buttons with text inside. If you select "Yes, as images", the module will display the sub-categories by showing the associated images.
You can choose to display your products in "Rows List" or in "Grid List":
If you choose the "Grid List" view, you should know that the module based CSS allows 3 products per row. So, for the "Number of products per page" option we advise you to enter a multiple of 3.
However, if you select the "Rows list" view, you can enter any number.
But, to prevent your Facebook shop page from loading too much, we advise you, whatever the display mode, not to enter a number of products per page higher than 10.
Style and CSS
The "Style and CSS" section and its multiple tabs allow you to customize your Facebook shop as much as possible. Use all the available options to create your very own Facebook shop and stand out from the competition.
Click here to follow the FAQ that concerns the module customization tool.
If you have installed our "Customer Ratings and Reviews Pro + Google Rich Snippets" module on your website, you also have the possibility to display on your Facebook shop, a "Reviews" tab with, for each product, the avarage rating and the number of reviews collected. A link can also be inserted to the page that show all the reviews on your online shop:
Test and link your app to your Facebook page
Once the module configuration is finished, all you have to do is link your Facebook app to your Facebook Page in order to bring up the shop tab.
Be careful: we remind you that for this to work, your facebook page must have more than 2000 fans (new Facebook requirements for custom tabs creation).
Go to the module "Test and link your application" tab:
Start by testing the shop tab display by clicking "Preview your standalone mode". Then, once you have gotten the desired display (by making any changes in the module configuration tabs), click on the second link to link your app to your Facebook Pade and see the tab.
A new window will open on Facebook, offer you the list of the pages you are an admin of. Simply select the desired page and click the "Add Page Tab" button. You should get the shop tab on your Facebook Page.
Integration with the Presta-Module "Ads & Slideshow" and "Advanced Top Menu" modules
The "Advanced Shop for Fan Page" module is compatible with the Presta-Module "Ads & Slideshow" (version 1.3.3 and more) and "Advanced Top Menu" modules.
About the integration with the "Ads & Slideshow" module
The "Ads & Slideshow" module allows you to create slideshows and put them on different hooks. Regarding its working in collaboration with our "Advanced Shop for Fan Page" module, it uses the "fbpsstHome" hook, which displays your Facebook shop tab’s homepage.
This allows you to replace the static JPEG image uploaded via the "Advanced Shop for Fan Page" module configuration ("Homepage settings" tab) with a more attractive animated slideshow.
To use this functionality, follow these steps :
- Purchase and install the « Ads & Slideshow » module
- In the "Homepage settings" tab of the "Advanced Shop for Fan Page" module, set the "Display the homepage banner" option to « No » and save.
- In the "Ads & Slideshow" module, create your slideshow in the "fbpsstHome" tab (please refer to the "Ads & Slideshow" documentation for more help with this module)
The animated slideshow will now replace the static image previously configured in the "Advanced Shop for Fan Page" module.
About the integration with the "Advanced Top menu" module
The "Advanced Top Menu" module allows you to build all types of horizontal navigation bars: single bar, drop-down menus, rich menu, mega-menu with columns. It is possible to use the menu you created with this module for your website, for your Facebook shop.
Here is how to proceed:
- Purchase the "Advanced Top Menu" module, install and configure it for your online shop
- In the "Advanced Shop for Fan Page" module, go to the "General Settings" tab of the "Shop Tab settings" section. In the "Menu settings" part, select the "Advanced Top Menu" type. Don't forget to save.
You should see your custom menu appear in your Facebook shop.
Notes for developers
The "Advanced Shop for Fan Page" 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 the "Advanced Shop for Fan Page" module’s main stylesheet).
Furthermore, the fbpsstHome hook – being executed itself by the fbpsstRight hook – has been made independent and it's possible to unhook the "Advanced Shop for Fan Page" 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 shops, 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)
- category (category expects a $_GET[‘id_category’] parameter)