Réseaux sociaux Pinterest Pinterest : Bouton Pin-It / Pin-It button

Pinterest : Bouton Pin-It / Pin-It button

Pinterest : Bouton Pin-It / Pin-It button
Référence : Pinterest Developers.
Le bouton Pin-It de Pinterest Le bouton "Pin-It" de Pinterest, configuration pour Blogger.
Diverses versions : standard, standard combiné bookmarklet. Se place en-dessous ou au-dessus de chaque article.
3 formats (sans compteur, compteur vertical, compteur horizontal).
Possibilité de "pinner" les articles sans photo.
+ autres configurations : conditions d'affichage, alignement, etc.




Présentation du bouton

Compteur horizontal Compteur vertical Sans compteur
Pin-it standard Pin It
Pin-it standard combiné Bookmarklet Pin It Pin It


Haut de page


Version Pin-it standard combiné Bookmarklet

Dernière correction : 18/03/2013.

Ce code combine 2 types de bouton.

  1. La version standard Pin-it. Elle ouvre une fenêtre "pop-up". Dans ce montage, elle est utilisée dans les pages index et archives.
  2. La version Bookmarklet. Affiche en plein écran une palette des images disponibles sur la page courante. Elle est utilisée dans les pages des articles et les pages autonomes.

Le bouton apparaîtra que si l'article associé contient au moins une image.
Si l'article ne contient pas d'image, il est possible de lui attribuer une image de substitution (à ajouter dans le générateur ci-dessous).
Sur les pages index, archives et accueil, le bouton ouvre une fenêtre pop-up (comme avec Facebook ou Twitter) et proposera automatiquement dans le descriptif, le titre de l'article et un petit résumé. L'image sélectionnée sera la première issue du même article.


Configurez le code du bouton
Version bookmarklet
Combiner la version Bookmarklet avec la version standard ?
Format
Image de substitution
Ajoutez l'url de l'image de substitution. Par exemple, le logo de votre blog.
Condition d'affichage
Alignement

  <span style='position: relative; display: inline-block;'>
    <b:if cond='data:post.firstImageUrl'>
      <span style='width: 40px; height: 20px; display: inline-block;'><a class='pin-it-button' count-layout='none' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl +  &quot;&amp;description=&quot; + data:blog.title + &quot; | &quot; + data:post.title + &quot; | &quot; + data:post.snippet'>Pin It</a></span>
    </b:if>
  </span>





Le script :

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>


Pour que le bouton devienne fonctionnel, vous devez recopier le script ci-dessus dans le code HTML du blog juste avant la balise </body>.


Haut de page


Liens divers



Haut de page


Dans le même dossier



Haut de page


Les discussions Blogger Google+ Facebook
Les publications populaires de la semaine
Plan du blog
Les forums
Liens de la page
URL
HTML
BB Code
Licence CC BY-NC-SA 3.0
Droits de propriété intellectuelle
Cette page intitulée « Pinterest : Bouton Pin-It / Pin-It button » issue de Blogger Code (http://bloggercode-blogconnexion.blogspot.com/) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, remixer, arranger, et adapter le contenu de cette page à des fins non commerciales dans les conditions fixées par la licence, tant que le code ci-dessous est intégré dans la copie.