Installer un bouton "Pin it" au survol d’une image [wp+blogger]

installer-bouton-pinterest-images

Installer un bouton "Pin it" au survol d’une image [wp+blogger]

Comme je vous le disais dans mon article « Petit guide Pinterest pour blogueuses », installer un bouton de partage Pinterest est important pour partager les images de son blog et pour permettre à vos lecteurs de les partager également.

Aujourd’hui, nous allons donc voir comment installer un bouton « Pin it » pour le partage Pinterest au survol sur vos images sur blogs Blogger et WordPress.org.

installer-pinterest-bouton-blogger

Pour voir le rendu, je vous invite à aller survoler l’image sur un thème blogger que j’ai créé ici 

◊ Pour commencer, rendez vous dans votre administration Blogger dans « modèle » puis cliquez sur modifier le code HTML.

◊ Recherchez la balise </body> (à l’aide d’un ctrl / cmd + f) et collez le code suivant juste avant la balise </body> :

<script>
//<![CDATA[
var bs_pinButtonURL = "http://i1262.photobucket.com/albums/ii617/cdlgraphicart/corail3_zps4b7fa539.png";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

le code devrait ressembler à ceci :

pinterest-bouton-hover-blogger

 

Enregistrez le modèle, si vous voulez changer la position du bouton sur votre image changez le « topright » par « center » pour avoir le bouton au centre de l’image , « bottomleft » pour l’avoir au coin gauche en bas, « bottomright » pour le coin droit en bas ou encore « topleft » pour le coin gauche en haut.

Pour changer l’icône Pinterest (je vous en ai créée quelques unes que vous retrouverez en fin d’article) remplacez la ligne du début « http://i1262.photobucket.com/albums/ii617/cdlgraphicart/corail3_zps4b7fa539.png » par l’url de l’image de votre choix.

vos photos sont prêtes à être partager, et le résultat devrait ressembler à ceci :

bouton-pint-it-blogger

 

wordpress-installation-pin-it-bouton

 

Nous allons passer par la méthode Plugin, rendez vous dans « Extensions », « ajouter » et recherchez jQuery Pin It Button For Images.

Installez l’extension, activez la et cliquez sur « settings » pour régler les paramètres.

Pour utiliser une des images que je vous propose en fin d’article, cliquez sur l’onglet « visual » en haut et ajoutez l’url de votre image comme ci dessous ;

pinterest-pin-it-wordpress-bouton

 

Enregistrez les modifications en bas de la page et voilà ! le rendu sera le même que sur mon blog.

Voici une petite série de boutons que je vous ai concoctés, j’espère qu’il vous plairont, pour les utiliser et les installer, referez vous au guide « installation » en fin de mon article « Ajouter un bouton de retour vers le haut de la page« 

[nggallery id=4]

41 Commentaires
  • Rainbow H

    26 août 2014 at 11 h 33 min Répondre

    Coucou et merci beaucoup pour ce tutoriel!
    Marche nickel sur mon blog et l’installation est bien expliquée et claire.
    Pareil pour changer le design du bouton.
    J’ai eu beaucoup de mal à trouver comment mettre en place ce bouton Pin et je te remercie vraiment, j’avais complètement laissé tomber!

    • graphicart

      26 août 2014 at 18 h 08 min Répondre

      super, je suis contente que tu l’ai installé, le résultat donne très bien :-)

  • GG

    26 août 2014 at 21 h 23 min Répondre

    Coucou La miss !
    Purée c’est super joli ! Je prends tout pour un blog auquel je pense, c’est juste nickel au poil parfait :)
    Au fait, j’aimais beaucoup la version précédente de ton blog, mais là j’sais pas, cette nouvelle coupe lui va vraiment pas mal 😀

    • graphicart

      27 août 2014 at 12 h 38 min Répondre

      ah oui, qu’est ce que ce projet secret hein ? ^^ merci en tous cas!

    • GG

      27 août 2014 at 21 h 44 min Répondre

      Rien de secret, c’est encore une envie pas aboutie mais je vois plein de trucs sympas notamment ici pour mettre sur un blog que je veux lancer sérieusement début septembre. Dès que je suis sûre de moi je te dirai, que tu me donnes ton avis :)

      Le pin it j’avais tenté au tout début sur Yes We Blog mais ça donnerait rien j’ai trouvé :(

      • graphicart

        28 août 2014 at 10 h 35 min

        ok super je te donnerai mon avis avec plaisir! :)

  • Iris de Blogueur Débutant

    27 août 2014 at 14 h 04 min Répondre

    Salut Charlène,

    Super, merci pour le tuto et le code ! Si je me décide à franchir le cap Pinterest, je reviendrai sans hésiter à tes articles pour un peu d’aide 😉

    A bientôt !
    Iris

    • graphicart

      27 août 2014 at 14 h 06 min Répondre

      Coucou :) de rien, bien sur n’hésite pas à te servir de tout ça c’est fait pour ^^à bientôt Iris!

  • Amélie

    28 août 2014 at 9 h 07 min Répondre

    Youhou, je me cassais également la tête pour savoir comment faire, merci beaucoup !

  • Mon Petit Quelque Chose

    13 septembre 2014 at 8 h 50 min Répondre

    J’ai découvert votre blog en faisant des recherches sur le net. Mais quelle beauté! Merci mille fois pour ce tutoriel et ces bouton Pin-it! J’en ai installé un sur mon blog, c’était simple et efficace, je suis vraiment contente! Quand j’aurai un moment ce week end, je vais me poser en mode cocooning et parcourir plus en détail votre blog! Bon week-end à vous!

    • graphicart

      13 septembre 2014 at 9 h 13 min Répondre

      Merciiiii beaucoup! j’imagine, si ce n’était pas mon blog, je me ferais des soirées designs de blog avec mes tutos haha 😀 à bientôt!

  • Kenza

    15 octobre 2014 at 12 h 43 min Répondre

    J’en ai installé un (le corail rond) merci beaucoup !

  • Le Bloc-Notes de Carmen

    10 novembre 2014 at 10 h 38 min Répondre

    Je viens de découvrir ton blog et je le trouve extra! Très bien expliqué et qui donne envie de lire!
    Le soucis avec mon blog Blogger c’est que je ne trouve pas la balise «  ». J’ai bien fait Ctrl+f et rechercher la balise mais il n’y a rien qui correspond! Et ca fait plusieurs semaines que je suis bloquée avec mon code html car je ne retrouve pas les mêmes balises que sur les autres blogs. Mon blog est une personnalisation d’un design simple, ai-je fait/rajouté/supprimé quelque chose qu’il ne fallait pas?
    Je suis tout ouïe pour un conseil!

  • Laureabeauty

    4 décembre 2014 at 14 h 25 min Répondre

    Merci pour les codes et les icônes c’est très gentil de ta part !!!
    Et ton blog est génial en passant ! On y apprend beaucoup de chose et le design est parfaiiiit ! J’adore !
    Bisouuus 😀

    • graphicart

      9 décembre 2014 at 23 h 19 min Répondre

      Coucou Laura! merci à toi pour ton passage et tes compliments ça fait toujours plaisir!

  • Mélanie

    10 décembre 2014 at 20 h 58 min Répondre

    Super ça marche parfaitement :)
    Merci
    Bises,
    M.
    http://dmedr.blogspot.fr/

  • Céline

    17 décembre 2014 at 18 h 48 min Répondre

    Coucou :)
    J’ai aussi essayer, le bouton pin it s’affiche bien seulement quand je clique dessus, j’arrive sur la page « cette page n’existe pas ».
    J’ai ce même problème avec les gadget du type linkwithin et ce depuis que j’ai changé le nom de mon blog.
    Aurais-tu une idée de comment corriger ce problème ?
    merci :) ton blog est une vraie mine d’or !

  • Tatjana

    21 janvier 2015 at 16 h 31 min Répondre

    Hello,
    Merci beaucoup pour le tuto, mais je me retrouve maintenant avec 2 boutons Pin it… le « traditionnel » (rectangulaire et écrit en rouge) et un des tiens… et impossible de trouver dans le code html où se niche ce satané bouton traditionnel…. car ça fait un peu con d’avoir 2 bouton Pin it sur ses photos 😉 Si tu as une idée, je suis preneuse… bye

    • Marie

      10 mars 2015 at 14 h 31 min Répondre

      Coucou,
      J’ai eu la même chose que toi et je pense que c’est tout simplement parce que tu as installé le plugin Pinterest sur ton navigateur pour justement pouvoir épingler plus facilement sur les sites que tu visites. En gros, je crois que ça ne s’affiche en double que pour ceux qui ont ce plugin mais pour les autres à priori, il n’y a que l’adorable Pin It de Charlène :)

  • emotionwizard

    3 février 2015 at 12 h 14 min Répondre

    J’ai réussi ! Mercii bcp !

  • Marion - Le Petit Monde de Kirichou

    5 février 2015 at 22 h 51 min Répondre

    Bonsoir,

    Je ne dois pas être très douée, je ne comprends pas … Mon blog est sur Blogger, je suis dans la balise HTML mais malgres la recherche je ne trouve pas le code
    :-( du coup je n’avance pas :-(
    que peut il bien se passer?

    • graphicart

      22 février 2015 at 18 h 45 min Répondre

      Bonsoir,
      pense à bien cliquer dans la fenêtre d’édition de code avant d’effectuer le ctrl/cmd+F, bonne soirée.

  • Chouby

    16 février 2015 at 14 h 27 min Répondre

    Bonjour, j’avais mis le bouton c’était génial mais aujourd’hui j’ai réussi enfin a installer une image a la place de lire la suite sur le résumé de mes articles et du coup le bouton pin it est devenu génant sur le « lire la suite » alors il y a t’il moyen de bloquer pin it sur lire la suite et juste qu’il soit sur les photos dans l’article. (j’espère être clair)

  • la vie ordinaire d'une Bretonne

    23 février 2015 at 9 h 32 min Répondre

    Merci pour tes indications, maintenant j’ai un joli bouton « Pinterest » ^_^

  • Emilie

    16 mars 2015 at 15 h 36 min Répondre

    Merci beaucoup, je te pique un logo =)
    Et merci en général car je « déguste » ton blog :)

  • Cél

    25 mars 2015 at 17 h 53 min Répondre

    Bonjour! :) Merci beaucoup pour ce tuto très utile, je suis en train de m’arracher les cheveux pour ajouter un bouton pin it… J’arrive bien à installer le tien en copiant collant le code HTML, mais je ne parviens pas à trouver l’adresse html des autres boutons (même ceux que tu proposes) pour obtenir autre chose que le bouton corail… Help! :) Merci par avance!

  • Anaïs

    17 avril 2015 at 19 h 35 min Répondre

    Coucou ! Merci beaucoup pour cette astuce, par contre je n’ai pas réussi à copier l’adresse de l’image car ça me disait copier l’adresse du lien (vers pinterest du coup puisque toutes tes images ont le bouton pin it). Du coup j’ai enregistré l’icone sur mon bureau. J’ai choisi la couleur menthe et ça va super bien avec le thème de mon blog 😀
    Je viens de découvrir ton blog et il est vraiment super !!

    A très bientôt !

  • Vanessa Lekpa

    19 avril 2015 at 22 h 10 min Répondre

    Merci beaucoup pour ces explications très claires et ce script facile à installer ( et ce beau logo ! )

  • Un Nuage à Croquer

    4 mai 2015 at 11 h 55 min Répondre

    Coucou !
    Merci beaucoup pour ce tuto! On n’y pense pas vraiment, mais c’est vraiment un vrai plus pour le blog avec un très jolie design en plus >.<
    Merciiii

  • Fay

    14 mai 2015 at 19 h 34 min Répondre

    Merci pour l’astuce ! Le bouton est fraichement installé chez moi !

  • Claire la paillette

    31 mai 2015 at 15 h 11 min Répondre

    Merci beaucoup pour ce tuto! Tes icônes sont très jolies! Mais grâce à toi, je vais pouvoir créer mon propre pin it et l’ajouter! Merciii! :-)

  • L Usine A Bulle

    3 septembre 2015 at 14 h 18 min Répondre

    Merci beaucoup pour ce tuto !

  • Queina

    30 septembre 2015 at 22 h 20 min Répondre

    Je n’arrive pas à installer le bouton pin it…. J’y suis depuis toute la soirée, et je n’arrive pas à comprendre ce qui ne va pas… J’ai collé et recollé le code avant la balise mais pas moyen… une idée d’où ça vient ?
    Est ce que mon thême ne me le permet pas ? (mon blog est en construction donc c’est normal s’il est en vrac, c’est un blog test, cependant j’ai laissé l’adresse pour voir ce qui cloche)

  • Edelweiss

    10 novembre 2015 at 14 h 02 min Répondre

    Super ton tuto, j’avais déjà essayé plusieurs fois d’installer un bouton Pin It et n’y arrivant pas j’avais lâché l’affaire. Mais grâce à ton post, ça a marché du premier coup. Et j’ai utilisé un de tes boutons qui va parfaitement avec mon blog ! Merci encore.

  • Champoux

    3 mars 2016 at 19 h 58 min Répondre

    Wow quel beau tuto merci beaucoup. J,ai une question. Mon Bouton pin sur mon blog apparaît au centre et c’est ce que je veux. Mais lorsque je prends une photo de mon blog et que je l’amène dans un forum par exemple le bouton apparaît en haut à gauche. Comment faire pour le changer et le mettre au centre comme pou mon blog ?

  • Du fil et mon ...

    2 mai 2016 at 21 h 44 min Répondre

    bonsoir, encore merci pour tous ces conseils et tutos qui m’ont permis d’agrémenter joliment mon blog … Il y a 2 mois environ, mon bouton pin it n’apparaît plus ou plutôt, c’est un point d’interrogation qui apparaît … Du coup , j’ai tout enlevé … Donc ma question est : y a t-il eu un changement de code ?
    Encore merci !

  • Sirop de Fraise

    15 mai 2016 at 23 h 23 min Répondre

    Hello, j’avais utilisé ton tuto pour installer un bouton pin it au survol de la souris… Tout marchait bien jusqu’à il y a 2-3 jours mais depuis aujourd’hui plus rien n’apparaît au survol des images de mon blog… alors que je n’ai rien modifié au blog… Je ne comprends pas! Saurais-tu m’aider? Merci beaucoup 😉
    Bises

    • graphicart

      17 mai 2016 at 5 h 52 min Répondre

      Salut ! Alors il y a quelques temps quand j’ai refait le blog, j’ai supprimé par mégarde le dossier avec toutes les images de tuto, tu pourras en trouver une autre facilement en cherchant un peu dans les blogs ou sur google image :-) mais ne t’inquiete pas pour le coup ce n’est pas de ta faute.

      • Sirop de Fraise

        17 mai 2016 at 13 h 27 min

        Merci de ton retour ! Humm, en fait j’avais modifié le lien de l’image par celui de ma propre image « pin it » aux couleurs de mon blog, donc c’est pour cela que je ne comprends pas pourquoi ça ne marche plus… :-(

  • Nina

    30 août 2016 at 18 h 40 min Répondre

    Merci pour ce tuto ! Je l’ai suivi parfaitement mais cela ne fonctionne pas, le « pin it » n’apparait pas en survolant la photo… Pourtant je l’avais avant et je me suis rendu compte qu’il avait disparu ! Même en appliquant ton tuto cela ne fonctionne pas, que dois-je faire ? :/

Poster un commentaire