How to add Facebook like box for free?

As the title of article says - in this paper we will talk about adding facebook like box plugin for free to our web store based on PrestaShop engine. Of course you can also use our commercial module for adding facebook like box plugin to PrestaShop - it cost about 10.00€. But as we say - we want to show you how to add like box for free without any knowledge of editig PrestaShop template files etc.

Step-by-step tutorial for adding Facebook like box plugin for free

1. Download our free module called HTML Box

First important step in adding procedure is downloading our free module for PrestaShop. This module cans add any HTML / css / javascript code anywhere you want in your shop back office. You will find module in our offer, exactly here: Prestashop HTML / js / css Box module for free. Main functionality of this module is described in attached product download page. If you downloaded this module - install it in your shop. If you don't know how to install a PrestaShop modules, read tutorial about installing modules in PrestaShop.

2. Create you own code of Like Box plugin

To create your own code of like box plugin you must use official facebook tool for creating it. You find it in official facebook developers page. Go to http://developers.facebook.com/docs/reference/plugins/like-box/ page and fill Like Box setting form.

• Facebook Page Url: The URL of the facebook page for like box
• Width: the width of the like box plugin
• Height: the height of the like box plugin
• Color Scheme: The color scheme of the plugin. Note that the background is always transparent to match your background color. This setting changes the foreground colors to work well on light or 
• Show Faces: Enable in you want to display profile photos of fans
• Border Color: Border color of the like box plugin
• Stream: Enable if you want to stream wall feed from your fan page
• Header: Enable if you want to display "Find us on facebook" in header of Like Box

Fill the form correctly and exactly as you want. If you are ready, click Get Code button for generate you own code of like box plugin

After generating  code proces you will see box with code for: HTML5, XFBML, IFRAME, URL. Select the IFRAME. You will see exactly the same text area as we attached above. Copy the code to clipboard (ctrl+c).

In copied code as you probably see exists some HTML tags:

• href - the URL of the Facebook Page for this Like Box
• width - the width of the plugin in pixels. Default width: 300px.
• height - the height of the plugin in pixels. The default height varies based on number of faces to display, and whether the stream is displayed. With the stream displayed, and 10 faces the default height is 556px. With no faces, and no stream the default height is 63px.
• colorscheme - the color scheme for the plugin. Options: 'light', 'dark'
• show_faces - specifies whether or not to display profile photos in the plugin. Default value: true.
• stream - specifies whether to display a stream of the latest posts from the Page's wall
• header - specifies whether to display the Facebook header at the top of the plugin.
• border_color - the border color of the plugin.
• force_wall - for Places, specifies whether the stream contains posts from the Place's wall or just checkins from friends. Default value: false.

3. Go to HTML Box module configuration in your PrestaShop back office

 Login into your PrestaShop back office, go to the modules section and find the HTML Box module. Go to configuration of this awesome tool and you will probably see something like that:

Select the place, where you want to add your Facebook like box plugin. As you see you can add it in most important places in fron office of your shop. You can add code in:

• Header of your site
• Top section of your site
• left collumn 
• right collumn
• footer section of your site
• home section

Select one position, paste the copied like box plugin code into the text area in right collumn of this module. Save changes by clicking on Save Settings button. That's all. Now you can check your shop page, and you will see your own like box plugin exactly as on image below:

Why this method is better than dedicated Facebook Like Box Modules?

Using method described in this tutorial is the best because sometimes Facebook applying changes into facebook (developers, sites, fanpages, etc.). Using dedicated module is problematic, because you must wait for updating module by developers and it can take some time. With this module you can add always up to date facebook like box plugin code!