Limiter l'affichage du "Pin it button" à certaines images de votre blog.


Dans ce post nous allons voir comment gérer l'apparition de façon sélective du bouton "Pin it" sur les images de son blog sur Blogger.

Quand on ouvre un blog, le but étant de partager sur ses expériences, une technique pour améliorer sa diffusion et visibilité consiste à utiliser les services de Pinterest.

Il existe plusieurs méthodes pour faire fonctionner ce bouton :
Je vais m'attarder sur celle que je trouve la plus "efficace" en matière d'accessibilité pour les lecteurs : Rendre ses images directement "épinglables" par l'apparition d'un bouton "Pin it" au survol de vos images, comme vous pouvez le voir au survol de l'image ci dessus.

- Voici ce que propose Pinterest :  générateur de widget

- Pour ma part, j'ai plutôt utilisé l'astuce de Helplogger leur script permettant la customisation de votre bouton.

Aller dans : modèle, modifier code html

placez alors votre curseur dans le code en un clic (sans manip) faire CTRL F et chercher </body>



Il suffit après d'ajouter le script suivant, juste avant cette balise </body> qui se trouve à la fin du code html de votre blog.
<script> //<![CDATA[ var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0WZ7rQDiLfHbaObRJcfPjjXA0g-3Wla3CdXYSFw4VLk1_lnh2wpMCOkQPfj5vLfjGURKgzUyOPJsjZiQImCrIG_vgL71q8beBH5Ba60Re2HqqL-Kp7pCO_VbTxtynGLrLPaY8t3WOK7QN/s1600/pinit-button.png"; var pinit_button_position = "center"; var pinit_button_before = ""; var pinit_button_after = ""; //]]> </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> <script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'> // Visit helplogger.blogspot.com for more widgets and tricks. </script>


L'adresse d'image en bleu correspond au bouton que vous faites apparaitre.
ici celle ci en 71px  :

Vous pouvez changer cette image pour celle de votre choix.

Quant au mot en rouge "center" il place le bouton au centre de votre image.
Vous pouvez changer sa position pour :
- en haut à gauche   topleft
- en haut à droite   topright
- en bas à gauche   bottomleft
- en bas à droite   bottomright

Le plus gros est fait MAIS si vous vous limitez à cet ajout, le bouton "pin it" s'affichera sur TOUTES vos images sans distinction.
C'est un problème quand :
*/*  des images ne présentent aucun intérêt à être épinglées (comme des gifs animés ou des petites icônes qui servent à clarifier des paragraphes)


qui donnerait cet effet inapproprié :



*/*  ou quand certaines images placées hors contexte perdent leur intérêt (comme des éléments qui servent à la fabrication d'un DIY)


*/*  ou quand les images ne vous appartiennent pas (servent votre propos mais vous n'en êtes pas l'auteur) ici une photo en provenance de marie claire maison que j'ai placée dans un de mes posts au sujet de la peinture bleu canard.


Dans ces cas là, pouvoir gérer l'attribution de ce bouton "Pin it" sur les images de votre choix est nécessaire.

J'ai donc cherché le moyen de n'activer la fonction d'épinglage que sur les images que je souhaite cibler.

En fait c'est simple, encore fallait il trouver l'info ;-)   Merci Helplogger !

1er point :
Il suffit d'insérer à ces images que vous souhaitez non épinglables, en plus du src="..."  un    class="nopin" dans l'édition html de votre article

exemple :
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWzzdtWp29gd2yE_cVlSwUZgEalW_AQXY4B5qNyVjmDoZsRiW1iarF_JJFDvCPt-wkdMtrzPlt4CYqYDAtgcfvgrrA9FIvSMER54OT__NA_w8DnesGQSGheiIhDj0E2IASmwVn4OKfcTF/s1600/pin-it+bouton.jpg" width="500" class="nopin"/>

L'image ne sera alors plus concernée par le script.
Ce que ça donne en capture d'écran sur blogger :



2ème point :
Sur Blogger, il peut être intéressant aussi d'utiliser les balises conditionnelles pour que le script d'épinglage que vous insérez dans votre code xml concerne un type de page précis.
Pour ma part, ne souhaitant pas l'affichage de ce bouton sur tout le blog (comprenant page d'accueil, pages statiques) mais uniquement sur les pages articles.
J'ai enfermé le script dans ces lignes :
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
...
 </b:if>


Ceci vous évite d'avoir à passer en revue la totalité de votre blog pour ajouter le class="nopin" pour ne vous concentrer que sur l'édition des articles.

3ème point :
Si vous souhaitez pour x raisons ne pas du tout autoriser les internautes à épingler vos images.
Il vous faut insérer cette ligne de code dans votre xml avant la balise </head> :

<meta name="pinterest" content="nopin" />

Par cette meta tag les utilisateurs de Pinterest verront s'afficher un message d'erreur les prévenant que vous n'autorisez pas cette manipulation d'épinglage.
Voici un lien du site Pinterest à ce sujet : https://help.pinterest.com/fr/articles/prevent-pinning-your-site

BON EPINGLAGE !
Si vous avez aimé cet article, pour le partager c'est par ici :

0 commentaires:

Enregistrer un commentaire

NB : Si vous souhaitez être informé des commentaires qui suivront le votre sur cet article, cochez la case "M'informer" avant de publier.