Tutorials

Create jQuery Pinterest Pin It Plugin

Written by Kevin Liew on 23 Jul 2012
74,036 Views • Shares
31 comments

Introduction

Pinterest has been growing to become one of the famous social media website. It allows us organize and share all the beautiful things we find on the web. I found it very resourceful when looking for interior design, decoration and other inspirations.

As you might have noticed, nowadays, pinterest Pin count button can be found in most design websites, they also released a bookmarklet that scan a webpage for images and allow you to pin it easily. However, sometimes you might find it's not that convenience when the page contain more than 30 images. It takes a while to find the image. As a result, I created this plugin that allow you to pin the image straight away.

This plugin looks for all images, and wrap it inside a container that come with a pinterest Pin it button. So, your visitor just have to hover above the image they want, and pin it straight away. It's a simple plugin.

HTML

There isn't any HTML code, basically you just need to include the CSS and Javascript files:

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

	$('img').pinit();

});
</script>

CSS

You can customize the plugin with CSS. I have made 2 semi transparent images (white and black), so free feel to swap them. The CSS is quite simple, most of the styles are for the buttons.

.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('../images/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('../images/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

There isn't any complex stuff in javascript section. Basically, we are making a plugin that wrap each of the images with a .pinit span and add some HTML that will do the overlay effect with PinIt button. PinIt button is linking to pinterest's Pin URL:

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 class="pinit"/>',
				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 class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">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);

Conclusion

That's about it. Simple plugin made with jQuery in just half an hour. I have tested it across different browsers (Chrome, Firefox, IE 7+) and they work fine. Have fun Pinning.

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

31 comments
Muskie 4 years ago
I keep playing with your JavaScript. I got it to work here:

http://www.muschamp.ca/Muskie/AngkorMusk/AngkorMusk.html

But I keep modifying it. It definitely will take work to use it with Isotope, but also it seems like it doesn't always find the alt and/or title attribute on this test:

http://www.muschamp.ca/Muskie/AngkorMusk/AngkorMusk.html

It appears if you have something like #target in the URL it messes with the JavaScript, also given the choice between the alt and title it prefers title which is I guess fine.

FYI
Reply
Jaime Vallejo 3 years ago
Hi. Excellent plugin and tutorial. Only one comment. I have better result with event load instead event ready. I suppose that is because sometimes jquery can't know image height without having loaded it. (Excuse my bad english :P)

Thanks!
Reply
DeVe 3 years ago
Awesome! Thanks a lot!
Reply
Laz Davila 3 years ago
Hi,
Great script and css - thanks.
Just in case anyone is having problems with responsive layouts, this simple fix will make the images resize correctly:

.pinit {
position:relative;
display:inline-block;
max-width:100%;
}
Reply
Bijal 2 years ago
Hi Kevin,

I want to do some functionality based on pin it button response. Can you please guide me how can i achieve this function.
Reply
Etienne 2 years ago
hi kevin,

I have to apply your pluggin only on certain images of the page , I tried to change the script , and the html , but with no success , i have two different <div> that contains the pictures i want to pin :

- <div class="exibition">
<img .../>
</div>

-<div class="Pro">
<img.../>
</div>

how can I apply the pin it button to these img only ?


thank you anyway for this pluggin that work perfectly !
Reply
jo-anne 2 years ago
Hi Kevin,

I downloaded your plugin on my blog but the spaces between the photos were altered/deleted. Is there a way to fix this problem?
Reply
carla 2 years ago
Hi! After looking all over the web I found your site. Thank you for sharing your knowledge!
My question is: is it possible to apply it ver Squarespace, where de jquery is already pre-configured? I only want to change the button for some custom. Tks!
Reply
Richard 1 year ago
Thanks for article, but it doesn't seem to work on my wordpress 4.2.4 blog.

In footer.php I didn't place your googleapis jquery link as my site already calls in header.php and some plugins call jquery lib as well, something I have to figure out how to get rid of as it's adding extra https calls to inb4sales.com.

Thanks anyway.
Reply
Kris 1 year ago
Is this plugin meant to work on mobile devices if you have the Pinterest app installed? I found on my phone/ipad if I do NOT have the Pinterest app installed, the plugin opens Pinterest in a browser as expected. But if I have the app installed, I'm not redirected to the app.
Reply
Kris 1 year ago
Does this integrate with the Pinterest app on iOS? Namely, can I click on the pinit button and be taking to the Pinterest app to a place where I would pin the image? It seems when I do it, it just takes me to the Pinterest app but I can't pin the image to my board.
Reply