Étiquette : linkedin

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

Fred,

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('https://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>