banner ad

Comment Ajouter Les Boutons et Widgets de Pinterest sur Votre Site Web ?

| 25 février 2014 | 3 Commentaires

Note : si vous souhaitez consulter mes infographies, études et chiffres sur les médias sociaux, vous pouvez me suivre sur Pinterest.

Saviez-vous qu’en plus du bouton « pin it », Pinterest proposait d’autres ressources pour augmenter la visibilité de votre compte auprès des lecteurs de votre site web ?

boutons-widgets-pinterest-pin

En effet, vous pouvez ajouter sur votre site web les solutions suivantes :

  • Le bouton « pin it ».
  • Le bouton « follow ».
  • Le widget « pin ».
  • Le widget « profile ».
  • Le widget « board ».

Ces options sont toutes disponibles à partir du « widget builder ».
Voyons ensemble comment les implémenter sur votre site web.

1. Le bouton « pin »

Le bouton « pin » permet à vos visiteurs d’épingler des éléments visuels (images et vidéos) de votre site web sur Pinterest.

Méthodologie :

Vous devez tout d’abord choisir le type de votre bouton :

  • « One image » -> Génère un bouton « pin it » pour une image sur une page.
  • « Any image » -> Génère un bouton « pin it » sur toutes les images de la page.
  • « Image Hover » -> Génère un bouton « pin it » lorsque la souris survole n’importe quelle image de la page.

« One image »

bouton-pin-pinterest-one-button

  1. Choisissez l’apparence : taille, forme, couleur et langue.
  2. Décidez si vous souhaitez l’affichage d’un compteur du nombre de pins et si oui, quelle position.
  3. Indiquez les URL de la page et de l’image.
  4. Ajoutez une description avec vos mots-clés.
  5. Copiez et collez le code HTML à côté de l’image ou de la vidéo où vous souhaitez que le bouton apparaisse.
  6. Copiez et collez le code Javascript avant la balise </body> de votre page.

« Any image »

  1. Choisissez l’apparence : taille, forme, couleur et langue.
  2. Copiez et collez le code HTML à côté de l’image ou de la vidéo où vous souhaitez que le bouton apparaisse.
  3. Copiez et collez le code Javascript avant la balise </body> de votre page.

« Image Hover »

bouton-pin-pinterest-image-hover

  1. Copiez et collez le code Javascript avant la balise </body> de votre page.

2. Le bouton « Follow »

Le bouton « Follow » permet à vos lecteurs de vous suivre sur Pinterest.

bouton-follow-pinterest

Méthodologie :

  1. Indiquez l’URL de votre compte Pinterest.
  2. Renseignez votre nom complet.
  3. Copiez et collez le code HTML où vous souhaitez que le bouton apparaisse.
  4. Copiez et collez le code Javascript avant la balise  </body> de votre page.

3. Le widget « pin »

Le widget « pin » vous aide à insérer une de vos épingles (pins) sur votre site.

widget-pin-pinterestMéthodologie :

  1. Indiquez l’URL de votre pin.
  2. Copiez et collez le code HTML où vous souhaitez que l’épingle apparaisse.
  3. Copiez et collez le code Javascript avant la balise </body> de votre page.

4. Le widget « profile »

Le widget « profile » autorise l’affichage sur votre site jusqu’à 30 de vos dernières épingles.

widget-profile-pinterestMéthodologie :

  1. Indiquez l’URL de votre compte.
  2. Choisissez la taille du widget.
  3. Copiez et collez le code HTML où vous souhaitez que vos 30 dernières épingles apparaissent.
  4. Copiez et collez le code Javascript avant la balise </body> de votre page.

5. Le widget « board »

Le widget « board » est utilisé pour présenter jusqu’à 30 des dernières épingles de votre tableau préféré.

widget-board-tableau-pinterestMéthodologie :

  1. Indiquez l’URL de votre tableau.
  2. Choisissez la taille du widget.
  3. Copiez et collez le code HTML où vous souhaitez que votre tableau apparaisse.
  4. Copiez et collez le code Javascript avant la balise </body> de votre page.

Questions : utilisez-vous des boutons et des widgets Pinterest sur votre site web ? Quels sont ceux qui vous paraissent intéressants ?

Tags: , ,

Catégorie: Social Media

Au sujet de l'auteur ()

Isabelle Mathieu est consultante en médias sociaux et experte Facebook. Elle accompagne les professionnels dans leur stratégie e-marketing et anime des formations intra et inter-entreprises. Elle est régulièrement interviewée sur des problématiques social media : l'Express, 01Net, 20minutes etc. En 2012, Isabelle Mathieu a été élue dans le Top 10 des influenceurs Européens par Salesforce et en 2013, comme l'un des Top Marketeurs Européens par Hubspot.
  • http://www.retro-games.fr Mathieu

    Bonjour Isabelle,
    Merci pour vos indications qui éclairent d’avantage que les maigres infos offertes par Pinterest (comme toujours chez les grands acteurs du web), mais je bloque encore sur le bouton « hover ».
    Je souhaiterai vivement installer ceci sur mon blog, étant donné que le bouton Pinterest de base ne reconnaît que la première image croisée dans le code, qui n’est pas toujours la plus intéressante du lot :/
    J’ai bien ajouté le script .js à mon code, mais quid du code HTML ? Dans mon esprit, je comprend que le script .js devrait activer la fonction sur toutes les images de l’article, mais rien ne se passe, et j’ai la question de ce « code HTML » dont vous parlez, mais je ne vois pas de quoi il s’agit…
    Merci de votre aide :)

  • isabellemathieu

    Bonjour Mathieu, c’est curieux. Quand je visite en effet le widget builder, je vois seulement le code javascript.
    Si nous suivons donc les instructions indiquées, il faut donc ajouter ce code javascript juste au-dessus la balise . Et c’est tout. (Je corrigerai le billet).
    Si vous l’avez bien installé à l’endroit indiqué, je ne sais pas pourquoi cela ne marche pas.
    En dernier recours, vous pouvez sollicitez @PinterestFR‎ sur Twitter voire utiliser un plugin wordpress si vous utilisez cette plateforme https://wordpress.org/plugins/pinterest-hover-pin-it-button
    Je viens d’ailleurs de noter dans la FAQ de ce plugin :
    « The Pin It button is offset when hovering over the image ->
    This is a known issue that affects the Pin It button on all WordPress sites when a user is logged in. If you logout, or the user isn’t logged into the site, the Pin It button will appear in the correct spot. This will be fixed soon without any updates to the plugin needed ». Essayez donc de vous déconnecter de votre site.

  • http://www.retro-games.fr Mathieu

    Bonjour Isabelle, et merci de votre réactivité.
    Oui, je suis bien d’accord que la méthode est obscure. Je me suis résolu à télécharger le plugin « jQuery Pin It Button » pour mon blog WP, et ce dernier fait très bien le boulot, avec pas mal d’options.

    Néanmoins j’aimerai comprendre tout de même le système d’installation pour d’autres expériences. De plus, même si le plugin n’est pas très lourd, il le sera toujours plus qu’un simple code…

    Je doute néanmoins de l’exactitude de la méthode « code juste avant le « , qui risque de générer des boutons Pin it de tout partout…

    Affaire à suivre ! :)

NOUVEAUTE : FORMATION FACEBOOK

NOS SERVICES

CE QU’ILS DISENT D’EMARKETINGLICIOUS

NOS PARTENAIRES

Wikio - Top des blogs - Marketing

Inscrivez-Vous A Ma Nouvelle Formation Facebook !

Apprenez comment acquérir des fans pour votre page Facebook et créer de l’engagement au sein de votre communauté ! Cliquez ici -> Programme et inscription

  • Date : lundi 26 mai 2014.
  • Lieu : Paris.
  • Prix : 899€ HT / Tarifs préférentiels.
  • Eligible OPCA et DIF.
  • Places limitées.
Lire les articles précédents :
code-html-tweet-insere-twitter
Comment Centrer un Tweet Inséré dans un Billet WordPress ? [Astuce]

Si vous aimez insérer des tweets dans vos billets wordpress, vous savez combien il peut être fastidieux de centrer un...

Fermer