Boton de Pinterest superpuesto en cada imagen de tu blog

Pinterest es sin duda un gran aliado para todos aquellos blogs donde las fotografías son las protagonistas de cada publicación. En este medio social, el lema es: una imagen vale más que mil palabras, así que si tu blog (en Blogger) cuenta con imágenes atractivas, con este tutorial podrás hacer que se muestre un botón de Pinterest sobre tus fotos cuando el usuario mueva el ratón sobre ellas, a partir del cual podrá compartirla.

Cómo poner el botón de Pinterest superpuesto a cada imagen del blog (Blogger)

Si no conoces Pinterest, te invito a que leas primero el artículo Pinterest y Blogger una combinación explosiva.
Tal y como he mencionado anteriormente, veremos cómo añadir un código a tu plantilla HTML con el fin de mostrar un botón de Pinterest cuando el usuario pasa el ratón por encima de las imágenes. Al hacer clic, se iniciará el proceso de compartir la foto y quien sabe hasta donde será capaz de llegar. Me parece un tutorial muy atractivo para aquellos blogs que quieren mantener un estilo minimalista sin demasiados botones ni enlaces.
Con esta publicación quiero dar respuesta a muchas solicitudes recibidas que me pedían seguir profundizando la integración de Blogger y Pinterest. En el próximo tutorial veremos cómo añadir el botón de Sígueme en Pinterest.

Comprueba su funcionamiento

Para ver una demo antes de aplicar este tutorial, solo tienes que mover el ratón sobre la imagen que acompaña a esta publicación o cualquier otra.

Botón de Pinterest superpuesto en cada imagen de tu blog

Fragmento de código para tu plantilla:

1. Ve a la pestaña Plantilla
2. Haz clic en el botón Crear copia de seguridad/restablecer
3. Crea una copia de seguridad de tu plantilla actual
4. Una vez que tengas la copia, haz clic en el botón Edición de HTML
5. Usa la combinación de teclas Ctrl F o Ctrl B (en Mac ⌘F o ⌘B) para abrir el buscador
6. Busca </body> dentro de tu plantilla. 
7. Copia el siguiente código
   (haz clic sobre la casilla de texto y usa el botón derecho para copiar o Ctrl C o bien ⌘C si usas un Mac)
<script>//</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>

8. Pégalo (Ctrl V o bien ⌘V si usas Mac)  justo antes de la linea donde hemos encontrado </body>
9. Guarda tu plantilla y visualiza el blog usando el botón Ver blog situado en la parte superior del propio editor. Si quieres personalizar la posición y el icono de Pinterest, sigue leyendo.

Cambiar la posición/icono de Pinterest (Opcional)

Cambiar la posición en la que aparece el icono de Pinterest sobre la imagen:

Por defecto, el icono de Pinterest se muestra en el extremo superior derecho de la imagen, si quieres cambiar esta posición, debes cambiar el valor de la variable siguiendo este paso.

1. Vuelve al editor, justo al fragmento de código que hemos insertado
2. Cambia la variable bs_pinButtonPos = "topright"; por:
• topleft  (extremo superior izquierdo)
• bottomleft (extremo inferior izquierdo)
• bottomright (extremo inferior derecho)
• topright (extremo superior derecho, por defecto)
• center (centro)
3. Guarda tu plantilla y visualiza el blog usando el botón Ver blog situado en la parte superior del propio editor. De esta forma mantienes el editor abierto por si quieres incorporar alguno de los siguientes cambios.

Personaliza el icono de Pinterest

Si lo deseas, también puedes cambiar el icono de Pinterest, para ello deberás proveer tu propio icono y publicarlo por ejemplo de Google Sites o en los Albumes Web de Picasa. Copia la URL de ese icono e indícala en la variable bs_pinButtonURL

¿Qué te ha parecido este tutorial?, ¿lo has aplicado a tu blog?, ¿has probado a pinear este tutorial?

Te invito a que me ayudes a completar este tutorial simplemente dejando tu comentario.