How to Create Your Own Pin It Hover Button

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?