To date, with more than 72.5 million users on Pinterest, with a reach of 47.1 million users in the US alone, Pinterest is definitely a social media network worth taking a look at, especially if you are an e-commerce store that has products to sell. At the very least, I suggest having a Pinterest button (or Pin button) applied to all your blog posts and product pages on your website.

Most social sharing widgets offer the Pinterest sharing button, but for most of my clients, I suggest taking it a step further and applying the Pin Hover Button to all of your images. This is actually quite simple and can be done within one page (usually) on your website. Typically, if you add the piece of Pinterest code to your website in one area, then the hover button should appear on all of your images.

What is the Pin Hover Button?

Simply put, the Pin Hover Button is the Pinterest sharing button that pops up when you hover your mouse over an image. This button allows you to share any image on your website, without having the social sharing widgets placed around every single image.

Pinterest Button


How to Add the Pin Hover Button

Adding the Pin Hover Button to your website is quite simple. Follow the instructions below, and you’ll be ready to Pin!

Copy and paste the code snippet below, and add it to your website where you want your button or widget to appear.


Load the Pin Button on Every Image

If you want the Pin button to appear on ALL images, then it’s as simple as adding the code snippet to the “header” section of your website, so it loads the code on every single web page. This is especially helpful if you are an e-commerce store who wants to add the Pin button to every product image.

If you run your website on WordPress, find the area in your theme options for “header” or </head>. If you can’t find a Header section, you can also paste it in the Footer section—</footer>. After you copy & paste the code into your Header (or Footer), then the Pin button should appear on all of your images.

Pin Hover Button Script


Pin Hover Button Script


Load the Pin Button on Only One Page

If you only want the Pin button to load on one specific page, then simply add the script to that one page, only. You can place this code in the body of your blog post (in the html/text editor of the post).

Pin Button Script


Not on WordPress?

Now, if you are not running on WordPress, then you would need to add this in between your <head> </head> (called the header tags) on all of your web pages. Make sure you place it right before the end of the header tag, which looks like this >> </head>

Header Script


And, that’s it!

If you have any questions about this, please feel free to contact me here. I’d be happy to help you implement the Pin Hover Button on your website. <3