Étiquette : reseaux sociaux

Comment intégrer le bouton Pinterest à wordpress

Fred,

Pinterest est un tout jeune réseau social créer il y à peine 2 ans, et ne caisse pas de prendre de l’ampleur, le nombre d’utilisateurs est passé a 23 millions selon les chiffres de Comscore il serait dommage de négliger se réseau social et de ne pas ajouter un pint it ! à vos articles.


Première chose à faire ajouter le script fourni par Pinterest avant la fermeture de la balise </body>

Qui se trouve dans le fichier footer.php de votre thème.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Le code suivant dois être ajouté la l’intérieur de votre boucle.

Dans un premier temps, il faudra ajouter une fonction qui permettra de récupérer url de l’image de votre article pour l’insérer dans le partage :

$pint_image = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()),'full');

Dans la fonction get_post_thumbnail_id(get_the_ID()),’full’)  full récupère l’url de la taille originale de l’image vous pouvez modifier cette fonction :



‘thumbnail’ résolution max 150px x 150px.

‘medium’ résolution max 300px x 300px.

‘large’ résolution max 640px x 640px.

‘full’ format original de l’image.



Après il faudra ajouter le code fourni par Pinterest et ajouté les fonctions :

the_title pour la description

get_permalink pour le lien vers l’article

Et la variable $pint_image pour afficher l’image de l’article.

Le code final a ajouté dans la boucle :

<?php $pint_image = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()),'full');

if ( $pint_image ) { ?>

<div class="pinterest">

<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>

&media=<?php echo urlencode($pint_mage[0]); ?>&description=<?php the_title(); ?>"

class="pin-it-button" count-layout="horizontal">Pin It</a>

</div>

<?php } ?>

Pour changer le format du bouton il vous suffit de changer la class :
count-layout=”horizontal” pour le bouton horizontal avec compteur
count-layout=”vertical” pour le bouton vertical avec compteur
count-layout=”none” pour le bouton sans compteur

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>