Ajouter le bouton j’aime de facebook sur la fiche produit de magento
avril 11, 2012 13 CommentairesSuite à ce précédent article sur l’ajout de bouton réseaux sociaux sur la fiche produit,bouton google plus. On m’a demandé (Cécile) comment ajouter le bouton j’aime de facebook sur la fiche produit de magento. Nous allons voir comment ajouter un bouton j’aime, mais c’est le même principe pour le bouton envoyer de facebook ou autre bouton de partage. On peut modifier les options et l’affichage selon les options choisies sur la page developpers de facebook.
Récupérer le code du bouton j’aime
Dans une premier temps il faut se rendre sur le site developpers de facebook . Utiliser l’interface Step 1 – Get Like Button Code
Dans L’url noter n’importe quelle URL, par ex http://google.fr on la modifiera dans magento. Appliquer les options que vous voulez, l’aperçu sur le cotés droit du formulaire affichera le rendu final.
Trois façons d’intégrer le code sur son site.
Premièrement html5. Pour cela il faut afficher un code javascript SDK juste avant la fermeture du body de magento. Cela tombe bien il y a une référence before_body_end dans les layout magento.
Ouvrez le layout catalog.xml avant la fermeture de la noeud xml catalog_product_view ajoutez ce code :
<reference name="before_body_end"> <block type="core/template" name="partage.facebook" as="partage.facebook" template="facebook/sdk.phtml" /> </reference>
Si vous utiliser une intégration avec un seul layout (local.xml)
Utilisez ce code
<catalog_product_view translate="label"> <reference name="before_body_end"> <block type="core/template" name="partage.facebook" as="partage.facebook" template="facebook/sdk.phtml" /> </reference> </catalog_product_view> Je n'ai pas testé mais ça devrait fonctionner.
Ajouter un dossier facebook dans votre thème
app/design/frontend/Votre_interface/Votre_theme/template/facebook/sdk.phtml
Ajouter le bouton j’aime sur la fiche produit de magento
Ouvrez votre fiche produit :
app/design/frontend/Votre_interface/Votre_theme/template/catalog/product/view.phtml
Coller le code que facebook à généré
<div class="fb-like" data-href="http://toto.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial"></div>
Ne pas oublier de modifier cette partie du code
data-href="http://toto.com" par <?php echo $this->helper('core/url')->getCurrentUrl();?>
ce qui donne code final
<div class="fb-like" data-href="<?php echo $this->helper('core/url')->getCurrentUrl();?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial"></div>
Sur la fiche produit de magento
Sur la page facebok
Vous pouvez également choisir les autres méthodes d’intégrations en n’oubliant pas de changer l’url. Ne pas oublier de tester sur tous les navigateurs. Ce code a été testé sur magento 1.7 Rc1.
Un grand merci pour cet article que je viens seulement de voir! Mais ça ne marche toujours pas pour moi… Je vais persister! Merci en tout cas!
En fait, je crois que ce qui bloque, ce sont les layout. Je ne vois pas du tout où coller le code SDK JavaScript..
Bonjour Cécile,
Ouvre ton layout catalog.xml et avant la fermeture de
colle
Si ton thème est contruit avec un seul layout « local.xml » alors la procédure est différente. dans ce cas je te donnerai la marche à suivre.
Au top ! Mais sais-tu comment Facebook sélectionne la photo qu’il utilise ensuite ? Parce que chez moi, c’est le visuel col_right_callout.jpg (pub sur la gauche) que Facebook reprend, et pas le visuel de l’article…
En tout cas merci pour ce bon tuto !
Bonjour,
Il faut passer des paramètres si je me souviens bien. Je l’ai fait pour un client sur la page onepage success, Regarde la doc facebook.
Oui en effet, il faut ajouter dans le header
Reste à trouver comment le mettre en place…
Merci pour les infos !
Dans le header tu dois rajouter quoi ?
Merci pour l’article, parfait
bonjour,
merci pour cet article, cependant je ne sais pas du tout ou coller la partie générer par facebook dans le catalogue.xml ?
J’ai bien créé un dossier facebook et enregistré la partie SDK dedans, que je retrouve bien lorsque j’ouvre le catalogue.xml, mais ensuite dans view.phtml, je ne sais pas du tout ou coller la partie
Pourriez-vous m’aiguiller ?
Merci.
Jérémy
C’est indiqué dans le tuto, regarde plus haut, tu le places dans le noeud xml suivant :
pardon je me suis mal exprimé,
je parle du code facebook à inserer dans le view.phtml j’ai une page entière de prog et je ne sais pas ou placer le code ?
Cela va dépendre où tu veux que le code apparaisse, en haut de page en bas…
Place le sous le h1 du titre produit, si cela ne te plaît pas tu le déplaceras.
ci-dessous la premiere ligne de prog qui apparait, puis-je le coller avant la fin de cette prog ?
var optionsPrice = new Product.OptionsPrice(getJsonConfig() ?>);
getMessagesBlock()->getGroupedHtml() ?>
<?php //my:del ?>
<form action="getSubmitUrl($_product) ?> » method= »post » id= »product_addtocart_form »getOptions()): ?> enctype= »multipart/form-data »>
<input type="hidden" name="product" value="getId() ?> » />