Intégrer des boutons de partage vers les réseaux sociaux.

Publié par Fred Le

Catégorie(s): Tutoriel Wordpress
 

Dans ce tutoriel que j’ai mis à jour je vais vous donner les codes pour insérer les boutons de partage vers les réseaux sociaux Facebook, Twitter, Google Plus et linkedin sans utiliser de plugin et les différentes possibilités d’affichage.

 

Facebook

Ce réseau social  met à disposition un  grand nombre de possibilités d’affichage  avec les boutons : recommander, envoyer, j’aime.

Pour ajouter ces boutons au format HTML5 (l’option iframe n’est plus disponible)  il vous faudra ajouter le script suivant  dans votre fichier

header.php après la balise <body>

<script>

(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}

(document, 'script', 'facebook-jssdk'));

</script>

Pour ajouter les boutons de partage, vous devez les placer à l’intérieur de la boucle du fichier single.php pour les articles et page.php pour vos pages ainsi que les différents modèles liés à ces fichiers.

Le bouton J’aime

<!-- bouton j'aime + Envoyer--->

<li>

<fb:like send="true" layout="button_count" width="250" font="arial" action="like" href="<?php echo get_permalink(); ?>"></fb:like><br />

</li>

<!-- bouton j'aime vertical avec compteur grand format--->

<li>

<fb:like send="false" layout="button_count" width="90" font="arial" action="like" href="<?php echo get_permalink(); ?>"></fb:like><br />

</li>

<!-- bouton j'aime avec photo du profile de qui ont cliquer j'aime--->

<li>

<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-layout="standard" data-send="false" data-width="450" data-show-faces="true" data-action="like"></div>

</li>

<!-- bouton j'aime + envoyer avec photo du profile de qui ont cliquer j'aime--->

<li>

<div class="fb-like" data-href="<?php echo get_permalink(); ?>" data-layout="standard" data-send="true" data-width="450" data-show-faces="true" data-action="like"></div>

</li>

Le Bouton recommander

<!-- Bouton recommander seul--->

<li>

<fb:like send="false" layout="button_count" width="90" font="arial" action="recommend" href="<?php echo get_permalink(); ?>"></fb:like><br />

</li>

<!-- Bouton recommander + Envoyer--->

<li>

<fb:like send="true" layout="button_count" width="250" font="arial" action="recommend" href="<?php echo get_permalink(); ?>"></fb:like><br />

</li>

<!-- Bouton recommander + compteur--->

<li>

<div data-href="<?php echo get_permalink(); ?>" data-layout="box_count" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>

</li>

Bouton envoyer

<!-- Bouton envoyer seul--->

<li>

<style>

.fb-send  { float:left;}

.fb-txt { float:left; margin-left:5px; font-size:12px;}

</style>

<div class="fb-send" data-href="<?php echo get_permalink(); ?>"></div><p class="fb-txt">Envoyer cet article vos amis</p>

</li>

Google Plus

Pour ajouter les boutons de Google Plus il vous faudra ajouter le script suivant dans votre fichier header.php  avant la fermeture de la balise </head>

<script type="text/javascript">

  window.___gcfg = {lang: 'fr'};

  (function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/plusone.js';

    var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

  })();

</script>

Ensuite ajoutée les codes des boutons suivant dans les fichiers single.php pour les articles et page.php pour vos pages ainsi que les différents modèles liés à ces fichiers.

<!-- Bouton +1 avec compteur vertical grand format--->

<li>

<g:plusone size="tall"></g:plusone>

</li>

<!-- Bouton +1 avec compteur horizontal petit format--->

<li>

<g:plusone size="small"></g:plusone>

</li>

<!-- Bouton +1 avec compteur horizontal moyen--->

<li>

<g:plusone size="medium"></g:plusone>

</li>

<!-- Bouton +1 avec compteur horizontal grand format--->

<li>

<g:plusone size="standard"></g:plusone>

</li>

Twitter

Pour ajouter les boutons Tweeter il vous faudra ajouter le script suivant  dans votre fichier header.php  avant la fermeture de la balise </head>

<script>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);

js.id=id;js.src="//platform.twitter.com/widgets.js";

fjs.parentNode.insertBefore(js,fjs);}}

(document,"script","twitter-wjs");

</script>

Ensuite ajoutée les codes des boutons Tweet suivant dans les fichiers single.php pour les articles et page.php pour vos pages ainsi que les différents modèles liés à ces fichiers.

<!-- Bouton Tweet avec compteur horizontal petit format--->

<li>

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="fr">Tweeter</a>

</li>

<!-- Bouton Tweetavec compteur horizontal grand format--->

<li>

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="fr" data-size="large">Tweeter</a>

</li>

<!-- Bouton Tweet avec compteur vertical grand format--->

<li>

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo get_permalink(); ?>" data-lang="fr" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a>

</li>

<!-- Bouton tweet personnalisable--->

<li>

<style>

  #custom-tweet-button a {

    display: block;

    padding: 2px 5px 2px 20px;

    background: url('http://a4.twimg.com/images/favicon.ico') 1px center no-repeat;

    border: 1px solid #ccc;

	width:100px;

  }

</style>

<div id="custom-tweet-button">

  <a href="https://twitter.com/share?url=<?php echo get_permalink(); ?>" target="_blank" > Tweet</a>

</div>

</li>

Linkedin

Pour ajouter les boutons in il vous faudra ajouter le script suivant dans votre fichier header.php  avant la fermeture de la balise </head>

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

Ensuite, ajouté les codes des boutons in suivant dans les fichiers single.php pour les articles et page.php pour vos pages ainsi que les différents modèles liés à ces fichiers.

<!-- Bouton in avec compteur vertical grand format--->

<li>

<script type="IN/Share" data-counter="top"></script>

</li>

<!-- Bouton in avec compteur horizontal --->

<li>

<script type="IN/Share" data-counter="right"></script>

</li>

<!-- Bouton in sans compteur horizontal --->

<li>

<script type="IN/Share"></script>

</li>

Mots clés: , , , ,





4 Commenataires pour :

“Intégrer des boutons de partage vers les réseaux sociaux.”

  1. Bonjour très intéressant article, je suis tombé dessus car je cherche un moyen (ou pluggin) de montrer un compteur qui regroupe l’ensemble des likes, tweet, partage fait sur un blog.
    Pour bien me faire comprendre j’ai une 50 aine d’article en moyenne 10 likes 5 tweets 10 partages le compteur afficherait que 500 likes 250 tweets 500 shares…

    Je l’ai déjà vu sur l’un ou l’autre blog mais pas moyen de le trouver..

  2. vazyvite dit :

    Article intéressant mais bourré de fautes d’orthographes, c’est dommage mais ça gâche un peu l’information et surtout ça dévalue l’auteur…

  3. Emmanuelle dit :

    Super, Merci !

  4. Bellafkih hayat dit :

    c’était trés utile 🙂

Laisser un commentaire

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pour affiché du code HTML, CSS, PHP, JAVASCRIPT utilisé le marqueur : [code][/code]