Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Un petit tutoriel assez simple aujourd'hui : comment ajouter un bouton Pinterest "Pin it" qui apparaît au survol des vos images.

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Allez c'est parti pour les explications :)


Sauvegarde du thème

Je vous conseil fortement de faire une sauvegarde avant toute modification, comme toujours. C'est vraiment indispensable si vous faites une erreur, car on peut facilement revenir en arrière.

Cliquez sur Modèle à partir de votre tableau de bord, puis sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez ensuite sur Télécharger le modèle complet et sauvegardez le fichier sur votre ordinateur :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

En cas d'erreur il suffira de cliquer sur Choisissez un fichier et de sélectionner ce fichier.

Création du bouton Pin it

Pour créer votre bouton et générer le code que vous allez devoir inclure dans votre thème, il faut aller sur le site de Pinterest sur la page Générateur de widget.

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

A la ligne Type de bouton cliquez sur Survol d'image.
Sous cette ligne vous pouvez choisir l'apparence du bouton :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Voici un aperçu des différentes possibilités :

Rectangulaires

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger
Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Ronds

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Une fois que vous avez sélectionné l'apparence de votre bouton, descendez la page. Sous Copier le code vous trouverez le code à coller dans votre code HTML.
Copiez donc ce code :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Ajout du bouton à son blog

Allez maintenant sur le tableau de bord de votre blog. Sous Modèle, cliquez sur Modifier le code HTML :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à la suite.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.
Dans cette boîte de recherche collez la ligne suivante :
<head>
Juste en-dessous de cette ligne collez le code de votre bouton :

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Attention ! Il y un petit problème entre Blogger et le code de Pinterest. Pour régler ce problème il faut remplacer les 2 mots suivants du code :
async defer
par :
async="true" defer="true"
Sauvegardez, et voilà ! Un bouton Pinterest Pin it s'affiche maintenant automatiquement sur les images de votre blog ! ;)

Ajouter un bouton Pinterest Pin it sur les images du blog Blogger

Bon blogging !

Autres articles

60 commentaires:

  1. Merci beaucoup pour ce pas à pas... malheureusement chez moi ça n'a pas l'air de fonctionner. Ce message apparait : Erreur d'analyse XML, ligne 6, colonne 38 : Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.

    RépondreSupprimer
    Réponses
    1. Bonsoir Margault,

      Il y a un petit problème avec Blogger et le code de Pinterest. Colles ton code après la ligne <head>, puis cherches les mots suivants dans le code :

      async defer

      Remplaces-les par :

      async="true" defer="true"

      Sauvegardes et ça devrait régler le problème !
      Je vais rajouter l'astuce au tutoriel ;)

      Supprimer
    2. Merci beaucoup pour cette astuce ! Ça marche... enfin :)

      Supprimer
  2. Coucou merci pour l'astuce :)
    Je voulais te demander je voudrais mettre un bouton crée par moi comment dois je procéder ?

    RépondreSupprimer
    Réponses
    1. Ça demande un tout autre code, je vais en faire un autre tutoriel ce sera plus simple ;)

      Supprimer
    2. Aaa d'accord j'ai essayer mais sa marcher pas pour sa , merci beaucoup :)

      Supprimer
  3. merci beaucoup pour le tuto mais ça marche pas pour moi en tout cas
    gros bise

    RépondreSupprimer
    Réponses
    1. Bonjour, as-tu supprimé le code ? Car je ne le retrouve pas sur ton blog :/

      Supprimer
  4. Salut catherine! Encore une question que je me pose ( sans rapport avec ce tutos mais je ne savais pas ou la poser) dans les gadgets il y a le moteur de recherche du blog. Hors je ne comprend pas pourquoi mais ca ne marche pas vraiment.
    Ex: quand je recherche pommes ca me donne le lien d'un parmentier avec pommes de terre mais pas la recette de la tourte aux pommes, et si je tappe chocolat, j'ai pas mes recettes avec le chocolat... BREF j'y comprends rien. Peux tu m'éclairer stp?

    RépondreSupprimer
    Réponses
    1. Salut Laure,
      C'est bizarre, je ne sais pas trop de quoi ça pourrait venir :/
      Peux-tu me rappeler l'adresse de ton blog pour que j'essaye de mon côté ?

      Supprimer
  5. Bien sur, la voila :http://vousreprendrezbien1kilo.blogspot.fr/
    Merci !

    RépondreSupprimer
    Réponses
    1. Effectivement :/
      Essaye d'utiliser une barre de recherche en HTML/Javascript à la place. Remplaces ton gadget par un gadget HTML/Javascript. Dans contenu colles le code suivant :

      <form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" value="Rechercher" type="text" id="searchBox" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Rechercher" type="submit" /></form>

      Sauvegardes et essaye à nouveau

      Supprimer
  6. En widget HTML ça fonctionne merci beaucoup!
    Par contre pas le bouton pinterest, est ce sur les nouveaux articles seulement ?

    RépondreSupprimer
    Réponses
    1. Bonjour Laure, normalement le bouton devrait apparaître sur toutes les images du blog sans distinction :)

      Supprimer
  7. Bonjour, merci pour tous vos tutos!!! Vous êtes vraiment d'une grande aide. Alors j'essaie d'améliorer mon blog et pour le pin it button j'ai un pbm il s'affiche mais non pas sur mes images mais tout en haut à gauche de mon blog. Je dois mal placer le code. J'ai d'ailleurs un soucis par rapport à vos tutos dans mon code html au niveau de la balise j'ai tout un listing de style css et ça me bloc pas mal pour "customiser" les effets de titres, les couleurs ect... Je ne sais pas si mon problème de placement de bouton peut venir de là aussi? (Je n'y connais pas grand chose!)
    Je vous remercie par avance.

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Effectivement il y a un problème avec le code HTML de ton blog. Toute la partie de code CSS, le code avant et des codes après doivent se situer dans ce qu'on appelle la partie Head, alors qu'elle est placée dans la partie Body.
      C'est plutôt compliqué à expliquer car il y a pas mal de codes à déplacer.
      Si tu le souhaites je peux rectifier le problème par prestation. Je suis actuellement en vacances mais je peux regarder ça à mon retour (semaine du 13/07). Si cela t’intéresse envoie-moi un message par le formulaire de contact accessible à la page Design.

      Supprimer
    2. J'ai eu le même problème, c'est simplement au moment de créer le "code" sur la plateforme Pinterest, on peut sélectionner 3 types de placement : -Une image, -N'importe quelle image & -Survole d'image. Il faut sélectionner "Survole d'image" sinon, le bouton s'affiche en haut à gauche ^^

      Supprimer
    3. Cela peut être une solution mais dans le cas de Camille toute la partie qui doit se trouver dans <head&> (les feuilles de styles CSS, le javascript et les balises meta) se trouve dans <body>. C'est un problème qui peut expliquer que ses boutons s'affichent mal et surtout pourquoi elle n'arrive pas à faire des modifications de style.

      Supprimer
  8. Hello :)

    J'ai un petit pépin avec l'installation du bouton. J'ai bien trouvé les bonnes balises et tout et j'ai inséré le code (je ne peux pas le copier coller, ça n'en veut pas à la publication du commentaire :( )

    Mais quand on survole mes images, on a deux boutons qui apparaissent, un rouge rectangulaire et un rond blanc. Comment ça se fait ? J'ai fait une boulette ?

    Merci d'avance pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il semblerait que tu ai installé 2 codes différents pour ajouter des boutons Pinit.
      Tout en bas du code de ton blog tu as les codes suivants pour le rond blanc :

      <script>
      //<![CDATA[
      var bs_pinButtonURL = "http://3.bp.blogspot.com/-zLhq96zYiuc/VCxR6pWcgsI/AAAAAAAAAZc/mmx3OzWeKko/s1600/pin_it.png";
      var bs_pinButtonPos = "topleft";
      var bs_pinPrefix = "";
      var bs_pinSuffix = "";
      //]]>
      </script>

      Et le code juste après commençant par :

      <script id='bs_pinOnHover' type='text/javascript'>

      Jusqu'à (je ne peux pas tout coller dans le commentaire) :

      // This Pinterest Hover Button is brought to you by bloggersentral.com.
      // 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>


      Ensuite au début de ton code tu as le code suivant pour le rectangle rouge :

      <!-- Please call pinit.js only once per page -->
      <script async='true' data-pin-color='red' data-pin-hover='true' defer='true' src='//assets.pinterest.com/js/pinit.js' type='text/javascript'></script>

      Il faut que tu supprimes un de ces 2 codes, et voilà :)

      Supprimer
  9. Bonsoir!
    J'ai suivi à la lettre ton tuto, mais le Pin It ne se met pas sur les photos mais en haut à gauche de mon blog, comment y remédier?
    Merci d'avance pour ta réponse! =)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne vois pas ton bouton Pin it. L'as-tu enlevé ?

      Supprimer
  10. C'est encore moi.
    Apparemment mon ancien message n'est pas passé. Il y a un truc que je ne capte pas avec ce bouton.
    Il apparaît sur une ancienne sauvegarde mais le code du bouton n'apparaît plus dans le html.
    Sur ma dernière version, le bouton n'apparaissait qu'une première fois, quand je restaurais la version, et hop une fois le code html ouvert (avec le code du bouton bien là), mon bouton n'apparaissait plus. Du coup j'ai supprimé le code de cette dernière version, et là magie, le bouton réapparaît...
    C'est bizarre non?
    Je ne sais pas si tu peux me répondre, mais j'aurais aimé comprendre... Comment un bouton peut-il apparaître après avoir effacé sa "programmation"...?
    Merci beaucoup!!
    Bonne soirée
    Flore

    RépondreSupprimer
    Réponses
    1. Bonjour Flore,
      As-tu ajouté une extension Pinterest à ton navigateur web pour pouvoir ajouter facilement des pins des sites webs ? Si oui, c'est sûrement pour cela que tu vois un bouton alors que tu as supprimé le code ;)

      Supprimer
  11. Youpii !! Ca marche pour moi !! Merci pour ce tuto !!

    Sonia
    http://lafabrique-bysonia.blogspot.fr/

    RépondreSupprimer
  12. Bonsoir ! Tout d'abord je souhaites te remercier pour tout tes tutoriels qui m'ont grandement aidé à construire mon blog qui se forme petit à petit! Tu aides des milliers d'apprentis bloggueur et je te remercie encore pour celà ! Pour l'iCone Pin It, j'ai suivis tout tes instructions, mais le petit icone apparait une fois et ensuite ne réapparait plus du tout sur mon blog, j'ai le même problème que Flore je pense ! Merci pour ta future réponse

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Peux-tu me donner le lien vers ton blog pour que je puisse voir ?

      Supprimer
  13. Bonsoir,

    Tout d'abord merci pour ton blog qui m'a été d'une très grande aide dans l'amélioration du visuel de mon blog.
    J'ai le même souci que la personne précédente pour le petit "Pin'it" qui apparait de temps en temps sur mes images ... mais que très rarement. J'ai revérifié la marche à suivre de ton tuto mais je ne vois pas où est la faille. Est-ce que je peux avoir un petit coup de pouce ?!☺
    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Bellule,
      As-tu suivi la dernière étape qui consiste à remplacer :

      async defer

      Dans le code par :

      async="true" defer="true"

      Si tu ne trouves que async ou defer mais pas les 2, remplace quand même celui que tu trouves par :

      async="true" defer="true"

      Supprimer
    2. Oui je les aies remplacé.

      L’icône "Pinterest" s'affiche sur la 1ère page - après être allée dans le tableau de bord pour modifier le HTML - mais ne s'affiche pas lorsque je vais sur mon blog.
      Merci pour ta réponse ☺

      Supprimer
    3. Je viens de parcourir ton blog et le bouton s'affiche bien pour moi sur toutes tes photos.
      Essaye de vider le cache de ton navigateur et de voir ce que ça donne.

      Supprimer
  14. J'ai réécris le code une nouvelle fois et suis retournée dans le tableau de modification ensuite. J'ai remarqué que les " étaient transformés en ' ... est-ce que ça a une incidence ? En tout cas ça semble aussi marcher de mon côté ☺

    Je tiens à te remercier pour le partage, pour tes tutos (une mine d'or pour la blogeuse que je suis ) et pour le temps que tu prends à répondre.

    RépondreSupprimer
    Réponses
    1. C'est normal que les " se soient transformés en ' Blogger les traduit automatiquement ;)

      Supprimer
  15. Bonjour,

    C'est bizarre j'avais suivis votre tutoriel il y a quelques jours et le bouton apparaissait. Et aujourd'hui par hasard en passant ma souris sur une image je ne vois plus de bouton Pinterest. Du coup je refais le tutoriel et tout est correct et pourtant il n'y pas de bouton au survol de l'image.
    Est ce normal? Le blog est raspberrylipstick5@blogspot.com.

    Merci d'avance

    RépondreSupprimer
  16. Ne tenez pas compte de mon commentaire précédent, pour je ne sais quelle raison le bouton réapparaît maintenant.

    RépondreSupprimer
  17. Finalement les boutons ont à nouveau disparu. Je ne comprends vraiment rien... Désolé pour les 3 commentaires pour un seul problème.

    RépondreSupprimer
    Réponses
    1. Bonjour Antoine,
      En allant sur le blog les boutons Pinterest s'affichent bien sur les images.
      Tu peux essayer du supprimer la partie :

      async="true" defer="true"

      Supprimer
    2. Je comprends d'où vient ma confusion: lorsque je suis sur la page d'accueil avec seulement un résumé de chaque article, le bouton apparaît. Mais celui ci n'apparaît plus quand je suis sur la page d'un article (après avoir cliqué sur "Lire la suite".

      Supprimer
    3. Bonjour Antoine,
      As-tu réglé le problème ? Car les boutons s'affichent bien sur les images sur l'accueil et sur la page d'articles, pour moi. J'ai désactivé mon extension Pinterest de Chrome pour vérifier ;)

      Supprimer
    4. Merci pour votre confirmation :)

      Supprimer
  18. Hello,
    Super tutoriel, qui fonctionne à merveille !
    Juste une question: comment faire pour que le bouton "Pin it" n'apparaisse pas sur l'image du header (l'image que l'on sélectionne en lieu et place du titre et de la description du blog sous blogger ?
    D'avance merci et bonne continuation: ce blog est extra !

    RépondreSupprimer
    Réponses
    1. Bonjour Jean-Christophe,
      Pour désactiver le bouton Pin it sur certaines images il faut ajouter :

      data-pin-no-hover="true"

      Avant <img dans le code HTML de l'image.
      Comme le code HTML de l'image n'est pas accessible dans le Header, on va utiliser du JavaScript.

      Essaye le code suivant :

      <script type="text/javascript">
      document.getElementById("Header1_headerimg").setAttribute("data-pin-no-hover","true");
      </script>

      Colle ce code dans ton code HTML avant le ligne :

      </body>

      Supprimer
  19. Bonjour et merci pour cet article très intéressant.

    Je dois dire que depuis que j'ai ajouté un bouton Pinterest, créé un compte et ajouté certaines photos, le trafic et le référencement du/des site(s) ont été bien aidé par Pinterest, qui en plus d'apporter du traffic directement depuis des images (donc ciblage précis), apporte de nombreux backlinks.

    Bonne continuation !

    RépondreSupprimer
  20. bonjour, après avoir passé avec succès les étapes de ce tutos, tout fonctionne.
    Par contre, quand je souhaite venir sur mon blog par un lien externe qui me redirige sur mon blog, comme sur Facebook), le logo "pin it", n'apparait plus. J dois taper l'adresse de mon blog pour cette option apparaisse vraiment.
    Comment remédier à ça si je veux diriger les gens vers mon blog via Facebook?

    Milles mercis...

    Cecile
    http://latelierdelalibellule.blogspot.fr

    RépondreSupprimer
    Réponses
    1. Effectivement ton bouton Pin it ne s'affiche pas tout de suite. Même en allant sur ton blog par le lien donné dans ton commentaire :/
      Je vais chercher une méthode non officielle pour ajouter le bouton car la version officielle de Pinterest comporte plusieurs problèmes.

      Supprimer
  21. Bonjour Catherine et merci pour ton blog!!

    RépondreSupprimer
  22. Coucou,

    Merci pour ton article. J'ai réussi à installer mon bouton Pinterest les doigts dans le nez !

    Par contre j'aimerais bien rajouter dans les gadgets de la barre latérale un lien vers mon compte Pinterest et je n'y arrive pas. J'ai collé le code que donne le site dans un gadget HTML/JavaScript mais ça ne retrouve pas mon compte.

    J'espère que tu auras un peu de temps pour me répondre.
    Voici mon blog : http://pimp-mylife.blogspot.fr/

    Et merci pour ton site qui est tip-top et plein d'infos super utiles !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il y a un problème avec le code de ton bouton. Il n'y a aucun lien.
      Tu peux utiliser les codes de ce tutoriel pour créer un bouton CSS vers ta page Pinterest ;)
      Il te suffit de créer un lien, de remplacer le texte du lien par l'icône Pinterest, et de remplacer l'url du lien pas celle de ta page Pinterest. Pour trouver ce lien va sur ta page Pinterest avec tous tes tableaux. Copie l'adresse URL en haut de ton navigateur et voilà ;)

      Supprimer
  23. Bonjour Catherine! J'ai une petit soucis. J'ai essayer d'installer le bouton "Pin it", tout en remplaçant bien async par "true" et defer par "true", sans résultats. Dans la page servant à modifier le code html du blog, il est noté "Erreur d'analyse XML, ligne 7, colonne 14 : Attribute name "true" associated with an element type "script" must be followed by the ' = ' character.." Que dois-je faire? Merci beaucoup! Ton blog m'aide beaucoup :) (mon blog: www.cashmere-blue.blogspot.be)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Vérifie le code de ton script, il comporte une erreur.
      Vérifie qu'il ne manque pas un signe, et que tu as bien ajouté :

      async="true" defer="true"

      Supprimer
  24. Bonjour

    Alors de mon coté le bouton fonctionne mais j'ai juste un soucis ayant des jolies boutons saumon de partage page d'accueil et d'article . Avec ce tuto cela me modifie mon bouton pin it aussi sur ma page d'accueil et d'article. http://chezchouby.blogspot.fr/ il y a t'il moyen que cela ne change pas mes boutons de page d'accueil surtout.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Oui il faut retrouver les codes HTML de tes boutons et ajouter une petit code.
      Retrouve la ligne suivante :

      <div class="social-sharing">

      Sous cette ligne tu trouveras le lien de ton bouton Pinterest. Retrouve ce morceau de code :

      data-pin-log="button_pinit"

      Juste à la suite, sur la même ligne colle :

      data-pin-custom="true"

      Supprimer
    2. Bonjour!

      J'ai le même souci que CHOUBY, j'ai bien : data-pin-custom="true" sur la ligne, mais celà ne change rien, le bouton reste rouge.. Y a t-il éventuellement une autre solution ?

      Merci tout plein!! :)

      Supprimer
    3. Bonjour,
      Je ne vois pas le data-pin-custom="true" dans ton lien :/
      Ajoute-le aussi après le <a du lien comme ceci :

      <!-- Pinterest-->
      <a data-pin-custom="true" expr:href='"http://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&description=" + data:post.title + "&media=" + data:post.firstImageUrl' title='Partager sur Pinterest'>
      <i data-pin-custom="true" class='fa fa-pinterest-p'/>
      </a>

      Supprimer
    4. Oh je n'avais même pas vu que tu avais répondu!
      Ca a marché, Merci beaucoup !!! :)

      Par contre la souris ne se modifie pas au survol (une petite main apparaît sur les autres boutons mais pas sur celui de Pinterest) Est-ce dû à une mauvaise manip de ma part..?

      Merci encore en tout cas!

      Supprimer
    5. Bonjour,
      Tu peux rajouter une ligne dans ton code CSS qui va "forcer" le navigateur à afficher cette petite main. Retrouve ton code :

      /* Apparence générale des boutons */
      .btn-partage a {
      display: inline-block;
      width: 30px; /* Largeur du bouton */
      height: 30px; /* Hauteur du bouton */
      border-style: solid; /* Style de la bordure */
      border-width: 1.7px; /* Epaisseur en pixels de la bordure */
      -webkit-border-radius: 50%; /* Bord arrondis */
      border-radius: 50%; /* Bord arrondis */
      margin-left: 3px; /* Espace à gauche */
      margin-right: 3px; /* Espace à droite */
      }

      Ajoute la ligne suivante :

      cursor: pointer;

      Avant le signe } comme ceci :

      /* Apparence générale des boutons */
      .btn-partage a {
      display: inline-block;
      width: 30px; /* Largeur du bouton */
      height: 30px; /* Hauteur du bouton */
      border-style: solid; /* Style de la bordure */
      border-width: 1.7px; /* Epaisseur en pixels de la bordure */
      -webkit-border-radius: 50%; /* Bord arrondis */
      border-radius: 50%; /* Bord arrondis */
      margin-left: 3px; /* Espace à gauche */
      margin-right: 3px; /* Espace à droite */
      cursor: pointer;
      }

      Et voilà ;)

      Supprimer
    6. Génial, merci encore!! :)

      Supprimer
  25. Super ça a marché chez moi ! Merci beaucou pour ce tuto :)

    RépondreSupprimer

Vérifiez d'abord que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger