How to Create Your Own Pin It Hover Button

Code your own Pin It hover button that ties into Google Analytics

I know what you’re wondering… why the hell should you create your own Pin It hover button when Pinterest provides one for you? Most people probably won’t want to. It doesn’t make any sense. I decided to do it for a few reasons:

  1. I didn’t want to install yet another WordPress plugin. I wanted to code something myself.
  2. When I got started adding the Pin It code manually to my site (without a plugin) I got annoyed that I had to use some hacky code to get it to work with WordPress (modifying the <script> tag to add extra stuff to it).
  3. The Pin It code had no easy way to ONLY apply it to certain images. You can exclude certain images, but can’t make it apply to just specific images.
  4. When not minified (which it is, but I just want to put it into perspective) the core Pin It hover code is 1,075 lines long.

Most people won’t care about any of those points, which is perfectly fine. But I didn’t want every single image on my blog to have the hover button. And I didn’t want to have to manually go through my site to exclude the ones that shouldn’t have the button.

Then I looked at the massive size of their JavaScript and didn’t want to add more bloat to my site. I knew I could do it in less lines of code. And that means mine will have fewer integrations and configuration options, but it will do exactly what I want and need.

Just a few lines of JavaScript

Here’s my complete block of JavaScript:

// Pin It hover button
$('article.post img').each(function () {
	$(this).hover(function () {

		if ($('#ng-pinit-button').length == 0) {

			// Gather variables
			var currentURL = $(location).attr('href');
			var imageHeight = $(this).height();
			var pos = $(this).position();
			var left = (screen.width / 2) - (550 / 2);
			var top = (screen.height / 2) - (400 / 2);

			// The image is too small and we don't care -- bail.
			if (imageHeight < 200) {
				return;
			}

			$(this).after('<a href="http://pinterest.com/pin/create/button/?url=' + currentURL + '&media=' + $(this).attr('src') + '&description=' + $(this).attr('alt') + '" id="ng-pinit-button" target="_blank" style="top:' + pos.top + 'px; left:' + pos.left + 'px;" onmouseout="jQuery(this).remove()" onclick="if (typeof ga != \'undefined\') {ga(\'send\', \'event\', \'Pinterest\', \'pin\', \'Pin Image\'); } window.open( jQuery(this).attr(\'href\'), \'_blank\', \'height=400, width=550, status=yes, toolbar=no, menubar=no, location=no, top=' + top + ', left=' + left + '\' ); return false;" rel="noopener noreferrer"></a>');

		}

	}, function (e) {

		if($(e.toElement).attr('id') != 'ng-pinit-button') {
			$('#ng-pinit-button').remove();
		}

	});
});

Mine is 30 lines, compared to their 1,075!

It actually took me an annoyingly long time to get right because JavaScript is not my forte, but it works!

Here are a few key notes about the JavaScript:

  • It only targets images inside the article.post tag. For me, that’s the wrapper around my blog posts. You’ll want to update yours accordingly by editing this line: $('article.post img')
  • If an image is less than 200 pixels high, the pin it button does not get added. You can increase or decrease that by changing this line: if (imageHeight < 200)
  • I have it set to insert a Google Analytics event when clicked. If you don't want this behaviour, you'll have to remove this segment: if (typeof ga != \'undefined\') {ga(\'send\', \'event\', \'Pinterest\', \'pin\', \'Pin Image\'); }

Let's not forget some CSS

There's also a small amount of CSS that needs to be added in order to actually style the button.

#ng-pinit-button {
    background: url('assets/images/pinit.png') no-repeat 10px 10px;
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 500;
}

You can modify this how you want, but here are the important points:

  • Set the background image to be the icon you want to use.
  • I personally offset the background image by 10 pixels so that it didn't appear EXACTLY on the upper edge of the image, but was "indented" a little.
  • Set the width and height to be a little bit larger than your background image. This way the user doesn't have to click on the image EXACTLY but just has to click on or a little around it.

There is one downside

Since I'm not using the official code, I will not see any analytics for the "Pin It button" inside Pinterest analytics. However, this is a non-issue for me since I've hooked up my code to Google Analytics, so I can get all the analytics I want there.

Am I completely crazy for not just using the code from Pinterest?

Photo of Ashley
I'm a 30 year old California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

13 comments

  1. This is awesome, I work with Blogger and the only scrip available is really old and wasn’t updated in 2 years. Sadly, I tried your version and it didn’t work, any idea why?

  2. Hi Ashley, I added this button succesfully but it is not working on Firefox, any idea about this?

  3. Hi Ashley, thanks for this great tutorial, it’s not working on Firefox though, do you have plans to fix or update the code? Thanks!

  4. Ashley! I’ve spent months looking for a solution which didn’t involve adding a wrapper element around the original image. You are my hero right now!

    It’s not working on FF currently, but I’ll post here if I am able to get that working (if you don’t first).

    Thank you for sharing 🙂

Recent Posts

    Random Posts