Revista Blog

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

Publicado el 29 mayo 2012 por Iniciablog @iniciablog
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. Haz clic en el botón "Continuar""
  5. Haz clic en "Expandir plantilla de artilugios"
  6. Pulsa la combinación de teclas Ctrl F o Ctrl B  (en Mac ⌘F o ⌘B)  y busca lo siguiente:
    <div class='post-footer-line post-footer-line-1'> 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)
  7. Copia el siguiente código
    <!-- Botón de Pinterest por iniciaBlog.com--> <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Ahora!</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/> <script type='text/javascript'> function run_pinmarklet() { var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;); e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;); e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999); document.body.appendChild(e); } </script> <!-- Fin de Botón de Pinterest -->
    Código original obtenido de My Blogger Tricks
  8. Vuelve a la plantilla HTML y péga el código justo debajo de la linea encontrada en el paso 6
  9. 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 count_layout='horizontal' por count_layout='vertical'. Si por el contrario no quieres el contador, cambia donde pone count_layout='horizontal' por count_layout='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

¿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!Visita iniciaBlog.com para descubrir nuevos temas! 7QFBG6CNEVAV

Volver a la Portada de Logo Paperblog