Botón Pin It oficial que aparece al hacer hover... y algo más | Oloblogger Hay que ver lo que facilita la vida lo de estar al día. Hace ya bastante tiempo vi un script que per...

20 de mayo de 2013

Botón Pin It oficial que aparece al hacer hover... y algo más

Hay que ver lo que facilita la vida lo de estar al día. Hace ya bastante tiempo vi un script que permitía colocar un botón sobre las imágenes para pinearlas (en Pinterest, claro) y que aparecía sólo cuando se pasaba el puntero por encima de ellas. Lo que ocurre es que todo el código estaba comprimido y aunque funcionaba como prometía, al no poder verificar su contenido preferí no publicarlo.

El motivo es que el código que no vemos podría incluir algún código no conveniente cuando no directamente malicioso y siempre intento no participar en la difusión de este tipo de software. Ya hablaremos en otra ocasión algo más sobre esto.

Pero resulta que no hace mucho el propio Pinterest incluyó en su script esta misma utilidad y eso ya es otra cosa. Cierto es que tampoco puedo ver el código, pero la fuente ya es de absoluta confianza. Además, usando el código oficial ahora resulta muy fácil de implementar esta utilidad. De hecho tan sólo hace falta una línea de código y si ya tenemos instalados los botones en nuestro sitio con otros sistemas, pues apenas cuatro palabras adicionales.

Probando que es gerundio.



¿Y cuál es ese fantástico código? Pues este. Una línea que hay que insertar preferentemente antes del cierre del body (</body>):

<script data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>

Y las palabras que hacen la magia son esas de data-pin-hover='true'. Como decía al principio, si ya teníais cargado el script de Pinterest (sólo hay que buscar si tenéis pinit.js en vuestra plantilla), entonces simplemente añadid esa data-pin-hover='true' dentro de la llamada al script tal y como se ve arriba.



El sistema es automático con las ventajas e inconvenientes que ello puede suponer. Las primeras nos importan poco porque son beneficiosas, pero entre los inconvenientes está el de que a veces se agrega el botón a imágenes que no deseamos que lo tengan.

Si os ocurre algo de eso sólo hay que añadir un data-pin-no-hover='true' a la imagen en cuestión:

<img data-pin-no-hover='true' src='URL_IMAGEN' />

De las dos siguientes la segunda no tiene nada especial y a la primera le he añadido ese parámetro.




Y ya que estamos, una manera también muy fácil de embeber determinado pin en una entrada. Sólo hay que copiar del navegador la dirección del pin (en verde) y ponerla como enlace con un data-pin-do="embedPin":

<a data-pin-do="embedPin" href="http://pinterest.com/pin/17310779788880665/"></a>




¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

29 comentarios :

  1. Muy buena entrada Oloman. Así si hay mas confianza para poder ponerlo en el blogg. Con más tiempo lo voy a implementar.

    Saludos y que bueno que ya estés de vuelta, espero que con mucho más tiempo. Exitos Oloman

    ResponderEliminar
  2. Maestro una pregunta como puedo poner que mis entradas aparesca como esta pagina http://vientoencontra.com/videos/ mira por favor dime como lo hago

    ResponderEliminar
    Respuestas
    1. Manuel, tendrías que acoplar esto de aquí a tu caso concreto, pero te va a tocar currar para adaptarlo ;)

      Eliminar
    2. gracias parce, vere si me funciona

      Eliminar
  3. Muchas gracias!! Lo probaré. Ya tengo instalado el boton de pinterest que publicaste en Otras opciones para instalar el botón de Pinterest . En concreto el de Imagen y texto a elección del usuario. Y no tuve ningun problema con ese. Tengo que intentar ésta opción :D

    ResponderEliminar
  4. Conseguido!! Muchas gracias!!!!Llego un momento que no conseguía encontrar el código del anterior que tenía metido...y despues de dar muchas vueltas y leer informacion me di cuenta que cuando daba control+F me salia el del navegador...por fin he visto el editor propio del editor de blogger y he buscado en condiciones :D

    ResponderEliminar
    Respuestas
    1. Entonces... ferpecto, o sea, casi perfecto ;)

      Eliminar
  5. Te voy a molestar de nuevo con dos cuestiones...
    ¿Se puede poner el botón arriba a la derecha (en lugar de a la izquierda como viene por defecto)?
    Y, por otra parte, tengo un problemilla al ponerlo en mi blog (www.mimaletayyo.com) y es que sólo me sale el botón en las imágenes que están solas y centradas... Cuando pongo dos juntas, no sale... ¿sabes por qué puede ser?
    Un saludo y muchas gracias por todo ;)

    ResponderEliminar
    Respuestas
    1. No sabría cómo cambiarlo de sitio, pues todo lo hace automáticamente el script de Pinterest. Y lo mismo pasa con el fallo que observas, aunque ahí tengo una teoría y es que el algoritmo de Pinterest para colocarte el botón o no, tiene en cuenta el tamaño de la imagen. He visto que en las pequeñas no sale normalmente. No sé si será ese tu caso.

      Eliminar
    2. ¡Muchas gracias! Sí creo que discrimina en función del tamaño.
      Un saludo

      Eliminar
  6. En el blog de Prueba que es donde estoy probando todas las modificaciones nuevas de cosillas para sumar al blog y su difusión del contenido solo tengo videos, pero me gusta ver que incluso si paso el cursor por la imagen de cabecera esta también se puede pinear (jijijiji).
    Gracias en verdad por toda la ayuda que estoy recibiendo a través de tus publicaciones. ♥

    ResponderEliminar
  7. Muchas gracias.....muy fácil, pero atención GUARDAR la plantilla y comprobar después ya que en la VISTA PREVIA no sé ve el pin.....se ve una vez guardado (guardar plantilla)

    ResponderEliminar
  8. Y cómo hago para que el botón aparezca en todas las entradas de una sola etiqueta. Es decir en mi blog hay varios temas pero solo quiero que aparezca ese botón en las fotos de un tema. No quisiera usar la opción "manual" en cada imagen.

    ResponderEliminar
    Respuestas
    1. Para eso tendrás que buscar en la plantilla la utilidad que genera las etiquetas y, en medio de ella, insertar una condición que incluya ese código de Pinterest. Tal que así:

      <span class='post-labels'>
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'>
      <data:label.name/>
      </a>

      <!-- INICIO PARTE A INSERTAR -->
      <b:if cond='data:label.name == "ETIQUETA_PARA_PINTEREST"'>
      <script data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
      </b:if>
      <!-- FIN PARTE A INSERTAR -->

      </b:loop>
      </b:if>
      </span>

      Eliminar
    2. Pefecto Oloman Oloman. Funcionó.

      Gracias y salu2

      Eliminar
    3. Otra cosa, estoy intentando cambiar el botón Pinterest que sale y poner otro que sea más grande pero me estoy volviendo loco y no encuentro cómo hacerlo.

      Supongo que será tan fácil como cambiar la direccion src pero no encuentro

      Me puedes echar una mano?

      Eliminar
    4. Pues no, no va a ser fácil porque ese script es el que mete la imagen del botón. De todas formas puedes probar a forzar el CSS añadiendo esto a tu plantilla con los valores que quieres:
      span.PIN_1408969028650_embed_pin a.PIN_1408969028650_embed_pin_link i.PIN_1408969028650_repin {
      height: 40px!important;
      width: 80px!important;
      background-size: 40px 60px!important;
      background: transparent url(http://passets.pinterest.com/images/pidgets/pinit_bg_en_rect_red_20_1.png) !important;
      }

      No sé si los números son fijos o van cambiando. En este último caso tendrías que usar selectores de atributos.

      Eliminar
    5. Gracias pero creo que no me he explicado. Lo que quiero es cambiar su diseño no sus magnitudes. Es decir que aparezca el botón "P" con otro diseño.

      He leído por ahi que se puede hacer pero no logro saber cómo

      Salu2

      Eliminar
    6. Para meter otro diseño de botón no puedes utilizar este botón oficial. Tendrías que utilizar este otro código que te permite poner la imagen que tú quieras. Es el que hay al final del post.

      Eliminar
    7. Pero me temo que, en mi caso, no es válido ya que este código hace que aparezca en todos los post y no solamente en los post con una etiqueta en concreto, como quiero.

      Eliminar
    8. Buaaahhhh !!! Me siento frustrado.
      Bueno, volvemos al principio :)

      Se trata de hacer lo primero que te contesté en 11.1, pero en lugar de poner el código oficial (esa línea que decía SCRIPT DATA-PIN-HOVER... etc) pones ese otro que te enlacé ;)

      Eliminar
    9. Supongo que sentirás frustrado porque no te entiendo jeje.

      No funciona así tampoco. Poniendo ese enlace quitando la línea que dices, no aparece ningún botón.

      Eliminar
    10. Bien. Ve a http://www.oloblogger.com/2012/03/pinterest-boton-que-se-ve-y-funciona.html. De todo lo que se explica, utiliza la segunda opción y dentro de esta, la segunda variante.

      Una vez que veas que te funciona, utiliza el código de 11.1 para "rodear" con él el último trozo de código (la segunda variante, en lugar de la línea SCRIPT DATA-PIN-HOVER.... )

      Te anticipo que ese sistema ya no tiene nada que ver con el que se explica en este post, pues este usa el código oficial y lo que te expliqué usa otro.

      Eliminar
    11. No Oloman, no funciona. Te explico, funciona pero sale el botón en la zona donde esta el texto/enlace de la etiqueta en cuestión (en el post-footer) y no sobre la foto, como al principio con la respuesta 11.1

      Eliminar
    12. Es lo que te decía en 11.6 y en 11.10, son dos sistemas distintos y ya no sé qué quieres con tantas variantes.

      Para personalizar el botón CON EL SISTEMA DE ESTE POST, sin más, puedes probar esto, pero si no funciona, no hay otra manera:

      span.PIN_1410383836875_embed_pin a.PIN_1410383836875_embed_pin_link i.PIN_1410383836875_repin {
      background: url(DIRECCION_DE_TU_BOTON_PERSONALIZADO) !important;
      }

      Eliminar
  9. Las instrucciones me sirvieron mucho. Al inicio no encontraba el dichoso < / body > porque al buscarlo con CTRL +F lo hacía con el del navegador y no encontraba nada. Hasta que leí en los comentarios que el buscador era el de la misma plantilla yvoilà.
    Gracias!!

    ResponderEliminar