Clicky

Crea un botón Pin it de Pinterest con jQuery

plugin Pin it para Pinterest

Este plugin permite Pinnear la imagen de inmediato

Pinterest ha ido creciendo hasta convertirse en uno de los medios sociales más famosos de la Web. Nos permite organizar y compartir todas las cosas bonitas que encontramos en Internet. Me pareció muy ingenioso cuando buscamos diseño de interiores, decoración, comida y otras imágenes.

Como te habrás dado cuenta, en la actualidad, el botón de pines realizados en Pinterest se puede encontrar en la mayoría de sitios web, también lanzaron un bookmarklet que escanea las imágenes de una página web y permite hacer pin fácilmente. Sin embargo, a veces se puede encontrar que no es cómodo cuando la página contiene más de 30 imágenes. Lleva un tiempo para encontrar la imagen. Como resultado, este plugin permite Pinnear la imagen de inmediato.

Con este plugin se ven todas las imágenes, y se envuelve dentro de un contenedor que viene con un botón Pin it de Pinterest. Así, el visitante sólo tiene que flotar por encima de la imagen que quiera, y hacer pin de inmediato. Es un plugin muy sencillo.

HTML

No hay ningún código HTML, básicamente sólo tienes que incluir los archivos CSS y Javascript:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.pinit.js"></script>
<script type="text/javascript">
$(function () {
    $('img').pinit();
});
</script>

CSS

Puede personalizarse el plugin con CSS. He hecho 2 imágenes semi transparentes (blanco y negro), así me siento libre para intercambiarlas. El CSS es bastante simple, la mayoría de los estilos son para los botones.

.pinit {
    position:relative;
    display:inline-block;
}
/* pin it overlay style */
.pinit .pinit-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:200;
    display:none;
    background:transparent url('semi-white.png') repeat 0 0;
    text-align:center;
}

/* button style, and center it */
.pinit .pinit-overlay a {
    position:relative;
    top:50%;
    left:50%;
    margin:-10px 0 0 -21px;
    display:block;
    width:43px;
    height:20px;
    background:transparent url('pinit-button.png') no-repeat 0 0;
    text-indent:-9999em;
}

.pinit .pinit-overlay a:hover {
    background-positon: 0 -21px;
}

.pinit .pinit-overlay a:active {
    background-position: 0 -42px;
}


Javascript

No hay ninguna cosa compleja en la sección javascript. Básicamente, estamos haciendo un plugin que envuelve cada una de las imágenes, la envergadura del Pin it y añadir un poco de HTML que hará el efecto de superposición con el botón Pin it. El botón Pin it es vinculado a la URL del Pin de Pinterest:

http://pinterest.com/pin/create/bookmarklet/?media={MEDIA_URL}'&url={URL}&is_video={IS_VIDEO}&description={DESC}

(function($){
    
    //Attach this new method to jQuery
    $.fn.extend({
         
        pinit: function(options) {
 
            var defaults = {
                wrap: '<span/>',
                pageURL: document.URL
            }         
             
             var options = $.extend(defaults, options);
            var o = options;
            
            //Iterate over the current set of matched elements
            return this.each(function() {
                
                 var e = $(this),
                     pi_media = e.data('media') ? e.data('media') : e[0].src,
                     pi_url = o.pageURL,
                     pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
                     pi_isvideo = 'false';
                     bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);
                    
                var eHeight = e.outerHeight();                
                     e.wrap(o.wrap);
                     e.after('<span style="height: ' + eHeight + 'px"><a href="' + bookmark + '">Pin It</a></span>');
                
                $('.pinit .pinit-button').on('click', function () {                
                    window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');                
                    return false;
                });     
                
                $('.pinit').mouseenter(function () {
                    $(this).children('.pinit-overlay').fadeIn(200);
                }).mouseleave(function () {
                    $(this).children('.pinit-overlay').fadeOut(200);
                });

                
            });
      
        }
        
    });

})(jQuery);

Conclusión

Eso es todo. Programa simple hecho con jQuery en tan sólo media hora. He probado la demo en diferentes navegadores (Chrome, Firefox, IE 7 +) y a mí no me flota la imagen de Pin it pero si funciona el enlace (algo se me escapa). En esta demo funciona a la perfección.

Jesus_Caceres