Ajouter les boutons de partage twitter et facebook sur son site web

Bref article pour présenter comment installer le bouton « tweeter » et « Partager » respectivement pour Twitter et Facebook. Ces derniers sont de simples scripts JS à intégrer dans son navigateur.

Le bouton tweeter

Voici le code à intégrer pour twitter :

  1. <!-- bouton twitter -->
  2. <a href="http://twitter.com/share" class="twitter-share-button" data-url="{url de la page web}" data-text="{Texte de présentation}" data-count="horizontal" data-lang="fr">Tweet</a>
  3. <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Comme vous pouvez le remarquer il faut apporter deux petites modifications : mettre l'adresse de votre site web (ou plutôt de votre article de blog) et la description de cette dernière. Avec dotclear ces derniers sont disponibles grâce aux balises tpl:EntryURL et tpl:EntryTitle encode_html="1"

Cela nous donne donc pour dotclear :

  1. <!-- bouton twitter -->
  2. <a href="http://twitter.com/share" class="twitter-share-button" data-url="{{tpl:EntryURL}}" data-text="{{tpl:EntryTitle encode_html="1"}}" data-count="horizontal" data-lang="fr">Tweet</a>
  3. <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Ce code est à intégrer dans trois templates : search.html, home.html et post.html. Il trouvera bien ça place au niveau des commentaires entre les balises <div class="post-info-co">. Attention cette dernière n'existe pas par défaut dans post.html.

Le bouton partage de Facebook

De la même manière que pour le bouton twitter, le bouton partager de Facebook s'intègre en ajouter quelques lignes de codes :

  1. <!-- bouton facebook -->
  2. <a name="fb_share" class="fb_share" type="button" share_url="{url de la page web}">Partager</a>
  3. <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
  4. type="text/javascript">
  5. </script>

Il faut évidemment remplacer {url de la page web} par l'adresse du site ou plutôt de la page de votre article. Cela donnerai ça pour dotclear :

  1. <!-- bouton facebook -->
  2. <a name="fb_share" class="fb_share" type="button" share_url="{{tpl:EntryURL}}">Partager</a>
  3. <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
  4. type="text/javascript">
  5. </script>

Tout comme pour le bouton twitter, il faudra ajouter ce code entre les balises <div class="post-info-co"> des templates : search.html, home.html et post.html.

Je ne traite pas ici du bouton like (j'aime) mais il fonctionne exactement de la même manière que partager. Attention, pour ce dernier il faudra ajouter des metatags dans le header. Tout est expliqué ici et ici.

En savoir plus

Pour un savoir plus sur ces "bouton" rien de mieux que la documentation officielle !
Pour le bouton like, deux pages peuvent vous intéresser : la page "developer" de Facebook et le site d'opengraph Pour le bouton partager, la page de Facebook détails comment personnaliser le bouton et comment ajouter des médias (image, description) au lien "partager". Enfin, pour le bouton tweeter, voici un générateur de code.

Bon courage !

 
1. Le
30 sept.
2011
10h58
par gaelle

merci pour ces développements très utiles

2. Le
24 juin
2013
16h34
par Devis mutuelle

Bonjour , je vous signale que les codes fournis sont pas correcte , j"ai les essayée tous sur mon site mais ca marche pas

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

À propos

Photographie

Maxence de Flotte

Développeur cœur PrestaShop

Passionné de nouvelles technologies

PHP, HTML5/CSS3, jQuery, Bootstrap, LESS CSS, ...

Voir mon CV

Mes projets