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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter