Create jQuery Pinterest Pin It Plugin

Written by Kevin Liew on 23 Jul 2012
98,105 Views • Tutorials

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" data-src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" data-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
Bart Groenhuizen 8 years ago
Nice plugin! But the javascript above is not the same as in the download.
And in safari the button does not appear the center. You need to give .pinit-overlay the height of wrapped element to fix this:

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>');
Reply
Kevin Liew Admin 8 years ago
Hi Bart, Thanks for your comment. I forgot the 100% height doesn't work correctly across different browsers! Thanks for your fix. I have updated the article, demo and download. :)
Reply
Webman 8 years ago
Oops....Download busy? Link to ZIP file: HTTP 503 error return. I'm waiting. Thanks.
Reply
Kevin Liew Admin 8 years ago
It's back online.
Reply
Airman 8 years ago
This is awesome! Anyway to make some options where it could be in the top left corner, the top right corner, the bottom left corner, the top right corner? I'd pay for something like that!
Reply
Kevin Liew Admin 8 years ago
You need to know CSS.
CSS line 20-21, that's where you control the position of the button.
Reply
Airman 8 years ago
For those that are interested, here are the different positions you can achieve with this button:

Center:
.pinit .pinit-overlay a {
top: 50%;
left: 50%;

}

Top Left:
.pinit .pinit-overlay a {
top: 10%;
left: 10%;

}

Middle Left:
.pinit .pinit-overlay a {
top: 50%;
left: 10%;

}

Bottom Left:
.pinit .pinit-overlay a {
top: 90%;
left: 10%;
}

Bottom Center:
.pinit .pinit-overlay a {
top: 90%;
left: 50%;
}

Top Center:
.pinit .pinit-overlay a {
top: 10%;
left: 50%;
}

Bottom Right:
.pinit .pinit-overlay a {
top: 90%;
left: 90%;
}

Middle Right:
.pinit .pinit-overlay a {
top: 50%;
left: 90%;
}

Top Right:
.pinit .pinit-overlay a {
top: 10%;
left: 90%;
}
Reply
airman 8 years ago
Hello,
Any way to make it so it shows up, without having to hover? It'd be awesome if you could keep it showing without having to hover over it to show the button. Basically, the button would be on the image no matter what.
Reply
Elihu 8 years ago
Hi there, awesome post. Only trouble I'm having is customizing the 'Description' field that comes up when you click the button. On Blogger I'm getting 'undefined' in the Description field. (Yes, I know WP would be better). Just trying to figure out where to tweak in the js file... Thanks!
Reply
Kevin Liew Admin 8 years ago
The image need to have an ALT or TITLE attribute filled in. That's how the Pinterest plugin retrieves its description.
Reply
Joao Victor 8 years ago
Hello te pin button is showing in the thumbs i dont want that.. how can i solve? create a ID?
Reply
Cassie 8 years ago
Hi Kevin. I tried figuring this out but maybe you could help. I but the Javascript code into the HTML right before </body> and the CSS into it's spot. It kept telling me though, that I needed to add a ";" to close a URL... I don't know what that means? Thanks!
Reply
Kevin Liew Admin 8 years ago
Is it a javascript error? Have you setup your site online, it's easier for me to have a look.
Reply
Rachael 7 years ago
I keep getting the same error as Cassie. It says The reference to entity "url" must end with the ';' delimiter. I think it's in your Javascript box Line 24. After that, I have no clue how to fix it.
Reply
Holger 7 years ago
Hi Kevin,

this looks great. I would love to use this with my Wordpress Blog and Fancy Box for Images. I know there are wp plugins with simmilar approach, but non i have testet are working correct with fancybox.

I only want to show the pin it button on the fancybox lightbox in image center and only fade out the image if I hover the pin it button (not the whole image area because sides are used for navigation with fancybox).

The Images have the class "fancybox-image". Can you guide me how to apply your pin it plugin only to images with this class.

Best Regards
Reply
Purusothaman Ramanujam 7 years ago
Hi,

Good plugin. It worked instantly. Thanks alot.

I came across an issue.

Can you please let me know why this does not work on the pages where the image is inserted using javascript at the run time?

Example: http://demo.oxwall.org/photo/view/43

Is it possible to customize the plugin to receive options to apply for images greater than a particular size and give default values for empty descriptions.
Reply
Kevin Admin 7 years ago
Yes, it won't work because the DOM is not ready yet. Also, this script will not work inside a slider.
Reply
Muskie 7 years ago
Going to give this a try, thanks for posting it.
Reply
Muskie 7 years ago
I'm trying to modify your script and one of the obvious modifications is to only pin or allow people to pin content not navigational images. So I changed one line to:

$("#contents > img").pinit();


After reading documentation but it doesn't seem to work. Basically I only want the JavaScript to work on content not say the menu images at the top.

Cheers,
Reply
Chris McGinnis 5 years ago
If anyone is still wondering how to do this here's an example:

<script type="text/javascript">
$(function () {

$('.pin-it').pinit();

});
</script>

<img class="pin-it" src="" />

Just give any img a class with "pin-it" and it will just give the icon for that specific image.


Reply