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


html box module for prestashop

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 developers like box plugin page


Available setting in 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

 

Facebook like box plugin code

 

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:

 

prestashop module html box


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:

 

facebook like box added to prestashop by html box module

 


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!


author milos myszczuk
Article by Milosz Myszczuk PrestaShop expert, official PrestaShop community moderator. PHP developer, specialist in relative and spatial databases management, GIS Analyst, CEO & founder of VEKIA interactive agency. Read more about VEKIA company
If you like my articles and want much more valuable tips, feel free to send me donation
1.4 version 1.4.11 1.6 404 addon admin advertise ahref ajax alpha animation api app application authentication back office backup badge banner basics block bootstrap button cache carrier cart catalog category certificate changelog chat class clear client clip cms code colors columns comments configuration contact container content controller cookie counter country coupon css csv currency customer dashboard database debug default delete delivery desktop developer device disable discount displayNav displayTop download dynamic editor effect empty encrypt engine error exchange exclude export facebook faceshop fade fancoupon fancybox fanpage fatal feature feed field file fix fixed font footer free friendly url front ftp full gallery generate gift global godaddy google google+ gray grid groupon header help hide highlight homefeatured homepage hook hosting hover howto htaccess html html5 ID image import include input instagram installation integration iPhone issue javascript jquery kgb knowhow languages law left likebox link list livingsocial loading log login logo loyality mail mailing maintenance manufacturer marketing marquee mcrypt menu meta mobile modification module movie moving multilanguage multiupload must have mysql news newsletter notification number open graph order override page password performance PHP phpmyadmin picture pinterest plugin popup post prestashop prestashop 1.0 prestashop 1.1 prestashop 1.2 prestashop 1.3 prestashop 1.4 prestashop 1.5 price rules problem product profile promotion proslider purifier quantity query quick tip random rates register reinsurance release reporting reset responsive restore results ribbon rich text right sales search security seo service shadow share shipping shop shopmania slider smarty social networks SQL SSL statistics stock store style subcategory superuser support switcher tab tablet tag tax template text theme tinyMCE tips and tricks tpl tracking translations tree trends trigger tumblr tutorial twitter update upgrade upload variables video visits voucher vulnerability web2print wide widget width window wishlist wysiwyg youtube zip zopim