Mise à jour : 20/06/2020
Je t’ai déjà parlé à maintes reprises de ma fanitude pour Pinterest (non ça ne veut pas dire que je vieillis comme une fleur coupée mais que je suis fan. Comme Obispo, oui. Mais avec plus de cheveux). Convaincue que je suis du potentiel de cette plateforme, j’essaie de te faire adhérer au fan-club pour que toi aussi tu gagnes plein de visiteurs sur ton site avec tes jolies épingles. Aujourd’hui, je vais donc te montrer pas à pas comment installer des boutons Pinterest aux endroits stratégiques de ton site ou blog, que tu sois sur WordPress, Blogger ou Squarespace. Parce que ce n’est pas le tout d’avoir de belles images et des descriptions optimales, il faut aussi (surtout) faciliter la tâche de tes lecteurs quand il s’agit de les partager.
Comme j’étais hyper motivée, j’ai même fait un clip petit tuto vidéo pour WordPress. Je te rassure je ne chante pas (vois la tête de mon chat après mes prestations vocales, tu comprendras) mais je te montre comment installer un plugin vraiment utile pour avoir un joli bouton Pin it.
Passe lire mon autre article, si tu te demandes encore pourquoi utiliser Pinterest.
Installer le bouton Pin it sur ses images
Tout le monde n’est pas forcément aussi fan de Pinterest que moi (et que toi peut-être). Ce qui veut dire que tout le monde n’a pas ajouté le fabuleux petit module Pinterest sur son navigateur (je me demande comment on vit sans… mais apparemment certains y arrivent !).
Alors pour faciliter la tâche de toutes ces personnes, il te faut ajouter un bouton « Pin it » directement sur tes images. Il est facilitateur ET incitatif (double effet Kiss Cool… (oui j’ai des vieilles références, si je commence à scander « Le lapin, le lapin ! » arrête-moi.)).
Ainsi chacun de tes visiteurs pourra épingler tes magnifiques illustrations, revenir au besoin sur ton merveilleux contenu et le partager avec d’autres qui en feront autant. Jusqu’à ce que tu aies une communauté tellement énorme que tu n’arriveras plus à lire le nombre d’abonnés en une seule fois (en tout cas ça me fait ça quand je vais voir le compte Pinterest de Joy Cho. « M » comme millions ?! Mais ça fait combien de 0 ça !?).
Voici donc comment faire pour installer ce fameux bouton Pinterest (et le customiser au besoin).
Pense avant-tout à avoir des images optimisées pour Pinterest sur ton blog.
Le bouton « Pin it » pour WordPress
Si tu as un blog WordPress, installer le bouton Pin it te prendra 10 minutes et se fait sans difficulté, grâce à un plugin. Le plus connu, et que j’utilise sur mes blogs se nomme jQuery Pin It Button for Images.
Il permet :
- D’ajouter un bouton « Pin it » sur tout ou partie des images de ton blog (tu peux vraiment choisir précisément sur quelles images tu veux qu’il s’affiche)
- De le faire apparaître au survol ou tout le temps (sur mobile ça peut être utile)
- De le customiser (plus d’options en version pro) ou d’ajouter ton bouton personnel (même en version gratuite)
- De le positionner où tu veux sur tes images
- De choisir où Pinterest ira chercher la description des épingles
Comme tu le vois, il est vraiment hyper complet.
Voici un petit tuto vidéo pour t’aider à l’installer et à le paramétré (soit indulgente c’est mon 1er tuto et j’ai galéré avec la prise de son ^^ La musique vient de bensound)
MAJ du 25/05/2018 : A noter, je recommande désormais d’utiliser le « title » de l’image comme source pour la description (à 3:45 dans la vidéo) ou mieux l’attribut data-pin-description (faut aller dans la version « texte » de ton article pour l’ajouter à chaque fois mais il est vraiment fait pour Pinterest). Je t’en dis plus dans cet article sur la description des épingles.
Le bouton « Pin it » pour Blogger
Si tu es sur Blogger, le bouton « Pin it » est parfois prévu par certains thèmes. Si ce n’est pas ton cas, tu peux l’installer en ajoutant un code dans un gadget « HTML/Javascript » n’importe où sur ton blog (c’est juste pour mettre le code, il n’apparaîtra pas donc tu peux mettre ça en barre latérale si tu veux).
Tu peux récupérer le bout de code sur le générateur de widget Pinterest en choisissant « Le bouton » puis « Survol d’image ».
Tu as 2 boutons possibles :
- Le P blanc dans un rond
- Le P + le texte « enregistrer » dans un rectangle (on peut le mettre en plein de langues différentes)
Les 2 choix existent en version petite ou grande, ce qui fait 4 types de boutons différents au final. Tu choisis donc celle que tu préfères et tu copies le code que Pinterest te fournit dans ton gadget.
Si tu veux un bouton plus personnalisé, il va falloir mettre les doigts dans le code de manière un peu plus poussée. Je laisserai donc ça de côté pour l’instant (d’autant que je n’ai pas encore eu l’occasion de tester l’intégration des codes trouvés sur le web).
Le bouton « Pin it » pour Squarespace
Si tu es sur Squarespace, c’est plutôt simple puisqu’il suffit d’activer l’option prévue dans le menu d’accueil/ Marketing (plus d’infos ici).
Il y a 3 options de customisation par défaut :
- La taille (petit / grand)
- La forme (cercle / rectangle)
Le bouton « pin it » sur tes images est indispensable pour inciter tes visiteurs à épingler ton contenu et leur faciliter la tâche. Il est plutôt simple à installer sur la majorité des blogs mais sera beaucoup plus facile à personnaliser sur les blogs WordPress que sur Blogger ou Squarespace.
Mettre un bouton de partage Pinterest sur ses articles
Maintenant que chacune de tes images est facilement « épinglable » tu as fait le principal, mais n’oublie un petit détail tout bête qui peut t’apporter quelques partages supplémentaires : ajouter le bouton Pinterest à côté des autres boutons de partage de tes articles ! (Et si tu n’as pas encore de boutons de partage sous ou à côté de tes articles, dépêche-toi de remédier à cela !).
Le bouton Pinterest chez WordPress
Certains thèmes prévoient des boutons de partage pour les pages et articles. Si Pinterest n’est pas prévu, on peut parfois utiliser le champ prévu d’un autre réseau social et en modifier l’icône. Parfois c’est un peu compliqué (on peut modifier le thème en mettant les doigts dans le code cela dit).
L’autre solution consiste à utiliser un plugin. Il en existe vraiment beaucoup. J’en conseillerai 2 :
C’est un plugin gratuit qui fait bien son travail et plutôt facile à prendre en main. On peut customiser les icônes facilement.
A noter : Pour les partages Pinterest il sélectionne l’image mise en avant de l’article, les lecteurs ne peuvent pas en choisir une autre. Ça peut-être un avantage ou pas (personnellement ça ne me convenait pas pour ce blog car mon image à la une n’est pas celle optimisée pour Pinterest, mais une image horizontale qui va bien sur ma page d’accueil).
C’est le plugin que j’utilise sur ce blog. Il est vraiment top au niveau efficacité et on peut facilement placer ses boutons où on veut selon le type de page. J’adore mes boutons flottants qui sont toujours visibles sans gêner la lecture. Par contre la version gratuite ne permet pas de customiser les icônes, ils sont aux couleurs des réseaux. Ça ne me convenait pas ici (rouge et bleu au milieu de mes jolis turquoise et jaune, beurk !), je les ai donc customisés moi-même.
La version pro est a 29$/an pour un site (je trouvais ça un peu cher pour changer la couleur mais elle permet aussi plein d’autres trucs comme régler l’image et la description Pinterest et même cacher des images épinglables pour son article).
Le bouton de partage chez Blogger
Chez Blogger, il suffit d’aller activer les boutons de partage dans la section « Mise en page » du tableau de bord. Dans la section « Articles du blog » clique sur « Modifier » puis coche la case devant « Afficher les boutons partager ». Tu peux réorganiser les icônes dans la partie « Organiser les éléments ».
Tu auras ainsi tous les boutons nécessaires sous tes articles.
Les partages chez Squarespace
Sur les blogs Squarespace c’est aussi prévu dans les réglages de base : section Marketing / Boutons de partage.
Tu n’as qu’à sélectionner le bouton Pinterest. Il apparaîtra uniquement sur les pages ayant une vignette et ce sera cette image qui sera « épinglable ». Le tuto est ici.
Certains thèmes permettent d’avoir des boutons customisables.
Pour mettre toutes les chances d’être « épinglée » de ton côté, n’oublie pas d’ajouter le bouton de partage Pinterest sur tes articles et pages, à côté des autres boutons de partage !
Avec ce 3ème article sur l’optimisation de ton blog pour Pinterest tu as maintenant toutes les clés en mains pour avoir des contenus qui s’épinglent à tour de bras ! L’étape suivante sera de créer et d’optimiser ton profil Pinterest et ta présence sur ce réseau si spécial. Pour être sûre de ne pas louper mes prochains articles sur Pinterest, tu peux t’abonner à ma newsletter (si les astuces en plus et mon sens de l’humour ne te font pas peur…). C’est simple, tu n’as qu’à me laisser ton adresse dans le formulaire juste en dessous-là (descend un peu tu verras) ou celui tout en haut.
Si tu veux gagner du temps, tu peux aussi t’inscrire à 4 jours pour gagner du trafic qualifié avec Pinterest sans s’épuiser en cliquant juste là en-dessous ! C’est une mini-formation gratuite.
Tu veux aller encore plus vite et plus loin ? Choisis "Pinterest 3,2,1 action !"
Mets Pinterest au service de ton business efficacement et sans perdre de temps.
Des tutos pratiques, même si tu débutes de 0, ET un plan d'action stratégique clair et éprouvé, à implémenter immédiatement pour gagner en visibilité et en trafic.
Chouette article, j’ai tenté de mettre en place certains trucs, et j’ai quelques questions / retours: d’abord comment faire pour changer les couleurs des boutons flottants ? Et puis le plug jQuery Pin It Button For Images ne semble pas être fonctionnel sur ma version de WP , dommage… 🙁
Bonjour Sabine,
Pour Social Warfare, comme je l’indiquais les boutons ne sont pas customisables dans la version gratuite, il faut le faire manuellement avec quelques lignes de code css.
C’est étrange pour le bouton « pin it » avec jQuery Pin It Button For Images. Tu as la dernière version de WordPress ? Parce qu’il fonctionne sur mes 2 blogs avec la dernière version de WP, il a même été mis à jour dernièrement. Tu as un message d’erreur ou quelque chose ? (peut-être des plugins incompatibles)
Merci pour ce chouette article Cécile. J’ai découvert ton blog récemment et je le trouve vraiment top ! 🙂 Je commence à avoir de bonnes notions après 2 années de blogging mais je trouve toujours une petite astuce à appliquer ou une bonne piqûre de rappel. 🙂
Sabine : J’ai trouvé un outil MAGIQUE le mois dernier pour changer toutes ces petites choses là, qui nécessitent du code, sans avoir à y toucher (oui, oui MAGIQUE ! ). Il s’appelle CSS hero, c’est un plugin (payant : 29 €) que l’on installe sur son blog. Ensuite on a un petit bouton bleu qui apparaît sur chacune de nos pages (pour nous uniquement bien entendu) et il suffit de cliquer dessus puis sur la partie que l’on souhaite modifier et on peut ensuite choisir la couleur . Je ne l’ai utilisé que pour ça pour le moment mais c’est vraiment génial : on peut changer le fond, la couleur quand on survole, c’est très simple et on est plus contrainte à s’arracher les cheveux pour un simple changement de couleur. Il a un petit coût mais je trouve qu’il en vaut vraiment la peine. C’est ma découverte de l’année et je ne pourrais plus m’en passer (je code un chouilla mais j’ai horreur de ça et je n’y arrive pas à tous les coups ^^)
Merci beaucoup de ton message et de ton partage d’expérience Sarah ! <3 Ce plugin a l'air bien sympa pour les non-codeuses (perso j'adooooore coder lol)
Au passage, j'ai vu cet article chez Notuxedo qui explique comment faire des encadrés à la main (avec un peu de code) en créant des shortcode. Marlène du blog Notuxedo me disait qu’il y a un plugin Shortcode Ultimate qui permet de faire des shortcodes pour personnaliser ce genre de chose. Où sinon les plugin plus poussés d’éditeur visuel 😉
Oh trop de code pour moi ! 😀 Je bénis Visual Composer et ses add-ons 🙂
Ha ha, et oui ces petits plugins sont bien sympa quand même (pour les non-masochistes je veux dire) ^^
Coucou!!
Merci pour ton article!! Il me semble que j’ai fait tout ça! J’ai les boutons de partage partout depuis le début, mais il me semble pas que ça amène beaucoup sur mon blog! Je suis une fan de Pinterest aussi mais peu d’abonnés…. est-ce que tu peux aller faire un tour sur mon blog et me dire s’il y a qqch qui cloche, qui manque ou qui ne fonctionne pas?? Merci d’avance!!
Bravo pour ton blog!! Très beau!!
Bonjour Céline
Les boutons de partage vont te permettre de faciliter l’épinglage de tes articles sur Pinterest, pour autant il y a beaucoup d’autres choses à faire sur ton blog (ex : des images optimisées pour Pinterest) et sur ton profil Pinterest. As-tu lu mes autres articles à ce sujet ? Ils sont classés là : https://www.cecilebayard.com/theme/pinterest/ et ici un article complet avec les grandes lignes à suivre que j’ai rédigé sur le blog Notuxedo : https://www.notuxedo.com/utiliser-pinterest-gagner-visibilite/
Bonjour, je voudrais installer le bouton pin it sur mes images, j’ai regardé ta vidéo mais tu ne précises pas que c’est pour des thèmes Business, et version entreprise du coup sur ma version pas possible. As tu une autre solution ???
Bonjour Kathia,
Le plugin est pour WordPress en version auto-hébergée, celle où tu paies l’hébergement. Comme tu es sur WordPress.com tu ne peux pas utiliser de plugin. Par contre il me semble que tu peux activer automatiquement le bouton « pin it » sur tes images en activant Pinterest dans les boutons de partage et en choisissant le bouton officiel (infos ici en anglais : https://en.support.wordpress.com/sharing/ sur WP et ici en français mais moins complet sur Pinterest : https://help.pinterest.com/fr/articles/build-save-it-button-your-site)
Bonjour Et merci pour ce tuto !
Je n’arrive pas a afficher le bouton sur les images qui sont affichées grace à visual composer ds des container différents (image seule ou des media grid) . Je pense que je dois modifier quelque chose dans la case « image selector » de la partie ‘selection setting » du pluggin, mais je n’y connais rien en jQuery. Si tu peux m’aider ce serait super stp ! 🙂
Merci,
Bonjour Marie,
Désolée je ne peux pas t’aider sur ce cas précis, je connais mal visual composer. A priori il doit empêcher le « hover » sur les images et du coup ça bloque le plugin jquery. Essaie de voir si tu peux débloquer le hover dans visual composer.
Bon courage 😉
Super tuto ! Merci ça m’a filé un grand coup de main ^^
Avec plaisir, ravie que ça te soit utile.
Coucou!
J’ai installé le plugin que tu nous as présenté mais je viens de me rendre compte que le bouton apparaît sur les avatars des commentaires.
Saurais-tu comment faire pour éviter cela ?
Merci!
Hello Laeti
Dans les réglages du plugin (menu Réglages/jquery Pin it) tu as le 1er champ « Image selector », tu y indiques .jpibfi_container img (tu verras c’est indiqué en dessous de ce champ). Ca permet de faire apparaître le bouton uniquement sur les images du contenu. C’est le réglage que j’ai sur ce blog : du coup pas de bouton dans les commentaires, le footer, la barre latérale etc.
Si tu voulais qu’ils soient sur la barre latérale ou ailleurs, tu peux plutôt jouer sur le champ taille « Minimum image resolution » et choisir une taille d’image de quelques pixels sous laquelle le bouton ne s’affichera pas (genre 60 x 60).
Merci beaucoup pour ta réponse rapide ! Je vais essayer.
Rien à voir mais je vois que tu as réussi à faire fonctionner correctement le plugin Suscribe to Comment Reloaded.
Je viens de le supprimer car il y a trop de bugs avec.
D’abord c’était les liens qui n’étaient pas cliquables. Problème résolu mais la page de gestion des abonnements ne fonctionne pas. Les personnes ne sont pas abonnées et aucune checkbox n’apparaît.
Il aurait peut-être juste suffit que je ne demande pas de confirmation d’abonnement comme toi, tu me diras… C’est inutile en plus. Bref… vive les plugins à problèmes à répétition.
A bientôt !
Laeti
Ah oui ici pas de soucis avec ce plugin. Peut-être aussi que tu avais une incompatibilité entre plugins… A bientôt 😉
Coucou 🙂 Merci pour cet article !
J’ai installé le bouton Pinterest que j’ai personnalisé, mais le problème c’est que si je met des visuels plus petits à la fin de mon article (exemple de sélection shopping cliquable), le bouton Pinterest n’est pas optimisé par rapport à la taille de l’image, et donc recouvre pratiquement la taille de l’image :/ Peux-ton régler l’optimisation ?
Merci beaucoup
Hello Morgane
Je ne crois pas que ce soit possible par contre tu peux faire les réglages pour ne pas afficher ton bouton sur les petites images (qui de toute façon ne vont rien donner dans Pinterest si elles sont aussi petites qu’un bouton) ou alors fais ton bouton un peu plus petit pour toutes les images. Mais si le bouton est trop petit ça va être difficile de le cliquer (encore plus sur tablette et smartphone).
Salut Cecile ! Il y a quelques temps, j’étais tombée sur ton article bien pertinent et j’avais installé ce plugin sur mon blog. Depuis quelques jours je travaille sur l’optimisation de la vitesse et je me pose des questions sur la pertinence de ce plugin. Je l’ai désactivé et supprimé hier. Voici mes raisons : j’utilise Monarch un plugin de partage, qui propose également le partage sur Pinterest, de plus, les utilisateurs les plus avertis de Pinterest ont généralement un plugin installé sur Firefox ou Chrome qui permet d’epingmer les images. Ma question est donc : pourquoi alourdir encore le chargement d’une page pour une fonctionnalité qui existe déjà ? Surtout que si on fait un test PingDom, on se rend compte que ce genre de plugin mange pas mal de ressources… à méditer ? Qu’en penses tu ??? À bientôt !
En effet, il faut trouver un compromis… J’ai choisi de mettre un max de chances de mon côté et de faciliter l’épinglage. J’avoue que personnellement en tant qu’épingleuse acharnée, j’utilise plus facilement le bouton au survol que celui de mon navigateur (utilisé uniquement s’il n’y a pas de bouton Pinterest sur le contenu que je veux épingler) ou celui de partage de l’article. Deux raisons :
1- C’est plus simple, j’ai pas à chercher le bouton à droite, à gauche, en bas ou en haut (#faignasse)
2- C’est un clic de moins, j’ai pas à sélectionner l’image parmi la foule d’images dispo pour ce contenu (#faignassebis)
Et pour mon blog, ça permet de mieux contrôler la description liée à l’image, les boutons autour de l’article proposent plus souvent le titre SEO que la description que j’ai rédigée pour mon image.
Mais en effet, ça alourdit la page.
Merci beaucoup pour cet article qui m’a bien aidé 🙂
Ravie de t’être utile Julie 🙂
Bonjour Cécile, merci pour cet article !
Je suis un peu désespérée avec cette histoire de Pinterest : je veux vraiment installer les boutons en survol.
J’ai une version payante WordPress payante mais en « personnel ». Pour pouvoir installer l’extension, il me demande de passer en « premium ». Mais c’est 21 euros par mois (au lieu de 4 euros actuellement pour moi…)
Que faire ?
Merci en tous cas c’est très intéressant 🙂
Bonjour Julie
Je n’utilise pas WordPress.com pour cette raison : c’est gratuit mais dès qu’on veut un peu de personnalisation ou de plugins efficaces c’est beaucoup plus cher que d’avoir son site à soi avec WordPress.org… Je te conseillerais de passer sur WordPress.org avec un hébergeur pas trop cher type OVH ou O2switch (un peu plus cher que l’offre perso d’OVH mais moins de souci et toujours raisonnable niveau tarif). 🙂
Hello,
Merciiii pour ce tutoriel ! J’ai visité de nombreux blogs sur lesquels je voyais ce petit curseur et je ne comprenais pas comment moi-même l’intégrer !
Avec ton tutoriel et surtout ta vidéo j’ai vite compris le fonctionnement ! J’ai mis 20 minutes à mettre en place ! En réalité… 2 minutes + 18 minutes pour faire mon image personnelle !
J’ai modifié le « Pin it » de base pour mettre mon image personnalisé :p !
Je te laisse venir jeter un coup d’oeil sur mon blog si cela t’intéresse : https://blog.kidefring.fr/
Merci beaucoup 😉
Super ! Sympa ton bouton personnalisé 🙂 Merci de ton retour !
Merci c’est gentil ! C’est Baymax du dessin animé les Nouveaux Héros de Disney :p !
De rien pour le retour, ton tutoriel est très bien fait 😉 !
Merci beaucoup pour ce tuto hyper bien expliqué!
En 2 minutes tout était installé, c’est top! 😉
Super Stéphanie. Merci de ton retour !
Bonsoir. J’ai une question : le bouton pin’it est-il également utilisé pour ramener vers un site marchand, lorsqu’on a pour but de vendre le produit affiché dans l’épingle ?
Bonjour Guillaume
Oui on peut épingler des images de produits 🙂
merci pour ce petit tuto bien utile !
Avec plaisir 🙂
Bonjour, je suis tombée sur votre blog complétement par hasard. Votre article a été super utile, donc merci. Je voulais juste vous dire que j’adore votre façon d’écrire. Je vais aller errer sur votre site, mon petit doigt me dit que je vais y trouver pleins de choses intéressantes.
Merci Aillie 🙂