Add Pin It Button When Mousing Over An Image

  • follow us in feedly
Published April 2, 2013 by Brad Knutson
Pin It On Hover

Recently, I’ve come across a handful of sites that give the option to pin an image to Pinterest when you hover over an image. This is a pretty cool effect, and very user friendly.

This got me thinking, how can we implement this on a large scale automatically?

I looked online for a function that will accomplish this. I found several, but each of them had their own issues. The most glaring was the functions didn’t function properly in WordPress, because of jQuery conflicts.

So I set out to write my own function, one that will automatically add the option to pin the image when you hover over it, and automatically grab the image path and page URL. Below I’ve done just that. It should function in any setup – WordPress included.

HTML

Let’s start by setting up the HTML for the images. Because most websites have multiple images, I assume that webmasters don’t want every image on the page to show the pin button when hovered over, so I made a slight modification to the other solutions you might find out there. For each image that we want the pin button effect on, I wrapped it in a div with a predetermined class.


<div class="pinterest-image">
<img src="http://example.com/path/to/image.jpg" />
</div>

CSS

Now lets add some CSS. The classes are important, as the jQuery function below will insert them later.

.pinterest-image {
	position: relative;
}
.hover-pinterest {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 999;
	background-image: url('images/pinterest.png'); // path to pinterest logo
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: none;
}
.pin-it-link {
	height: 100%;
	width: 100%;
	display: block;
}

jQuery

Now for the meat of the project. Add the following script above the >/body< tag at the bottom of your page. If you’re using a CMS like WordPress, add the script to a template.

jQuery(document).ready(function() {
	jQuery('.pinterest-image img').after('<div class="hover-pinterest"></div>');
	jQuery('.hover-pinterest').append('<a class="pin-it-link" target="_blank"></a>');
	jQuery('.pinterest-image').hover(
		function() {
			var imgurl = jQuery('img', this).attr('src');
			var encodedurl = encodeURIComponent(imgurl);
			var pathname = jQuery(location).attr('href');
			url = encodeURIComponent(pathname);
			var desc = encodeURIComponent('enter description here');
			var pinhref = 'http://pinterest.com/pin/create/button/?url=';
			pinhref += url;
			pinhref += '&media=';
			pinhref += encodedurl;
			pinhref += '&description=';
			pinhref += desc;
			jQuery('.hover-pinterest a',this).attr('href',pinhref);
			var pinwidth = jQuery(this).width();
			var pinheight = jQuery(this).height();
			jQuery('.hover-pinterest',this).css('display','block');
			jQuery('.hover-pinterest',this).css('width',pinwidth);
			jQuery('.hover-pinterest',this).css('height',pinheight);
		},function() {
			jQuery('.hover-pinterest',this).css('display','none');
		});
});

You could choose to leave the description blank and leave it up to the user to type something in, but I prefer to predetermine what the description is. The user will always have the ability to modify it later anyways.

If you add the function to a page template, and the CSS to your main stylesheet, you only have to wrap the appropriate images in the extra div, that’s it!

Let me know what you think? Do you have an easier way? I admit that I wrote this jQuery function quickly and it certainly could be minified and optimized. Leave a comment below if you have a more efficient method, I’d love to hear it!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

30 thoughts on “Add Pin It Button When Mousing Over An Image

    1. Brad Knutson Post author

      I don’t see why it wouldn’t. Drupal 6 should have jQuery 1.2.6 out of the box, and if i’m not mistaken all the function calls should be compatible with that version. Are you having trouble getting it to work on Drupal 6?

  1. HyperGlide

    Hi Brad,

    Wonderful write up.

    Is there any way to package this into a nice and easy to use drupal module?

    I am curious if you hav used it with the meda module. Or how best to add add the classes in part 1. So that users creating content don’t have to worry about that.

    Thanks!

    Reply
    1. Brad Knutson Post author

      When I first came up with this example, I considered building a WordPress plugin to automatically do all this for any images inserted into posts, but I just haven’t gotten around to it yet. To be honest, I’m not familiar enough with Drupal plugin development to be able to build it at this point – but I can promise you it is something I will look into in the near future! Thanks for your comment – I’ll let you know if anything ever comes of it!

  2. Kelly

    I’m not great with html and css but I can usually figure it out eventually but I am having such a hard time finding something that works for a pin-it button.. I have a blog on weebly and I can edit the css. Not sure where in the CSS this should go. I added the jquery to the landing.html layout? Not sure what this is, but the pin it hover is only showing up on my first picture. In weebly when I click edit html/css I have main page CSS and then page layout html. Any ideas how I can get this to work on my blog?? Do i need to add a layout for the html/ jquery codes?

    Thanks so much!

    Reply
    1. Brad Knutson Post author

      Hello Kelly,

      Did you get it to work for just the first image? If so, your jQuery selector might be an ID instead of a class. Mind linking me to the page you’re working on?

      Thanks,
      Brad

    2. Kelly

      I don’t mind linking you to the page! That would be great but not sure I know how to. Are you familiar with weebly? I can add editors with an email address, if that’s what you meant?

    3. Brad Knutson Post author

      Hey Kelly,

      I just meant post a link to the webpage you are working on this in the comments, so I can go see it. I can debug it in the browser.

    4. Brad Knutson Post author

      Hey Kelly,

      I’m not extremely familiar with Weebly (I haven’t been on there in forever) but from a little research I think I have a resource that will help you.

      First, you’ll need to have the images you want to have the Pin icon show up on wrapped in a >div< tag with a class of your choosing, like below:

      Second, you’ll need to add the custom CSS to your stylesheets. It sounds like you already know how to do this.

      Third, you’ll need to add the jQuery script to your template files. I think this YouTube video will help you add Javascript to Weebly: http://www.youtube.com/watch?v=4Nj7bqNK6Qs

      Hope this helps!

  3. Molly

    Hi Brad –

    This was very helpful, thanks! I made a few modifications, since I was working with an existing WordPress site that already had dozens of posts and needed all of the images in the content area to be automatically included, and it worked great!

    The question I had – I want the Pinterest window to open in a popup instead of a new tab. I have some standard code that I’ve used to do this on other sites, but it doesn’t seem to be working on conjunction with your code. Do you know of a way to do this?

    Reply
    1. Brad Knutson Post author

      Hey Molly,

      You could modify the jQuery script to open a popup window like so:

  4. Cindy

    Hi Brad,
    I searched all over for a Pinterest hover solution and thought your code looked clean and made sense to me, so I tried it out on a test. My test doesn’t have any extra code in it — just an image with a quick Pinterest “Pin it” logo. I can’t quite figure out why I can’t get the logo to center in the div. (Ultimately, I want to place it in the bottom right of the image, but I just can’t get it to move.) The background-position is set to 50% 50%, but the page ignores that code. I’ve tried to change the percentages and even tried pixels, but it makes no difference.

    Note: the red border is just to see where the div is.

    Lastly, I’d really like the “Pin It” to fade in instead of jump on the screen, with maybe a fade of opacity on the image. Do you know of an easy way I could add this?

    I would appreciate any help you could give me on this. Thanks so much!
    Cindy

    Reply
    1. Brad Knutson Post author

      Hi Cindy,

      I’ve looked back at this example many times, and I could definitely improve upon it.

      For example, you could have a class set up with CSS for the hover state (position a background image, even the opacity you were referring to), then use jQuery to add that class to the div on hover. This would allow you access to more easily modify the styles, and even add CSS transitions (which would make your smooth fade possible).

      Give it a try and let me know what you come up with, or if you’d like an example!

  5. Ajay

    Hi Brad,
    I have bit more complicated requirement.. i have some magazines displayed in a fluid grid. On mouse over the overlay displays some 3 to 7 options (according to the region) . Once an option is selected, the mag is selected (a check box out side is ticked, or displayed) . By default the user have to select a subscription option, then the check box( [x] subscribe) comes up , user can un-check the check box if he doesn’t want the mag. So each mag get selected only if the user selects an option from the overlay div. But can be removed by clicking the check box which will be displayed below each image. Mags are displayed according to the region, category etc.. there are some 50-60 magazines.
    any idea?

    Regards, AJ

    Reply
    1. Brad Knutson Post author

      Sounds like you need to hire a developer :)

      If you’re looking for free help, I would suggest posting your question on Stack Overflow or a similar site.

      Good luck!

  6. Stephanie

    Hi there brad,
    I am new to all this code stuff but I would like to have a roll over button on the images in my gallery. My site is on Weebly and my gallery is one of those slide show templates, not sure if that makes a difference. I’m a little nervous to lay with code because I don’t really know what I’m doing. do I just copy past whats on this screen ?
    my website is
    http://artsiecakes.com
    and Id like to be be able to pin the gallery gallery images, would you please take a look and tell me hoe difficult this would be please?

    Reply
    1. Brad Knutson Post author

      Hey Stephanie,

      I’m not familiar with how to add scripts to Weebly unfortunately, but I’m sure it could be done. To add the hover state to a gallery image, you’ll have to inspect the HTML and find the unique selector for the images in the gallery, and modify the CSS and script accordingly. I’m confident it can be done, it just might take a little bit of tinkering to get working properly.

      Good luck!

  7. Heather

    Hello – Love this, seems very simple and I am already familiar with editing css and whatnot. I am not all that familiar with jquery though.
    my site is on wp but have access to the server and can manually upload whatever needed.
    I’ve changed a bit of what you wrote and have a few quick questions:
    http://www.mercurymosaics.com/gallery/bathrooms/
    On this page I want only the images in the pop up to have the above pin it button. So I did this:

    .fancybox-image {
    position: relative;
    }
    .hover-pinterest {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    background-image: url('images/pinterest.png'); // path to pinterest logo
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: none;
    }
    .pin-it-link {
    height: 100%;
    width: 100%;
    display: block;
    }

    As all the pop up images have the class of fancybox-image, the above should edit it yes?

    Then as far as the jquery goes

    jQuery(document).ready(function() {
    jQuery('.fancybox-image img').after('');
    jQuery('.hover-pinterest').append('');
    jQuery('.pinterest-image').hover(
    function() {
    var imgurl = jQuery('img', this).attr('src');
    var encodedurl = encodeURIComponent(imgurl);
    var pathname = jQuery(location).attr('href');
    url = encodeURIComponent(pathname);
    var desc = encodeURIComponent('enter description here');
    var pinhref = 'http://pinterest.com/pin/create/button/?url=';
    pinhref += url;
    pinhref += '&media=';
    pinhref += encodedurl;
    pinhref += '&description=';
    pinhref += desc;
    jQuery('.hover-pinterest a',this).attr('href',pinhref);
    var pinwidth = jQuery(this).width();
    var pinheight = jQuery(this).height();
    jQuery('.hover-pinterest',this).css('display','block');
    jQuery('.hover-pinterest',this).css('width',pinwidth);
    jQuery('.hover-pinterest',this).css('height',pinheight);
    },function() {
    jQuery('.hover-pinterest',this).css('display','none');
    });
    });

    Should be fine, yes?
    Additionally – so I can create my own script and save it in my js file under my theme, but not sure what i need to add to my function.php file. Can you assist with this?

    Reply
    1. Brad Knutson Post author

      Hey Heather,

      That should be good, assuming you have moved the Pinterest icon to the correct directory so your relative reference can find it.

      As far as including the script, you can do one of two things. Modify the header.php file to include your new script, or you can enqueue it in your functions.php file.

  8. Susie Aguirre

    Do you know how to add a hover fade (making the opacity white) on the image?
    I’ve been looking high and low, but can’t seem to find someone who can do it when the mouse is over the image.

    Thank you so much!

    Reply
    1. Brad Knutson Post author

      Sure – you could do this with CSS transitions, or you could use the jQuery functions fadeIn() and fadeOut(). This would require a little bit of reworking of this example.

    1. Brad Knutson Post author

      Hey Sahil,

      Can you point me to where your script is? Looks like your HTML is good.

    2. Brad Knutson Post author

      Hey Sahil,

      It doesn’t look like the script is firing properly, which could mean there is a conflict with the version of jQuery or another script you have. I would start troubleshooting by inserting some alerts to see if you can get it to fire on hover. Reverse engineer it until it works for you. Good luck!

    3. Sahil Sinha

      Yes, I too guessed the same. Anyways thanks for this, let’s see if I can fix it up or not…

  9. Sravani

    Hi Brad..
    I am using your code for my blog.Everything is working properly But the problem is when I put multiple images in the div, the Pinit image is showing at same place(On first image), even I move my mouse on 2nd or third or etc., images.
    Can U please help me.

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">