Cómo poner el botón de "pinear" de Pinterest en cada post de Blogger

En este artículo aprenderás a colocar el botón "Pinear" de Pinterest en cada post de tu blog usando Blogger. Vemos interesante este botón sobre todo para blogs con un fuerte componente visual en sus entradas, por ejemplo, blogs de moda, complementos, fotografía, maquillaje, viajes, decoración, artes visuales, cocina, etc.

Si tu blog encaja dentro de los tipos de blogs mencionados anteriormente y no conoces Pinterest o bien quieres conocer un poco más sobre esta red social, te invito a leer Pinterest y Blogger una combinación explosiva.

¿Cual es el objetivo de este botón?

Al poner este botón en cada uno de tus post, estás facilitando la tarea "pinear" a quién visita tu blog. Al hacer clic sobre el botón el usuario podrá elegir qué foto o video contenido en el post es el que quiere pinear o pinchar, hasta qué tablero y la descripción del mismo. Cuando más sencillo se lo pongas a quién visita tu blog, mejor estará integrado en las redes sociales y mayor tráfico de entrada generarás.

¿Cómo poner el botón de Pinterest en cada post de Blogger?

1. Haz clic en Pestaña Plantilla
2. Haz una copia de seguridad pulsando el botón "Crear copia de seguridad/Reestablecer"
3. Haz clic en el botón "Edición de HTML"
4. Pulsa la combinación de teclas Ctrl F o Ctrl B  (en Mac ⌘F o ⌘B)  y busca l
   <div class='post-footer-line post-footer-line-1'> o bien esto otro <div class='post-footer'>   para situarlo al pie del post .
   <div class='post-header'>para situarlo en la parte superior del post.
   (Si encuentras varios resultados es el primero en este caso)
5. Copia el siguiente código
   <!-- Botón de Pinterest por cortesía de iniciaBlog.com y BloggerSentral.com--> <!-- http://www.iniciablog.com/search/label/Pinterest --> <b:if cond='data:blog.pageType == "item"'> <div id='pin-wrapper' style='margin:10px 10px 10px 0; text-align: left;'> <a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a> <span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span> </div> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <style type='text/css'> #pin-wrapper > a {background-image:none !important;} </style> </b:if> <!-- Final del botón de Pinterest -->
   
   Código original obtenido de BloggerSentral.com
6. Vuelve a la plantilla HTML y péga el código justo debajo de la linea encontrada en el paso 6
7. Guarda, visualiza tu blog y haz una prueba de "pinear"

Acerca del contador del botón 

Por defecto el código ofrecido muestra un contador en la parte derecha del botón. Si quieres que el contador se muestre por encima, cambia donde pone data-pin-config='beside' por data-pin-config='above'. Si por el contrario no quieres el contador, cambia donde pone data-pin-config='beside' por data-pin-config='none'

Nota: Si tienes varios botones sociales es posible que tu linea quede mejor si este botón es el último de ellos tal y como está en iniciaBlog.com

¿Cómo alinear este botón?

Esta es una pregunta que me han hecho no solo con respecto a este botón sino también con respecto a resto de los botones que tenemos para compartir las entradas, como por ejemplo el botón de Twitter, Facebook, Linkedin, Google+, imprimir.  Aquí va mi sugerencia, debes poner una división (div) que envuelta tanto a este botón como a todos los demás que tengas. El código es muy sencillo:

<div style='width:600px; vertical-align:top;border:0'>

        ...aquí el código del botón de Pinterest

        ...y el resto de código de los otros botones que tengas para compartir

</div>

Con el parámetro vertical-align podemos alinearlos al Top (arriba), middle (medio), botton (abajo) +info sobre esta propiedad CSS

Con el parámetro width establecemos el ancho de la división. 

¿Te ha gustado esta publicación?

Si te ha gustado esta publicación, te invito a dejar tu comentario y compartirla con tus amigos y seguidores mediante los botones sociales, Ah! una cosa antes de terminar, si quieres recibir las próximas publicaciones directamente en tu buzón, suscríbete ahora al botetín de iniciaBlog indicando tu email (recuerda recibirás un correo electrónico con un enlace para confirmar tu suscripción).

Gracias y feliz Blogging!