How do I get your module to look right and integrate correctly on my custom theme ?

You have configured your social widgets but one or more of them do not get displayed properly on your theme ?

This is what you need to know about the widgets' configuration and the choice of hooks:

1) Each widget from each social network will be included in an IFRAME when teh social network's JavaScript code is executed. Let's take, for example, Facebook's Like button.

If we look at the source code, the button loosk like this before the Facebook JavaScript adds the IFRAME just after the DIV tag.
 

<div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-send="false" data-width="120" data-show-faces="false" data-href="/en/prestashop-modules-social-networks-facebook/16-facebook-ps-essentials-for-prestashop.html" data-layout="box_count" fb-xfbml-state="rendered"><span style="height: 61px; width: 46px;">

 

Then, Facebook automatically adds this code :

What is important to know is that thye CSS styles from your theme can sometimes override the ones included by the widget. Wrapping DIV that is too wide, style propeties that take over those of the widget etc... Although this is quite rare, it does sometimes happen with personalized themes.

2) Important: pick the correct hook for each widget according to how much space is available on your website.

Let's take, for example, the "Like Box" widget from Facebook:

 

On a standard PrestaShop 1.5 version, the left column has a width of 202px. Therefore, you need to enter 200px for the width in the widget's configuration, to account for the 1 px border on each side, which will add up to 202px. Same thing for height: you will need to adjust it according to how many Facebook user photos you wish to display. 

For Prestahop 1.6 the left column has a width of 270px

Facebook prerequisites indicate a minimum width of 292px, but you can actually set it to something smaller.

The main concepts with widgets and hooks:

- Look at prerequisites on the social networks (for Facebook, it is https://developers.facebook.com/docs/plugins/)

- Test your widgets by playing with the settings

- Determine if the hook you selected is adapated to the widget in terms of available room.