Suite à la publication de notre article sur les plugins Pinterest vous avez été nombreux à nous demander par commentaires / courriel / réseaux sociaux comment ajouter avec Blogger le bouton « Pin it » au survol d’une image. Autant avec Worpress c’était vraiment très simple, autant avec Blogger beaucoup trop complexe pour ceux qui détestent mettre les mains dans le cambouis et toucher au code de leur blogue.
Mais on a désormais trouvé une option assez simple pour l’installer sur Blogger donc on a décidé de partager ça avec tous nos lecteurs désespérés de ne pas pouvoir l’utiliser !
1. Parce que Pinterest est une source de trafic non négligeable pour votre blogue surtout si celui-ci est hautement visuel.
2. Parce que si vos lecteurs voient une image au début de l’article qui leur plait et qu’ils attendent d’être à la fin de votre article pour trouver le bouton Pin It il se peut qu’ils oublient de le faire entre temps.
3. Parce qu’en passant sur l’image et en voyant le bouton « Pin It » s’afficher il se peut que vos lecteurs se disent « Ah oui tiens je vais l’épingler».
1. Installez l’extension Pin it Button For Images sur votre blogue.
Vous pouvez garder le bouton d’origine ou télécharger votre propre bouton personnalisé.
2. Décochez la case “Disable the fade in/out on the button?” pour que le bouton “Pin It” soit visible seulement lorsque le lecteur passe le curseur sur l’image.
A gauche le bouton d’origine, à droite le bouton customisé par Wedding Chicks
1. Assurer vos arrières ! Allez dans « modèles » puis cliquez sur « sauvegarder / restaurer » et enfin sur « Télecharger le modèle complet ». Comme ça vous êtes sur de ne pas tout perdre au cas où vous feriez une erreur.
2. Allez dans « modèle » et cliquez sur « modifier le code HTML ». Cherchez parmi le charabia à l’aide de votre fonction ctrl+F la balise : </body>
3. Collez le code ci-dessous juste avant la balise </body> :
<script>
//<![CDATA[
var bs_pinButtonURL = « http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png« ;
var bs_pinButtonPos = « topright« ;
var bs_pinPrefix = « »;
var bs_pinSuffix = « »;
//]]>
</script>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type=’text/javascript’></script>
<script id=’bs_pinOnHover’ src=’http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js’ type=’text/javascript’>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>
Vous pouvez créer votre propre bouton si celui d’origine ne vous plait pas. Il vous suffit de le créer (une taille 50x50px semble idéale) et de l’héberger sur Picasa, image shack ou autre. Récupérer l’adresse de l’image (clic droit > copier l’adresse de l’image) et collez-la à la place de la ligne en rouge dans le code.
Le bouton est par défaut placé en haut à droite mais vous pouvez le changer de place en remplaçant le mention topright en bleu dans le code par :
Centre : center
En haut à gauche : topleft
En bas à gauche : bottomleft
En bas à droite : bottomright
Tadam !! Vous pouvez maintenant enregistrer votre modèle et vérifier sur votre blogue que le bouton fonctionne bien !
Merci à Bloggersentral pour l’astuce!
Partagez avec nous dans les commentaires ci-dessous votre blogue avec votre nouveau bouton Pin-It 🙂
