Jugando con el botón de Pinterest

Una de las modas de estos nuevos tiempos es el uso de redes sociales, pseudo-sociales y todos esos sitios donde se comparten cosas. Algunos son exitosos porque "los usuarios los usan" y otros pasan al olvido rápidamente; hacia donde vamos o cuál será el modelo de internet que tendremos en unos años vaya uno a saber, por ahora seguimos caminando, probando y viendo de que se trata todo esto.

Uno de esos servicios que se está imponiendo es Pinterest y el botoncito para compartir ya se ve en muchos sitios.

Colocarlo es sencillo, se hace del mismo modo que con cualquiera de ellos, copiando y pegando el código que ofrecen y listo, funcionará sin problemas aunque , para mi gusto, es muy lento.

La forma de aplicarlo a Blogger la pueden ver en dos artículos escritos por Oloman donde se explica detalladamente su uso y las variantes que pueden elegirse: Pinterest, botón que se ve y funciona y Otras opciones para instalar el botón de Pinterest.

Ahora bien, para jugar un poco, me puse a ver si era posible hacer lo mismo pero de modo más específico, es decir, ver si podía agregarse ese botón a determinadas cosas y no a los posts en general; por ejemplo, adosar ese botón sólo en ciertas imágenes que uno quisiera que fueran compartidas y para ello, recurro a jQuery porque no se me ocurre nada más fácil.

El resultado, será algo como esto:

¿Cómo se identifica qué imagen quiero compartir y cuál no? Simplemente, le agrego una clase a la etqiueta IMG que, en este caso, será class="pin":

<img class="pin" src="URL_IMAGEN" />

Obviamente, lo primero que debo hacer es colocar el script del servicio que va al final de la plantilla, antes de </body>:

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

Y para que esto funcione, el botón también lo voy a crear con JavaScript cuyo código colocaré antes de </head> o antes del script anterior.

Los datos que debemos enviar son tres:

url es la drección desde donde se envía es decir, nuestra página
media es la dirección de la imagen
description es un texto alternativo

Quiero enviarle esos tres datos y además, que al hacer click en el botón, no se abra la página de Pinterest en otra pestaña sino en una ventana tipo pop-up así que armo algo como esto:

<script type='text/javascript'>
//<![CDATA[

// esto evitará que el enlace se abra en otra pestaña
$(document).on('click', '.pin-it-button', function(e){
  e.preventDefault();
})

// esto hará que el enlace se abra en una ventanita de tipo pop-up
$(document).on('click', '.pinimg', function(e){
  var url = $(this).attr('rel');
  window.open(url,"pinshare","toolbar=0,status=0,width=620,height=320");
})

// y cuando se cargue la página
$(document).ready(function(){

  // buscaremos todas las imágenes de los posts que tengan la clase "pin"
  $('.post-body img.pin').each(function() {

    // con estos datos vamos a armar la dirección url que debe enviarse a Pinterest
    var post = location.href; // la dirección de nuestra página
    var src = $(this).attr('src'); // la imagen a compartir
    var texto = document.title; // la descripción será el título de la página
    if($(this).attr('alt')) {
      // y si colocamos el atributo alt en la imagen, allí podríamos mostrar un texto especial; si existe, lo usamos
      texto = $(this).attr('alt') + " : via MIBLOG";
    }

    // verifico si la imagen flota
    var cssflotar = $(this).css('float');

    // y creamos el botón con esos datos 
    var boton ="<a count-layout='none' class='pin-it-button' href='#'><img title='Pin It' src='//assets.pinterest.com/images/PinExt.png' class='pinimg' rel='http://pinterest.com/pin/create/button/?url="+post+"&amp;media="+src+"&amp;description="+texto+"' /></a>";
    // la etiqueta A tiene un href vacio justamente para evitar que se abra
    // el dato a enviar está en el atributo rel de la etiqueta IMG

    // rodeamos nuestra imagen con una etiqueta SPAN
    $(this).wrap('<span class="pinwrap"></span>');
    // que tiene la misma propiedad flaot que la imagen
    $(this).parent().css('float',cssflotar);
    // y le adosamos el botón 
    $(this).after(boton);
    // y si tiene, le sacamos la flotación a la imagen
    $(this).css('float','none');
  })

})

//]]>
</script>

Un poco de CSS para que el botón se superponga a la imagen y pueda aplicarse a cualquier imagen, centrada o flotante:

<style>
  .pinwrap {
    display: inline-block;
    position: relative;
  }
  .pin-it-button{
    bottom: 10px;left: 10px;
    position: absolute;
  }
</style>

Y terminamos.

Acá abajo, la imagen de la derecha puede compartirse y la de la izquierda no: