Tuto : intégration du bouton Google +1 dans Prestashop

News
  • Accueil
  • Blog
  • Tuto : intégration du bouton Google +1 dans Prestashop

Vous avez déjà intégré le bouton de partage Google +1 sur votre boutique Prestashop ? Très bien, mais pour les autres qui n’y arrivent toujours pas, voici un tuto assez simple pour installer the Google Plus One Button sur Prestashop

 
[Edit du 11/10/2018] Google annonce la fermeture de Google+ après la découverte d’une faille de sécurité. Voici les explications dans un billet du blog officiel. Cet article est donc obsolète à présent.
 

  • Rendez-vous chez Google +1 : http://www.google.com/+1/button/
  • Cliquez sur “Get the code
  • Choisissez la taille de votre bouton parmi 15, 20, 24 et 60 pixels
  • Important : ne touchez pas au langage du bouton !
  • Cliquez sur les options avancées pour afficher ou non le compteur de +1 avec votre bouton
  • Vous avez à présent le code pour intégrer le bouton…
  • Sur votre ftp, dans le fichier www/themes/nomdevotrethème/footer.tpl appliquez le <script> comme suit puis enregistrez :

<!– Place this tag in your head or just before your close body tag –>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
</body>
</html>

  • Ensuite il ne vous reste plus qu’à insérer le code du bouton côté front office par exemple avec les boutons de partage déjà présent sur la fiche produit dans le fichier www/themes/nomdevotrethème/product.tpl puis enregistrez :

<!– usefull links –>
<ul id=”usefull_link_block”>
{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
<li><a href=”javascript:print();”>{l s=’Print’}</a><br /></li>
{if $have_image && !$jqZoomEnabled}
<li><span id=”view_full_size”>{l s=’View full size’}</span></li>
{/if}
</ul>
<g:plusone count=”false”></g:plusone>

  • C’est fini, votre bouton Google +1 est intégré à votre boutique Prestashop

NB : il faudra peut être appliquer un peu de CSS pour que tout soit en forme mais le plus gros est fait 🙂

10 commentaires sur “Tuto : intégration du bouton Google +1 dans Prestashop

    1. @etchegaray : le code est à insérer dans le product.tpl au niveau des boutons d’impression et de zoom sous la grande image par exemple.

    1. @etchegaray : Bonjour, en fait rendez-vous sur Google +1 Button Page et intégrez le code en encadrant le script dans votre .tpl par les balises {literal}{/literal} et ça devrait le faire.

  1. Bonjour,
    j’ai suivi votre tuto à la lettre mais rien ne s’affiche
    pouvez-vous m’aider étape par étape?
    merci

    1. @etchegaray : Bonjour, c’est compliqué de vous dire quoi faire sans url à vrai dire 🙂

Laisser un avis

Consultez les autres articles