Comment intégrer le bouton Pinterest à wordpress

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