Create jQuery Pinterest Pin It Plugin

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.

• TAGS:
• CSS
• HTML
• Javascript
• jQuery
• Pinterest
• Tutorial