Magento : partager ses produits sur les réseaux sociaux

Pour donner plus visibilité à vos pages produits, vous serez tentés d’utiliser les réseaux sociaux et notamment les fonctionnalités de partage sur les différentes plates-formes. Voici comment intégrer simplement les liens de partage à vos pages produits Magento.

Les réseaux sociaux : anges ou démons ?

Je vous l’accorde, le titre est un brin provocateur, cependant il me semble important d’amorcer la réflexion. Faut-il être présent sur les réseaux sociaux et gérer une communauté ou simplement utiliser les fonctionnalités de partage issues de ces plates-formes ?

M’adressant généralement à des petits ou moyens e-commerçants, je privilégierai la seconde option. Entendons nous bien, les réseaux sociaux sont une manne extraordinaire de visiteurs et a fortiori d’acheteurs potentiels. Ils représentent l’équivalent de la zone de chalandise des Champs Élysées pour une boutique en ligne.

Pour rester dans l’allégorie des Champs, vous avez donc le choix entre y afficher une publicité ou ouvrir votre point de vente (succursale) sur les Champs. Tout est une question d’investissement. Quel investissement en temps et en argent êtes vous prêt à faire pour conquérir les réseaux sociaux et transformer votre communauté en clients fidèles ?

Car il ne faut pas se leurrer, être présent sur les plates-formes sociales ne se résume pas à créer un compte. Il faut entretenir sa communauté, savoir quoi lui dire, quoi lui offrir, proposer régulièrement des nouveautés. Il faut passer du temps à répondre aux commentaires, qu’ils soient positifs ou négatifs, il faut donc un ligne éditoriale et la plupart du temps, faire appel à un professionnel (Community Manager).

Utiliser les fonctionnalités de partage vous permet en revanche de faire rayonner vos produits à moindre frais. En proposant des liens de partage, vous permettez à vos internautes de publier sur leur réseau social préféré un lien vers votre page produit. Un potentiel de nouvelles visites à ne pas négliger. Tout n’est pas rose pour autant, cette méthode reste passive, c’est à dire que vous ne pouvez relancer ou contrôler les liens qui sont fait sur votre site.

Ceci étant dit, passons à la pratique.

Ajouter les liens de partage grâce à AddThis

Il existe de nombreuses possibilités pour ajouter des liens de partage. Des extensions gratuites ou payantes, l’intégration manuelle de chaque API dans Magento ou utiliser des solutions déportées en Javascript. Je me suis intéressé à la dernière option : elle m’a semblé la plus complète et la plus facile à mettre en place.

Parmi les solutions existantes, j’ai retenu AddThis. Plus de 300 réseaux sociaux couverts, de nombreuses options, facilement personnalisable et munis d’un suivi statistique des partages (pour peu que vous ayez créé un compte). AddThis permet aussi d’envoyer par mail un lien à un ami vers la page produit ou d’imprimer la page en question. Une solution complète qui couvre à mon sens 99% des besoins.

La création d’un compte n’est pas obligatoire, mais utile si vous souhaitez activer le suivi statistique. AddThis vous propose des portions de code toutes prêtes qu’il vous suffit de copier coller sur vos pages ou articles.

Intégration des liens de partage à Magento

Vous avez choisi le format qui vous convient le mieux ? Nous allons donc intégrer les liens de partage dans Magento. Concrètement vous pouvez l’ajouter où bon vous semble : dans l’entête ou le pied de page de votre site. J’ai personnellement une petite préférence pour la zone « ajouter à » ou « Add to » des pages produits car elle se situe dans le champ de vision de l’internaute.

Prenons donc le fichier addto.phtml que vous trouverez ici : /app/design/frontend/default/default/template/catalog/product/view/addto.phtml

Pour notre exemple, nous utiliserons le modèle de base avec des icônes de 32 pixels :

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_email"></a>
    <a class="addthis_button_google"></a>
    <a class="addthis_button_compact"></a>
</div>
 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cfb9e9757ea6c56"></script>
<!-- AddThis Button END -->

Cette portion de code est à insérer avant ou après la liste de partage par défaut de Magento. Nous obtenons donc le code suivant :

<?php $_product = $this->getProduct() ?>
<ul class="add-to-box">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>"><?php echo $this->__('Add to Wishlist') ?></a></li>
 
<?php endif; ?>
<?php if($_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product) ): ?>
<li> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a></li>
 
<?php endif; ?>
</ul>
 
<strong>Partager ce produit :</strong>
 
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_email"></a>
    <a class="addthis_button_google"></a>
    <a class="addthis_button_compact"></a>
</div>
 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cfb9e9757ea6c56"></script>
<!-- AddThis Button END -->

Nous afficherons donc des liens de partage vers Facebook, Twitter, Google. Plus un lien pour envoyer la page par mail à un ami et enfin l’icône « plus » permettant aux internautes de choisir d’autres plates-formes sociales.

Et voilà, le tour est joué, nous allons maintenant essayer de personnaliser le tout à notre sauce.

Paramétrer AddThis

Les options par défaut de AddThis suffiront à nombre d’entre vous, mais vous pouvez cependant modifier quelques paramètres. Choisir les principaux réseaux sociaux, modifier le titre des liens, les images et par exemple le format du message pour Twitter.

Ajouter un nouveau service, avec un titre et une icône personnalisée

Vous souhaitez ajouter un nouveau réseau social ? Viadeo par exemple ? Rien de plus simple, nous ajoutons donc un nouveau lien dans la liste avec le code suivant :

<a class="addthis_button_viadeo" title="Partager sur Viadeo"><img src="http://www.monsitemagento/media/repertoire-de-mes-icones/icone-viadeo.png" alt="Viadeo" /></a>

Notez que nous avons aussi inclus un attribut titre et une image différente. Par défaut, les titres des liens sont en anglais, pensez donc à modifier tous vos titres pour les passer en français. L’image permet de modifier l’icône par défaut par celle que vous aurez préalablement chargée sur votre site.

Personnaliser le message par défaut pour Twitter

Pour personnaliser le message que l’internaute publiera sur Twitter il faut ajouter le petit code Javascript suiavnt :

<script type="text/javascript">
var addthis_share = {
  templates: { twitter: 'Hey ! Jetez un oeil sur {{title}} @ {{url}}' }
}
</script>

Au final

Vous trouverez ci dessous un code près à l’emploi à mettre dans votre fichier addto.phtml

<?php $_product = $this->getProduct() ?>
<ul class="add-to-box">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>"><?php echo $this->__('Add to Wishlist') ?></a></li>
 
<?php endif; ?>
<?php if($_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product) ): ?>
<li> <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a></li>
 
<?php endif; ?>
</ul>
 
<strong>Partager ce produit :</strong>
 
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook" title="Partager sur Facebook"></a>
<a class="addthis_button_twitter" title="Partager sur Twitter"></a>
<a class="addthis_button_google" title="Partager sur Google"></a>
<a class="addthis_button_delicious" title="Partager sur Delicious"></a>
<a class="addthis_button_linkedin" title="Partager sur LinkedIn"></a>
<a class="addthis_button_viadeo" title="Partager sur Viadeo"></a>
<a class="addthis_button_email" title="Envoyer par email a un ami"></a>
<a class="addthis_button_print" title="Imprimer la page"></a>
<a class="addthis_button_favorites" title="Ajouter cette page à vos Favoris"></a>
<a class="addthis_button_compact"></a>
</div>
 
<script type="text/javascript">
var addthis_share = {
  templates: { twitter: 'Jetez un oeil sur {{title}} @ {{url}}' }
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ceadfc841653fac"></script>
<!-- AddThis Button END -->

Pour en savoir plus

• Une extension de Magentix pour ajouter les liens sociaux sur les pages de sa boutique (produits ou autres) : découvrir l’extension social bookmarking
• Un excellent article d’Olivier Lévy de blog e-commerce qui traite des fausses bonnes idées du référencement et notamment des réseaux sociaux : lire l’article sur blog e-commerce
• L’un des blog de Frédéric CAVAZZA traitant des média sociaux en général : Le blog Medias Sociaux
• Un autre blog fort intéressant sur les média sociaux : Kriisiis.fr
• Une alternative à AddThis : Add To Any