Prestashop est un cms de E-commerce open-source très complet et très performant. Nous allons voir dans cet article comment ajouter un bouton « j’aime » ou « recommander » sur une page produit.

Génération du bouton Facebook

Commençons par la génération du code pour le bouton.

Rien de plus simple, Facebook propose un outil pour vous aider: http://developers.facebook.com/docs/reference/plugins/like/

C’est dans cette page que vous pourrez définir la hauteur, le type de bouton (j’aime ou recommander), …

Dans la zone url mettez : prestashop.

Une fois votre code généré, remplacez simplement « prestashop » par le code suivant dans le code fourni par google :

{$link->getProductLink($product)}

Vous obtiendrez un code qui ressemble à ça :

<div id="fb-root"></div><script src="http://connect.facebook.net/fr_FR/all.js#appId=278792428803276&xfbml=1"></script><fb:like href="{$link->getProductLink($product)}" send="true" width="550" show_faces="false" action="recommend" font=""></fb:like>

Notez que vous pouvez remplacer us_US par fr_FR ou une autre locale pour changer la langue des liens facebook.

Insertion du bouton dans la page produit

Vous devez ouvrir le fichier product.tpl qui se trouve dans le répertoire de votre thème.

Le code facebook sera à ajouter entre <ul id= »usefull_link_block »> et {if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if} et entre encadré par des balises <li> et </li>.

ça donne le code suivant :

<!-- usefull links-->
		<ul id="usefull_link_block">
		<li><div id="fb-root"></div><script src="http://connect.facebook.net/fr_FR/all.js#appId=278792428803276&xfbml=1"></script><fb:like href="{$link->getProductLink($product)}" send="true" width="550" show_faces="false" action="recommend" font=""></fb:like></li>
			{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
			<li><a href="javascript:print();">{l s='Print'}</a><br class="clear" /></li>
			{if $have_image && !$jqZoomEnabled}
			<li><span id="view_full_size" class="span_link">{l s='View full size'}</span></li>
			{/if}
		</ul>
	</div>