How to Create a Jquery Plugin For Pinterest

How to create a jQuery plugin for Pinterest
by Janeth Kent Date: 28-05-2013 pinterest plugin tutorial web development jQuery


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

 
by Janeth Kent Date: 28-05-2013 pinterest plugin tutorial web development jQuery hits : 3167  
 
Janeth Kent

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.

 
 
 

Related Posts

A Java approach: The Cycles - Introduction

Hello everyone and welcome back! Until now, we have been talking about variables and selection structures, going to consider some of the fundamental aspects of these two concepts. Theoretically, to…

A Java Approach: Selection Structures - Use Cases

Hello everyone and welcome back! Up to now we have been concerned to make as complete an overview as possible of the fundamental concepts we need to approach the use…

A Java approach: boolean variables

The previous time, we talked extensively about Boolean variables, trying to outline the main operations that can be carried out at a practical level.  Of all the cases examined, we have…

A Java approach: condtional structures

Hello everyone and welcome back! The previous times we have introduced the concept of variable, trying to define some basic concepts about it.  However, some situations suggest that the concept of…

Hashmap: hashing, collisions and first functions

Today we are going to study some concepts closely related to hashmaps. The concepts we are going to see are hashing and collisions. Hashing The idea of hashing with chaining is to…

Hashmap: Overflow Lists

In this short series of articles we will go to see how it is possible to create the Hashmap data structure in C. In the implementation we're going to use the…

A Java approach: variables - use case

Hello all friends and welcome back! After the introduction made on the variables, we try to analyse some critical issues that may arise in quite common situations. Let's start by analysing…

A Java approach: variables

Hello everyone and welcome back! Today we will begin a journey that will lead us to study, and possibly review, what are the basics of programming. We will start by talking…

HTTP Cookies: how they work and how to use them

Today we are going to write about the way to store data in a browser, why websites use cookies and how they work in detail. Continue reading to find out how…

JavaScript: Promises explained with simple real life examples

Handling asynchronous data flows is complex, who hasn't faced codes like this one?: checkWeather('palma de mallorca', (error, weather) => { if (error) throw error; if (weather === 'well') { return checkFlights('palma…

Facebook: how to remove hidden data and personal information

Facebook is a great social network that allows us to be always updated on all the news of our friends or family or even the most relevant news of the…

Can Easier Returns Mean Better Business?

Any eCommerce business owner knows that returns are a part of the packaged deal. At the end of the day, today’s consumer holds all of the power. They are informed,…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration