Si vous aimez le réseau Pinterest, vous pouvez ajouter sur chacune de vos photos un bouton Enregistrer (anciennement "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 !
Dans cet article, je vous propose d'apprendre à installer un bouton Pinterest facilement sur la plateforme Blogger.
Dans cet article
#1 - Créer le widget du bouton Enregistrer sur Pinterest
1. Nous allons commencer par créer un widget Enregistrer sur Pinterest. Ça se passe sur cette page : générateur de bouton Pinterest.
Si vous obtenez un message d'erreur de type "Something went wrong on our end", essayez de vous connecter à votre compte avant d'utiliser l'outil. Une fois connecté, allez dans le menu "Tools" en haut de page et sélectionnez le widget bouton Enregistrer.
2. Choisissez le type de bouton intitulé "Survol d'image" : ça permettra au bouton Pinterest de s'afficher discrètement quand l'internaute survole une image avec sa souris, pour lui permettre de l'enregistrer.
3. Choisissez l'apparence de votre bouton Enregistrer : vous pouvez 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 "Arrondi"... et faire grossir la taille du logo, quelle que soit son apparence, en cochant la case "Grande".
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" :
Et le bouton Pinterest rond :
4. Un peu plus bas sur la même page, Pinterest vous donne un code commençant par <script. Copiez-le. Nous allons maintenant passer à la deuxième étape.
#2 - Installer le 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" : le code que vous allez y copier ne se verra pas directement sur la page... mais pour qu'il soit actif, ça suppose que le widget soit présent. Autrement dit, si vous voulez que le bouton Enregistrer apparaisse sur vos articles de blog, vérifiez que les widgets s'affichent bien sur les articles en question.
Sur certains thèmes Blogger, il peut arriver qu'il n'y ait pas de widgets sur les pages du blog (c'est de plus en plus rare) : si c'est votre cas, le code ne fonctionnera pas.
3. Parmi les options qui s'affichent, choisissez "HTML/Javascript".
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.
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 !
Astuce bonus : les conditions
Si vous voulez que le bouton Pinterest s'affiche seulement sur les articles et pas sur d'autres types de pages, vous pouvez utiliser des conditions dans le code.
Au moment où vous copiez-collez le code Pinterest dans un widget HTML/JavaScript sur Blogger, écrivez-le en ajoutant ces deux éléments autour (l'un avant, l'autre après) :
<b:if cond='data:blog.pageType == "item"'>COPIEZ LE CODE PINTEREST ICI</b:if>C'est une condition, qui permet de dire à Blogger "si on est sur une page de type Item" (c'est-à-dire un article), alors fais appel à ce bout de code Pinterest. Ça permet de contrôler l'affichage du bouton Enregistrer afin qu'il ne soit pas présent sur les autres types de contenu.
Je vous conseille de lire les conseils de Cécile pour gagner en visibilité sur Pinterest si vous souhaitez développer votre compte !
Merci pour cet article, c’était simple et efficace !
Merci d’avoir pris le temps de laisser un message !
Bonsoir. Je ne trouve pas à quoi c’est du je suis sur Blogger
Bonsoir, je n’ai malheureusement pas de solution, tournez-vous peut-être vers les forums d’aide de Blogger.
Bonsoir. Merci
Bonsoir. Je viens vers vous car j’ai un soucis sur blogger avec Pinterest. J’ai activé selon votre article les épingles enrichies mais quand je partage via mon blog les photos sur Pinterest le titre de mon article n’apparait pas sous la photo aux abonnés. Les abonnés doivent cliquer sur la photo pour voir le titre de la photo (le titre de la recette). Un tout grand merci pour votre réponse.
Hello Laurent, les métadonnées sont-elles bien renseignées sur Blogger ? Que dit l’URL Debugger de Pinterest sur les pages ?
Bonsoir. Merci beaucoup. Oui, j’ai suivi la procédure suivant vos explications sur le blog (qui sont très claires ;)). Pinterest m’indique que je vais recevoir un mail me confirmant l’activation des épingles. J’ai reçu l’email me confirmant l’activation. Quand j’épingle via mon blog blogger l’image s’affiche pour les abonnés sans aucune description de l’image. Je ne comprends pas à quoi c’est du… Merci beaucoup
Hello, si c’est la description qui est manquante sur Pinterest, la meta description de l’article a-t-elle bien été complétée sur Blogger ?
Bonsoir. Merci. Oui, la description y est. Je l’avais ajoutée. Je désespère… je cherche… Merci beaucoup
Hello Marlène,
Merci beaucoup pour ce tuto hyper détaillé, c’était un jeu d’enfant de le mettre en place :)
Tant mieux, c’est toujours plus sympa quand ça ne se transforme pas en prise de tête géante :)
Génial !
J’ai (enfin) réussi à installer le widget Pinterest grâce à ton post, j’avais essayé précédemment déjà mais sans succès #blonde ;)
Merci et bonne fin de journée,
Sabine
Bien joué !
Merci !!!
;)
Coucou
Je trouve ce tuto formidable , mais j’ai un petit soucis j’ai réussi à le mettre mais maintenant que j’ai fait des modifications sur mon blog je n’arrive plus à le remettre j’ai pourtant suivi la marche à suivre mais je ne trouve toujours pas solution . est ce le thème que j’ai choisi qui ne serait pas compatible avec ce gadget ?
Hello Estelle, j’ai l’impression que les widgets présents sur tes pages Articles ne sont pas les mêmes que sur la page d’accueil… à mon avis, c’est dans la direction des emplacements de widgets qu’il faut creuser !
Bonjour
Ça ne marche que sur la page d’accueil mais pas sur les articles sur mon blog
Hello Sara, c’est normal : tu n’affiches pas les widgets sur les articles… donc si tu colles du code dans un widget qui n’est présent que sur la page d’accueil, il ne va être actif que sur la page d’accueil. Il faut que tu le colles dans un widget utilisé partout.
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
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 ?
Géant, bien expliqué
Je vous remercie, çà va permettre à mon groupe d’être mieux connu, je vais lire d’autres articles,
J’adore apprendre
Merci pour le commentaire !
Merci pour ce tutoriel, c’est exactement ce que je cherchais ! :)
J’espère que ça t’a aidée !
Oh oui énormément :)
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.
Elle est bien pratique, cette extension Google Chrome ! Je l’utilisais à une époque pour l’un de mes sites.
Génial, merci beaucoup pour ce tuto !!
De rien !
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 ?
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 :)
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!
Merci pour tous ces articles, j’en apprends tous les jours.
Tant mieux ! Bonne journée :)
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.
Tsss mais ça n’existe pas les cyberquiches ;) Bravo !
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.
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 :)
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
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.
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
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.
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
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 :)
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
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
Tant mieux Géraldine, merci d’avoir pris le temps de laisser un petit message :)
Formidable ! Merci beaucoup !
Mais de rien ! Merci d’avoir pris le temps de laisser un commentaire :)
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.
oups ! mettre des bouts de code dans le commentaire a eu un effet qui n’était pas escompté !
Tu peux le modifier ?
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 :)
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.
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 :)
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.
Merci de ton commentaire, je suis contente que ça fonctionne !
Merci! C’est justement ce que je cherchais: simple, rapide et ça fonctionne :)
Tant mieux alors :) « Bon épinglage » comme dirait Pinterest !
Super tu es ma sauveuse ! je garde ton article précieusement !
J’espère qu’il te rendra service !