Otras opciones para instalar el botón de Pinterest | Oloblogger La manera que vimos el otro día para instalar un botón de Pinterest en nuestro blog, sirve para forzar el envío de un título, texto y minia...

21 de marzo de 2012

Otras opciones para instalar el botón de Pinterest

La manera que vimos el otro día para instalar un botón de Pinterest en nuestro blog, sirve para forzar el envío de un título, texto y miniatura concretos.

Pero lo de la miniatura no va mucho con el estilo de esta red, pues ya comentamos que su poderío estaba en la fuerza de las imágenes y una de 72px como que no... no va a ser muy llamativa para ese medio.

Hoy veremos un par de variantes más mediante las que podremos enviar la imagen a tamaño original o dejar a criterio del usuario, qué imagen de entre las posibles que hay en un entrada quiere remitir.


Para ambos casos, lo primero que haremos será insertar el script principal de Pinterest, lo más cerca posible del cierre del body:

<!-- Script Pinterest -->
<script type='text/javascript' src='//assets.pinterest.com/js/pinit.js'/>


Envío forzado de datos


Para esta opción utilizaremos casi el mismo código que vimos anteriormente pero en esta ocasión, pasado por un script que sustituirá la miniatura por la imagen original. La ventaja de este sistema es que nos muestra el contador de pines recibidos.

El script habrá que meterlo antes de </head> y es este:

<!-- Reemplazar miniaturas Pinterest -->
<script type='text/javascript'>
//<![CDATA[
function pinterest(url,snippet,image){
var imagen=image;
var devolver='<a target="_blank" href="http://pinterest.com/pin/create/button/?url='+url+'&media='+imagen.replace('/s72-c/','/s1600/')+'&description='+snippet+'" class="pin-it-button" count-layout="horizontal"><img alt="Pin It" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKY8nMa63uqNlD0MzYuoYzgpSLMk41fgg0Tv76qLFw1i6q3kPbk6N8MV3e_FqtkD3q_wgg_CkcwokQfQAEGn-_vLoLwWpx4ut4pl-Eczoq6Mdx06ryQxEj4l6rU4xs7Ix0yy7bTXnewMo/s1600/pin+it.gif" /></a>';
if(imagen!='') return devolver; else return '';
}
//]]>
</script>


Y ahora, dónde queremos que aparezca el botón (normalmente en el post-footer), copiamos esto otro:

<script type='text/javascript'>document.write(pinterest(&quot;<data:post.url/>&quot;,&quot;<data:post.title/>+ <data:post.snippet/>&quot;,&quot;<data:post.thumbnailUrl/>&quot;));</script>

No sé si funcionará poniendo el código en una entrada, pero sería algo así. Pinchando podréis ver cómo se rellenarían los campos a enviar. No es necesario terminar el proceso porque la imagen de esta entrada no tiene mucho interés salvo por lo que se comenta al final.




Imagen y texto a elección del usuario


Esta opción la vimos en Pizcos y también la comentó Felipe OI.

En este caso, la ventaja es que el envío de datos no es automático y el usuario puede escoger qué imagen remitir cuando hay varias en el mismo post.

Es un único trozo de código y se debe situar allí dónde queremos que aparezca el botón:

<a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKY8nMa63uqNlD0MzYuoYzgpSLMk41fgg0Tv76qLFw1i6q3kPbk6N8MV3e_FqtkD3q_wgg_CkcwokQfQAEGn-_vLoLwWpx4ut4pl-Eczoq6Mdx06ryQxEj4l6rU4xs7Ix0yy7bTXnewMo/s1600/pin+it.gif'/></a>

Al igual que antes, os pongo este otro botón que en apariencia es igual, pero que sin embargo permite escoger al usuario la imagen a enviar. Pinchad para comprobarlo:



El uso de uno u otro sistema dependerá sobre todo de la naturaleza del blog. Si es como este que apenas tiene una imagen por entrada, el sistema automático parece el más indicado. Sin embargo, en sitios que incluyan normalmente varias imágenes por post, el segundo me parece más adecuado porque permite el envío individual de cada una de ellas.

La imagen ilustrativa es del portfolio de Carlos Pagán, uno de los diseñadores del logo de Pinterest.

¿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

23 comentarios :

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Quedó el rastro de tu comentario borrado ;) Ya supongo que averiguaste dónde estaba el enlace que echabas de menos...

      Eliminar
    2. Echaba de menos la dirección del sitio al hacer pin, pero veo que si sale, así que nada que objetar. Gracias por otro gran aporte :)

      Eliminar
    3. Aprovecho para preguntar si a la segunda opción, se le puede añadir de alguna manera el contador. Saludos.

      Eliminar
    4. Apostaría a que no y si se puede, yo no sé la manera.

      Eliminar
  2. Interesante, aún no pongo botón de Pinterest en mis blogs pero como tampoco es tanto visual pues a lo mejor y no sirve de mucho. Hace un par de días me estuvo fallando el Bookmark que uso para hacer pin, ¿este scrip es el mismo que usan los bookmarks?

    ResponderEliminar
    Respuestas
    1. Sí. No lo he comprobado carácter a carácter, pero casi seguro que sí.

      Eliminar
  3. Hola
    buscando y buscando la manera de poner el famoso botoncito en mis blogs, me encontre con esta web, creo que es para leer recostado en la cama y ponerme a probar tranquilo, en mi caso es blogger, y ya probe dos codigos que afirman funciona, pero nada, uno de esos codigos apareceria en la ezquina derecha de una entrada, y se coloca por encima de
    colocandolo debajo quedaria debajo de la entrada, pero parece no funcionar.
    Oloman, ¿podrias decir a que body te referis?
    y cual pertenece a blogger, saludos vuelvo a pasar y comento si salio :)

    ResponderEliminar
    Respuestas
    1. El primer trozo de código es común y se debe poner antes de </body>, lo más cerca posible de este. Todas las páginas tienen esa etiqueta de cierre necesariamente.

      Luego puedes escoger cualquiera de los otros dos códigos (sólo uno de ellos) y este has de ponerlo dónde quieras que aparezca el botón, pero siempre dentro del post-body. Necesitas hacer estas incorporaciones con "Plantillas de artilugios expandidas".

      Eliminar
  4. Hola una felicitación a todos los colaboradores de la pagina, yo también tengo una duda el primer codigo que es el del script ese por lo que entendí va hasta el final de toda la plantilla? antes del cierre de /body> y por lo que lei en el comentario pasado solo debo escojer un codigo de los 2 que siguen? y este lo pongo dentro del post-body? Saludos y Gracias

    ResponderEliminar
  5. Me salio pero lo tuve que poner en <div class='post-footer' o si lo tenia que haber puesto ahi ?

    ResponderEliminar
  6. A que creen que se deba que con mi boton de pin it de la barra del navegador si me deja ver la imagen a elección y con el Widget que le coloque me dice "Sorry, couldn't find any pinnable images or video on this page"

    ResponderEliminar
    Respuestas
    1. No sé. Acabo de probar en tu blog y me salen todas las imágenes para elegir sobre cual hacer pin. Comprobado en página principal y en un post. Quizás es cosa del login o algo así.

      Eliminar
  7. Tal vez aun asi muchas gracias por tu ayuda Oloman, e igual excelente tu ayuda con el tuto. Saludos

    ResponderEliminar
  8. Cuando lo instalé hasta sudaba chorros de sudor, como Tom Cruise en Mission Imposible, pensado que algo hiba a fallar, afortunadamente todo salió bien.

    Saludos.

    ResponderEliminar
  9. Muchas gracias, Oloman. He optado por la segunda opción y funciona perfectamente.

    Podría mostrarse un contador en este caso? o solo existe esa posibilidad en la primera opción.

    Un abrazo!

    ResponderEliminar
    Respuestas
    1. Yo sólo he podido mostrar los pins con la primera. No sé si habrá algún sistema más.

      Eliminar
  10. holas te comento qe probe los codigos el primero no salio pero el 2do si es raro el primero no sale en mis post qe tienen entradas con youtube pero en texto eh imagen normal si sale qe raro pero el 2do si sale bien

    mi pregunta es qe lo malo del 2do codigo es qe cuando le das clic te cubre toda la pagina hasta qe elijas una imagen y la pinees .. no abra alguna forma para se abra en una ventana aparte asi no asusta a algien qe le de clic .. y si se le puede poner un contador al segundo ejemplo seria geniaal por lo pronto ya lo puse en mi blog y anda bien pero con algunos detallitos qe puse en este comentario se veria mejor

    saludosss ^^

    ResponderEliminar
    Respuestas
    1. Yo sólo conozco estos métodos y ambos puedes comprobar en este mismo post que siguen funcionando. El segundo es como comento, o sea, con todas las imágenes para que el usuario escoja la que le interesa y sé cómo se podría abrir en ventana nueva, pero te aseguro que los que usan Pinterest no se asustan con eso ;)

      Eliminar
  11. Muy útil Oloman.
    De varios códigos con los que lo he intentado, solo me ha funcionado este.
    Un saludo!

    ResponderEliminar
  12. Hola el ultimo me a funcionado de maravilla gracias, lo podéis ver en www.dsleon.com.
    Gracias

    ResponderEliminar
  13. Gracias Oloman :)
    acá intenté otra forma sin tener que usar el conversor de javascript de 72px solamente con las etiquetas que brinda blogger, pero por ejemplo no funciona con videos al momento de pinear una entrada. :(

    ¿se puede agregar una etiqueta adicional al "media" para que pueda reconocer videos? por ejemplo lo puse en esta barra social (parecida al de youtube jeje) en este blog de pruebas

    http://pruebasplantill.blogspot.com/

    y este es el código del botón de pinterest

    <a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, this.target, 'width=600,height=260'); return false;' rel='nofollow' target='_blank' title='Compartir en Pinterest'/>

    gracias de antemano si es que hay una solucion al problemita con los videos jejeje ;)

    ResponderEliminar
    Respuestas
    1. Hola. El botón oficial sé que funciona con los vídeos, pero con ese código no sabría cómo hacer para que extrajera la miniatura ¿Has probado con data:post.thumbnailUrl en lugar de data:post.firtImageUrl?

      Lo que sí he comprobado es que la dirección que genera el gadget de Pinterest es una como esta, aunque insisto en que no sabría cómo obtenerla automáticamente:
      http://pinterest.com/pin/create/bookmarklet/?media=http://img.youtube.com/vi/XmSdTa9kaiQ/0.jpg&url=http://www.youtube.com/watch/:v=DXmSdTa9kaiQ&description=U2 - With Or Without You&is_video=true

      Eliminar