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.
Y muchos más artículos interesantes si nos sigues en...
Muy buena entrada Oloman. Así si hay mas confianza para poder ponerlo en el blogg. Con más tiempo lo voy a implementar.
ResponderEliminarSaludos y que bueno que ya estés de vuelta, espero que con mucho más tiempo. Exitos Oloman
Gracias Oloman
ResponderEliminarLo estaba esperando! Gracias!
ResponderEliminarMaestro una pregunta como puedo poner que mis entradas aparesca como esta pagina http://vientoencontra.com/videos/ mira por favor dime como lo hago
ResponderEliminarManuel, tendrías que acoplar esto de aquí a tu caso concreto, pero te va a tocar currar para adaptarlo ;)
Eliminargracias parce, vere si me funciona
EliminarGenial!
ResponderEliminarMuchas 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
ResponderEliminarConseguido!! 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
ResponderEliminarEntonces... ferpecto, o sea, casi perfecto ;)
EliminarTe voy a molestar de nuevo con dos cuestiones...
ResponderEliminar¿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 ;)
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¡Muchas gracias! Sí creo que discrimina en función del tamaño.
EliminarUn saludo
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).
ResponderEliminarGracias en verdad por toda la ayuda que estoy recibiendo a través de tus publicaciones. ♥
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)
ResponderEliminarY 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.
ResponderEliminarPara 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í:
Eliminar<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>
Pefecto Oloman Oloman. Funcionó.
EliminarGracias y salu2
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.
EliminarSupongo que será tan fácil como cambiar la direccion src pero no encuentro
Me puedes echar una mano?
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:
Eliminarspan.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.
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.
EliminarHe leído por ahi que se puede hacer pero no logro saber cómo
Salu2
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.
EliminarPero 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.
EliminarBuaaahhhh !!! Me siento frustrado.
EliminarBueno, 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é ;)
Supongo que sentirás frustrado porque no te entiendo jeje.
EliminarNo funciona así tampoco. Poniendo ese enlace quitando la línea que dices, no aparece ningún botón.
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.
EliminarUna 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.
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
EliminarEs 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.
EliminarPara 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;
}
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à.
ResponderEliminarGracias!!