Comment ajouter un bouton Pin It (Pinterest) sur Blogger ?


Si vous aimez le réseau Pinterest, vous pouvez ajouter sur chacune de vos photos un bouton “Pin it” qui apparaît au survol et permet à vos lecteurs d’épingler directement la photo sur Pinterest. Une très bonne manière de gagner en visibilité sur ce réseau social !

#1 – Créer le widget Pin It sur Pinterest

Nous allons commencer par créer un widget Pin It sur Pinterest. Ça se passe sur cette page : générateur de bouton Pin It.

1. Choisissez le bouton intitulé “Save Button” : pour que le bouton s’affiche au survol de vos images, choisissez “Image Hover” dans le menu déroulant “Button Type”.

3. Choisissez l’apparence de votre bouton Pin It : vous pouvez ensuite choisir de laisser le bouton par défaut, qui indique “Enregistrer” avec le logo Pinterest. Vous pouvez également opter pour un simple logo circulaire en cochant la case “Round”… et faire grossir la taille du logo, quelle que soit son apparence, en cochant la case “Large”.

Par défaut, la langue du texte sera adaptée à l’utilisateur, je vous conseille de laisser ce réglage (“User’s Default Language”) sauf si vous souhaitez imposer une langue pour le texte “Enregistrer”.

Voici un aperçu de l’apparence du bouton “Enregistrer” en taille “Large” :

Bouton pour épingler une photo sur Pinterest
Bouton pour épingler une photo sur Pinterest

Et le bouton en version ronde et large :

Bouton Pinterest rond
Bouton Pinterest rond

4. Un peu plus bas sur la même page, Pinterest vous donne un code. Copiez-le. Nous allons maintenant passer à la deuxième étape.

Code du bouton Pinterest
Code du bouton Pinterest

#2 – Intégrer votre bouton Pinterest sur Blogger

1. Connectez-vous à votre compte Blogger et cliquez sur le menu “Mise en page” dans la colonne de gauche.

2. Cliquez sur “Ajouter un gadget” (vous pouvez choisir n’importe quel lien, l’emplacement n’a aucune importance, le code ne se verra pas directement sur la page).

3. Parmi les options qui s’affichent, choisissez “HTML/Javascript”.

Ajouter un gadget HTML/Javascript à Blogger

4. Il n’est pas utile de donner un titre à votre gadget. Copiez le code fourni par Pinterest dans le champ prévu à cet effet et enregistrez.

Ajouter le code Pinterest à Blogger
Ajouter le code Pinterest à Blogger

C’est prêt ! Au survol de la souris sur vos images, un bouton “Enregistrer” s’affiche désormais. Vos visiteurs pourront en un clic partager vos photos sur Pinterest !

Bouton Pinterest fonctionnel
Bouton Pinterest fonctionnel

Je vous conseille de lire les conseils de Cécile pour gagner en visibilité sur Pinterest si vous souhaitez développer votre compte !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

44 commentaires sur “Comment ajouter un bouton Pin It (Pinterest) sur Blogger ?

  • laure

    bonjour
    tres bien expliqué sauf que dans mon cas ça me rajoute le widget tout en haut de ma page coté gauche et c’est tout rien sur les photos donc totalement inutile.
    quand je demande la génération d’un code sur le generateur

    jen obtiens 2 dont une à mettre avant la balise body ce que j’ai fait mais cela ne change rien

    j’ai pris un theme standard de blogger pourtant

    quelqu’un a t’il le meme probleme que moi

    merci d’avance

    Répondre à laure
    • Marlène

      Bonjour Laure, ce tuto ne permet pas d’ajouter un widget… mais d’ajouter un bouton sur les images. Et en l’occurence je vois bien un bouton sur les images de ton blog. Quel est le problème exact du coup ?

      Répondre à Marlène
  • zazoult

    Géant, bien expliqué
    Je vous remercie, çà va permettre à mon groupe d’être mieux connu, je vais lire d’autres articles,
    J’adore apprendre

    Répondre à zazoult
  • jean paul

    Le bouton ENREGISTRER est toujours présent en bas de page lorsque j’écris sur mon site (wordpress) !! Il me fait perdre en score. Je voudrais le supprimer. Comment faire ?
    Merci de votre aide

    Répondre à jean
    • Marlène

      Bonjour, quel bouton “Enregistrer” ? Un bouton issu de Pinterest ?

      Répondre à Marlène
  • Laura

    Merci pour ce tutoriel, c’est exactement ce que je cherchais ! :)

    Répondre à Laura
  • Bets

    Quelle galère ce bouton ! Parce que moi, figurez-vous que mon template prévoit le bouton ‘Pinterest’. Sauf que, lorsque je voulais épingler un post de mon blog, j’avais le message ‘choisissez une image pour ce post’, alors que chaque post a une image. Donc, j’ai suivi la méthode et maintenant mon bouton est opérationnel ! J’ai bien aimé également l’astuce pour limiter le bouton aux pages articles. Juste une petite remarque : comme j’ai ajouté l’extension ‘Ajouter une épingle’ à Google Chrome, quand je passe la souris sur ma bannière ou ma trombine, le bouton ‘Enregistrer’ apparaît. Donc, les visiteurs qui ont ajouté cette extension à leur navigateur la verront aussi. Merci encore.

    Répondre à Bets
    • Marlène

      Elle est bien pratique, cette extension Google Chrome ! Je l’utilisais à une époque pour l’un de mes sites.

      Répondre à Marlène
  • Sophie Jegou

    Génial, merci beaucoup pour ce tuto !!

    Répondre à Sophie
  • stella

    Merci pour cet article ! Je l’ai installé sans problème sur mon blog blogger, mais il apparait en haut à gauche de mes images, j’aurai souhaité qu’il apparaisse au centre, est ce possible ?

    Répondre à stella
    • Marlène

      Pas via le générateur de bouton car le fichier qui permet l’affichage du bouton est géré par Pinterest, on ne peut donc pas agir dessus. Il y a sans doute des solutions en codant tout soi-même :)

      Répondre à Marlène
  • Jeff

    Mais ouais, ça m’a bien aidé!

    D’ailleurs pour avoir vu d’autres explications que tu délivres sur Notuxedo, je te dis bravo!
    T’es une vrai pédagogue, je suis une bouse en informatique et j’ai tout compris…(?!)

    Passe sur thinkundercover.blogspot.com me dire ce tu en penses quand t’as le temps, je pense que tu vas te marrer quand tu verras le blog vu que je débutexD
    Mais j’écouterai volontiers tes conseils.

    Passes une bonne soirée, PEACE!

    Répondre à Jeff
  • Familly Chou

    Merci pour tous ces articles, j’en apprends tous les jours.

    Répondre à Familly
  • Filo

    Mais ça marche! Mais c’est génial!
    Merci merci, la cyberquiche que je suis n’en revient pas d’avoir réussi si aisément.

    Répondre à Filo
  • Atelier Chantonssouslapluie

    Merci pour ce tuto extrêmement simple! Ca marche parfaitement…Je viens de créer mon blog et ne suis pas experte en code, tes conseils sont une mine d’or pour la novice que je suis!
    Je pense tester pas mal de tes tutos rapidement.

    Répondre à Atelier
    • Marlène

      Merci beaucoup, j’espère qu’ils te serviront ! N’hésite pas à me suggérer des idées de tutoriels s’il y a des sujets que je n’ai pas encore abordés. Je ne peux pas promettre de les rédiger vite mais quand ça peut intéresser d’autres personnes, j’essaie de planifier ça :)

      Répondre à Marlène
  • laura

    bonjour, je viens de lire ton article, je voudrais ajouter pinterest sur mon blog . Après avoir suivi tes infos ( précises d’ailleurs) je retourne sur mon blog façon de voir le sigle pinterest sur une de mes photos mais cela ne fonctionne pas :/ merci de visiter mon blog et de me donner une solution si tu as :) je suis une débutante alors je nage !!! merci pour ton aide

    Répondre à laura
    • Marlène

      Hello Laura, je ne vois pas du tout le code Pinterest apparaître sur tes pages, c’est comme s’il n’avait pas été copié sur ton blog. Je pense que le modèle Blogger que tu as choisi n’affiche aucun widget… donc forcément, tout ce que tu copies dans un widget ne fonctionnera pas sur ton blog. C’est l’inconvénient de ce type de design.

      Répondre à Marlène
    • laura

      Merci Lou pour ta réponse, je vais aller voir sur mon blog , c’est bizarre quand même car on me propose de rajouter des widgets !!! peut-être faut-il que je sélectionne des options sur mon blog ? je trouve ça bien embêtant :/ Puis-je transférer mes données de mon blogspot sur celui Hellocoton ?
      Laura

      Répondre à laura
    • Marlène

      Tu parles de la plateforme de blogging Publicoton gérée par Hellocoton ?

      Pour Blogger, chaque design vient avec des “zones de widgets” prédéfinies.

      Répondre à Marlène
    • laura

      re , dsl d’être pénible … mais quel type de modèle me conseilles-tu stp ? peut-être cela résoudrait mon problème ^^
      biz

      Répondre à laura
    • Marlène

      Si ça t’intéresse, j’avais fait une sélection de designs pour Blogger, peut-être que tu y trouveras ton bonheur. Sinon, une petite recherche Google t’en donnera des dizaines d’autres :)

      Répondre à Marlène
    • laura

      merci je regarderais demain je crois car dure journée et trop fatiguée, mais tu es ma lumière ;)
      bonne nuit à toi ma belle !!!
      Laura

      Répondre à laura
  • Initiales GG

    Merci pour ce tutoriel il est parfait et très clair. Je ne suis pas très douée pour modifier des trucs sur mon blog, ton site va beaucoup m’aider :-)
    A bientôt,

    Géraldine

    Répondre à Initiales
    • Marlène

      Tant mieux Géraldine, merci d’avoir pris le temps de laisser un petit message :)

      Répondre à Marlène
  • Sarah

    Formidable ! Merci beaucoup !

    Répondre à Sarah
    • Marlène

      Mais de rien ! Merci d’avoir pris le temps de laisser un commentaire :)

      Répondre à Marlène
  • AU303

    Ca marche très bien mais le petit bémol c’est que ça fonctionne sur toutes les images du blog sans exception, du coup on peut rajouter une balise conditionnelle sur le widget pour qu’il ne s’affiche par exemple que dans les pages articles
    On peut l’invalider aussi sur certaines images d’un post quand ce n’est pas judicieux qu’il apparaisse avec l’attribut class=”nopin” sur l’image.
    De mon côté je l’ai ajouté dan le code avant plutôt que dans un gadget.

    Répondre à AU303
    • AU303

      oups ! mettre des bouts de code dans le commentaire a eu un effet qui n’était pas escompté !
      Tu peux le modifier ?

      Répondre à AU303
    • Marlène

      Non malheureusement, ton code n’apparaît pas du tout, c’est une sécurité pour éviter les injections de code par le biais du formulaire de commentaires (= méthode utilisée pour le piratage) :) Je suppose que tu fais référence à l’ajout d’une balise de ce type :

      <b:if cond='data:blog.pageType == "item"'></b:if>

      Tu as raison de préciser cette astuce :)

      Répondre à Marlène
    • AU303

      Oui c’est ça ;-) bizarrement ça a transformé une partie du message en caractères gras !
      Sinon pour l’ajout direct du script dans le code au lieu de le mettre dans un widget, je parlais de le placer avant body celui qui ferme.

      Répondre à AU303
    • Marlène

      C’est lié à la présence du “b” au début du code :) C’est la balise qui permet de mettre du texte en gras et comme elle est tolérée dans les commentaires, WordPress en a tenu compte. Je viens de retirer ça :)

      Répondre à Marlène
  • ccommeceline

    Un grand merci! je ne pensais vraiment pas être capable de faire ça! c’est si simple avec les bonnes explications! merci merci beaucoup! Céline.

    Répondre à ccommeceline
    • Marlène

      Merci de ton commentaire, je suis contente que ça fonctionne !

      Répondre à Marlène
  • maman geekette

    Merci! C’est justement ce que je cherchais: simple, rapide et ça fonctionne :)

    Répondre à maman
    • Marlène

      Tant mieux alors :) “Bon épinglage” comme dirait Pinterest !

      Répondre à Marlène
  • Marion - Le Petit Monde de Kirichou

    Super tu es ma sauveuse ! je garde ton article précieusement !

    Répondre à Marion
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.