How to create a jQuery plugin for Pinterest

With all of the interest in Pinterest , we thought it would be a good idea to do a simple Pinterest sharing plugin for jQuery.

Let's start!

First we need to downloas the jQuery plugin boilerplate

(function( $ ) {

    $.fn.pinterest = function(options) {

        
        var settings = $.extend( {      
              
        }, options);
        

        return this.each(function() {    
        

        });


    };
})( jQuery );

Boilerplate provides us with the ability to specify setting configurations.

Let's costumize Pinterest Image!

(function( $ ) {

    $.fn.pinterest = function(options) {

        
        var settings = $.extend( {

            'button' : 
'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'

        }, options);

            
        return this.each(function() {
    
        
        });

    };

})( jQuery );

$(document).on('ready', function(){

    $('img#share').pinterest({ button:
 'pinterest-alt.png'});

});

Now we can add some functionality. We have to update the "this.each" function to initialize each image and add some events. We’ve decided to have the icon hover over the image being shared. Therefore, we need to wrap the image in a span element that positioned ‘relative’, and we have to append the share image and position it absolutely.

(function( $ ) {

    $.fn.pinterest = function(options) {

        
        var settings = $.extend( {

            'button' :
 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'

        }, options);

                    
        return this.each(function() {  
  
            img = $(this);

            img.wrap('<span class="pin-it" style="position: relative;" />');

            img.parent('span.pin-it').append('<img src="' + settings.button + '" alt="test pinterest" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />'');

        });
    };
})( jQuery );

$(document).on('ready', function(){
    $('img#share').pinterest({ button: 'pinterest-alt.png'});
});

and:

(function( $ ) {

    $.fn.pinterest = function(options) {

        
        var settings = $.extend( {

            'button' : 
'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'

        }, options);

        
        function on_click () { 
        
        };

        
        function on_hover_in() {

            $(this).siblings('img:first').show(500);

        };    

        
        return this.each(function() {   
 
            img = $(this);

            img.wrap('<span class="pin-it" style="position: relative;" />');

            img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');

            img.hover(on_hover_in);

            img.siblings('img:first').on('click', on_click);
        
});


    };

})( jQuery );


$(document).on('ready', function(){

    $('img#share').pinterest({ button:
 'pinterest-small.png'});

});

Now, the on_click event looks like the following

function on_click () {

    img = $(this).siblings('img:first');

    description = img.attr('title');

    url = document.location;

    media = img.attr('src');


    var pin_url = 
'http://pinterest.com/pin/create/button/?url=' + 
encodeURIComponent( url ) +

        '&media=' + encodeURIComponent( media ) +

        '&description=' + encodeURIComponent( description );
    

    window.open(pin_url, 'Pin - ' + description,
 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');

    $(this).hide(1000);

};

It’s grabbing the image we want to share, and then reading it’s title and src attributes. It’s also getting the current pages url using document.location. The Pinterest share url has 3 parameters that we are interested in:

• url – the page we are sharing from
• media – the image we want to share
• description – the text we want to share with the image

We have to use also the encodeURIComponent function to make sure the values are properly escaped.

One final thing we need to allow for is if the image src url is relative or not.

function getUrl(src){

    var url = document.location.toString();

    var http = /^https?:\/\//i;

    if (!http.test(src)) {

        if(src[0] == '/'){

            url = url.substring(0, url.lastIndexOf('/')) + src;

        } else {

            url = url.substring(0, url.lastIndexOf('/')) + '/' + src;

        }

    } else {

        url = src;

    }

    
    return url;

};

Download source: Creating a simple jQuery plugin for Pinterest

Thanks to: developerdrive.com

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.