- Pinterest Pin it Button ℘ on Image Hover with and without External Javascript Code

Pinterest Buttons without Loading External Javascript

If you do a search on the internet for javascript code for Pinterest pin it buttons almost all of the websites show you a simple one line of Javascript code that loads Javascript source code from the Pinterest website so that when your sites visitor moves their mouse over on of your websites images, the Pinterest Pin It button appears. This is a great and easy way to allow and encourage your sites visitors to share your content to Pinterest.

Pinterest Pinit Button On Image Hover Example.
Image of Pinterest Pinit Button On Image Hover Example.

Pinterest Pinit Button On Image Hover Example.

While simple is great I prefer right. Personally, I try to steer clear of ANY dependencies. What I mean by that is, let's say you add the Pinterest sharing code to your 750 page website and then several months later, Pinterest makes changes to their Javascript code so the Pin It buttons don't work right on your website?

I remember many years ago, I had a news related website and I pasted some code in all the pages that allowed for the display of a scrolling weather ticker. Months later I went back to check on the site and every single page of my site redirected to a spam site. In other words, the people who offered the code waited until they had lots of websites with their code embedded and then stole all those visitors.

Now I am sure Pinterest will never do something like this but the more independant your website is of any external references, the better. Now-a-days, most people host their websites on the Wordpress framework which is replete with external dependencies, but even so, the less you have the better.

On this page I am going to show you several ways of displaying Pinterest Pin It buttons when your site visitor mouses over an image and your pick the method that is right for you.

How to Add Pinterest Pin-it Button Over Your Images in WordPress

Install the Pinterest share plug in to your Wordpress admin. There are several different plug-ins for the Pinterest share button, that is just one of the more popular ones.
Activate the Plug-in.
Configure the Plug-in to your needs by going to Settings >> Pinterest Pin It Button. You can configure which types of pages/posts to display the Pin It share button on image hover.

From then on, any images your visitors move their mouse over will show the Pinterest Pin-It button. If you want to disable the pin button for any images, simply add the class="nopin" to that image.

Pinterest Pinit Wordpress Plugin Wp Admin.
Image of Pinterest Pinit Wordpress Plugin Wp Admin.

Pinterest Pinit Wordpress Plugin Wp Admin.

Pinterest Pin It Javascript Code for Blogger and non Wordpress Sites

Go to the Pinterest for developers widget builder page.
Select the type of Pin-It button you want (One Image, Any Image or on Image Hover). You can also use a custom image for your Pin-It button.
Select if you want a round or square Pin-It button and regular size or large.
You can specify a language but for most cases the User's Default Language should be fine.

The small line or two of Javascript code you will need is created and displayed for you as you make your button preference selections, along with simple, easy to implement instructions.

Pinterest For Developers Widget Builder.
Image of Pinterest For Developers Widget Builder.

Pinterest For Developers Widget Builder.

Raw Javascript Code, No Jquery, No External Scripts, Pinterest Pin It Button

If you want totally dependency free, no external scripts or dependencies, Javascript code for having a Pin It buttom appear over images on mouse hover and you don't mind getting your hands a little bit code dirty, the Javascript source code below will do the trick. The code is 100% commented so you know what each line of code does.

The only thing you need to configure/alter is the items indicated at the top and include:

PINTEREST_BUTTON_URL - the url of the image you will use for the Pinterest Pin-It button.
PINTEREST_BUTTON_POSITION - 0 displays the button in the upper left corner of the image, 1 upper right, 2 left bottom, 3 right bottom.
MIN_IMG_WIDTH - any image whose pixel width is less than this number will not display the Pin-It button on mouse hover, otherwise the Pin-It button will even display over tiny icons, etc.
MIN_IMG_HEIGHT - any image whose pixel width is less than this number will not display the Pin-It button on mouse hover, otherwise the Pin-It button will even display over tiny icons, etc.

If you want to exclude an image from displaying the Pin-It button on mouse hover, just add the class "nopin" to the image.

⇅
sel
javascript
 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
 
// EDIT THESE LINES TO MEET YOUR NEEDS ===============================
const PINTEREST_BUTTON_URL = "https://www.yourwebsite.com/images/path-to-your-pinterest-image.png";
const PINTEREST_BUTTON_POSITION = 0;
const MIN_IMG_WIDTH = 150;
const MIN_IMG_HEIGHT = 150;
// DO NOT EDIT PASTE HERE =============================================
 
var varMouse_X=0;var varMouse_Y=0;var varElemMouseIsOver=null;var varElemMouseIsOverTagName="";var varbMouseIsOverImg = false;
 
var varLinkPinterest = document.createElement("A");
varLinkPinterest.setAttribute("rel", "nofollow");
varLinkPinterest.setAttribute("target", "_blank");
 
var varImgPinterest = document.createElement("IMG");
varImgPinterest.setAttribute("src", PINTEREST_BUTTON_URL);
varImgPinterest.setAttribute("alt", "Pinterest sharing button.");
varImgPinterest.style.position = "absolute";
varImgPinterest.style.display = "none";
 
varLinkPinterest.appendChild(varImgPinterest);
document.body.appendChild(varLinkPinterest);
 
document.addEventListener("mousemove", function(e){
  varMouse_X = e.clientX;
  varMouse_Y = e.clientY;
 
  varElemMouseIsOver = document.elementFromPoint(varMouse_X, varMouse_Y);
  varElemMouseIsOverTagName = varElemMouseIsOver.tagName.toLowerCase();
 
  if (varElemMouseIsOverTagName == "img"){
 
     if ((varElemMouseIsOver.width < MIN_IMG_WIDTH)||(varElemMouseIsOver.height < MIN_IMG_HEIGHT)){return;} // if the image is too small don't display the pinterest button
     if (varElemMouseIsOver.className.indexOf("nopin") > -1){return;}
 
     if (varbMouseIsOverImg == false){
       varbMouseIsOverImg = true;
 
       var varPinterestUrl = "//pinterest.com/pin/create/button/?url="+encodeURIComponent(window.location.href)+"&media="+encodeURIComponent(varElemMouseIsOver.src)+"&description="+encodeURIComponent(varElemMouseIsOver.alt);
       varLinkPinterest.setAttribute("href", varPinterestUrl);
       varImgPinterest.setAttribute("title", "Share "+varElemMouseIsOver.alt+" on pinterest.com.");
 
       var varImageRect = varElemMouseIsOver.getBoundingClientRect()
 
       if (PINTEREST_BUTTON_POSITION == 0){
         varImgPinterest.style.left = (varImageRect.left+pageXOffset)+"px";
         varImgPinterest.style.top = (varImageRect.top+pageYOffset)+"px";
       }else if (PINTEREST_BUTTON_POSITION == 1){
         varImgPinterest.style.left = (varImageRect.right+pageXOffset-varImgPinterest.width)+"px";
         varImgPinterest.style.top = (varImageRect.top+pageYOffset)+"px";
       }else if (PINTEREST_BUTTON_POSITION == 2){
         varImgPinterest.style.left = (varImageRect.left+pageXOffset)+"px";
         varImgPinterest.style.top = (varImageRect.bottom+pageYOffset-varImgPinterest.height)+"px";
       }else if (PINTEREST_BUTTON_POSITION == 3){
         varImgPinterest.style.left = (varImageRect.right+pageXOffset-varImgPinterest.width)+"px";
         varImgPinterest.style.top = (varImageRect.bottom+pageYOffset-varImgPinterest.height)+"px";
       }else{
         varImgPinterest.style.left = varElemMouseIsOver.offsetLeft+"px";
         varImgPinterest.style.top = varElemMouseIsOver.offsetTop+"px";
       }
 
       varImgPinterest.style.display = "block";
       varImgPinterest.style.zIndex = "9999999999";
     }
 
  }else{
 
    if (varbMouseIsOverImg == true){
       varbMouseIsOverImg = false;
       varImgPinterest.style.display = "none";
    }
  }
});

Don't forget to put the surrounding <script> and </script> tags.

NAME:
EMAIL:
COMMENT:
	HTML OK. Allowable HTML tags include: <p></p>, <i></i>, <b></b>, <em></em>, <strong></strong>, <ul><li></li></ul>, <ol><li></li></ol>

➁ Pinterest Pin Button ℘ Image Mouseover With Or Without Javascript

2 Pinterest Pin Button ℘ On Image Mouseenter With And Without External JS

Pinterest Buttons without Loading External Javascript

How to Add Pinterest Pin-it Button Over Your Images in WordPress

Pinterest Pin It Javascript Code for Blogger and non Wordpress Sites

Raw Javascript Code, No Jquery, No External Scripts, Pinterest Pin It Button

CONTENT RELATED TO PINTEREST PIN IT BUTTON ℘ ON IMAGE HOVER WITH AND WITHOUT EXTERNAL JAVASCRIPT CODE

Bookmarklet To Enable Right Click On Web Page

What Does Google Analytics Tracking Code Look

Asterisk Password Revealer Bookmarklet

COMMENTS ON PINTEREST PIN IT BUTTON ℘ ON IMAGE HOVER WITH AND WITHOUT EXTERNAL JAVASCRIPT CODE