JMiur [E]

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:

una imagen para compartir

14 comentarios:

Beben Koben  

i have jQuery plugin version master!
sorry if spam :)
http://beben-koben.blogspot.com/2012/05/add-button-pinterest-automatic-for.html

Responder
Isa ML  

¿Existe alguna manera de que el botón aparezca automáticamente a todas las imágenes del post sin necesidad de añadir class="pin" ?

JMiur  

Si, eso es posible. En lugar de:

$('.post-body img.pin').each(function() {
usar
$('.post-body img').each(function() {

Responder
Isa ML  

Muchísimas gracias por tu ayuda.
Una última pregunta ¿se podría mantener el botón fijo en la esquina inferior derecha sea cual sea el tamaño de la imagen? por más que lo intento no lo consigo.

Gracias de nuevo (:

JMiur  

Cambiando left por right en esta regla .pin-it-button{ }

Isa ML  

Se mantiene a la izquierda :S

JMiur  

.pinwrap:hover .pin-it-button {
display: block;
margin-top: -70px;
position: absolute;
right: 0;
}

Isa ML  

Gracias, ahora si =D

Responder
Photonica  

Buenas tardes.

Me gustaría hacerle una pregunta ¿se podría hacer algo para que el botón solo apareciese al pasar el ratón por encima de la imagen?

Gracias.

JMiur  

Podrías ocultar el boton por defecto y mostrarlo cuando se el cursor encima de la imagen:

.pin-it-button {display: none;}
.pinwrap:hover .pin-it-button {display: block;}

Responder
Photonica  

Hola de nuevo.

Me gustaría que al pasar el ratón por la imagen ésta bajase la opacidad, y apareciese el botón. He conseguido bajarle la opacidad a la imagen, pero al poner el ratón encima del botón éste también pierde opacidad. ¿Tendrías alguna sugerencia de como hacerlo?

¡Saludos y gracias!

JMiur  

Dependerá del ejemplo concreto que tengas, de la forma en que está armado el HTML y de las reglas de estilo que hayas colocado. Tendrías que mostrar dónde puede verse online.

Responder
Photonica  

Aquí por ejemplo:
http://harmonyanddesign.blogspot.com.es/

También en ocasiones se me ha presentado el problema de que mediante css (.post-body img) le asigno un ancho máximo a las fotos de los posts, pero eso también afecta al botón de Pin It y se ve enorme.

Gracias.

JMiur  

OK. Lógico, ya que el botón es una imagen y las propiedades agregadas a .post-body img {} también lo afectan así que, para establecer propiedades específicas para ese botón debes agregar una nueva regla.

Por ejemplo, para que no cambie la opacidad , ya que la regla genérica dice:

.post-body img :hover {
opacity: 0.6;
}

debes agregar:

.pinimg:hover {
opacity: 1 !important;
}

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR