Questions? ☎ Call (860)407-2687
find us on:
Software
Clickbank Thief Google Auto Complete Keyword Scraper Hide Affiliate Links From Google Infinity Google Keywords Plenty Of Fish Fast Desktop POF Username Search POF Auto Message Sender Long Tail Keyword Competition Checker Sentence Blender Spinner Viral YouTube Soft Windows Fast IP Changer YouTube Auto Complete Keyword Scraper Troubleshooting
Web Tools
Blog
Anonymity Code Content Dating Facebook General Keywords YouTube
Reviews Discounts Contact


Two Pinterest.com Button ℘ Image Hover With And Without Javascript

home ➲ blog ➲ code ➲ this page
short url:

Pinterest.com Button ℘ On Image Hover With Or Without External Javascript Code

Click to Play Video About 2 Pinterest.com Pin Button ℘ On Image Hover With Or 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

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

  1. 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.
  2. Activate the Plug-in.
  3. 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

  1. Go to the Pinterest for developers widget builder page.
  2. 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.
  3. Select if you want a round or square Pin-It button and regular size or large.
  4. 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.

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



How To Put Mouse Cursor Inside Input Text Tex

... script code but does not let you specify at what position. If there is nothing in the input element then this is not an issue or an option but if there is text, here is the code required to put the cu ...

Extension To Check All Checkboxes On Webpage

... When you are on a web page where you wish to check all the checkboxes, click the bookmarklet. Click on the link to the Check All Checkboxes extension above to test it for yourself. When you click on ...

Auto Refresh Web Page Chrome Firefox Ie Free

... o auto refresh a web page is also very simple in PHP ... (the assumption in this example is a reload every 10 seconds). The HTML meta tag for auto refresh of a web page: <meta http-equiv="refresh" ...

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

Feel free to submit your comment below. Anything that does not contribute and is just spam will automatically be deleted. Questions marked by * are required. Comments are checked by a human to make sure they are not spam/automated and are on topic and related to Two Pinterest.com Pin Button ℘ On Image Mouseenter With Or Without External Javascript Code. 
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>
Question ❔
Back to Top ⇪