[How-to] Add the Pin-it Button on Top of Every Image

by • April 21, 2014 • Experts Talk, PinterestComments Off on [How-to] Add the Pin-it Button on Top of Every Image5523

Pinterest‘s growing popularity has made the presence of pin-related functionality all the more significant. A good thing is then to provide your visitors with a handy pin-it button on top of all your images to enable them to selectively pin your content on their profiles.

This handy guide will help you create the social functionality required and you only have to do it once.

Also Read: [How-to] Create Twitter Cards for your Content

Our first stop is the Widget Builder provided by Pinterest for Business. You can find various types of highly customized “pin-it” buttons, not excluding various widgets, other buttons and different functionality features with different actions attached to each. Explore and experiment to your heart’s desire.

This time, we want the Pin-It Button for Image Hover:


Pinterest is Visual

The Image Hover functionality loads a pin-it button on every image, on the page you have loaded the script. This way, visitors can selectively pin images from your website to their Pinterest boards, without going through an endless array of images available.

When visitors hover their mouse over an image, the pin-it button appears:


All you have to do is load the code and images should instantly show a Pin It button when hovered. No links or further customization is required to achieve the end result depicted above.

Placing the Code

From the Pinterest Widget Builder, this is the code for Image Hover functionality.

<script src=”//assets.pinterest.com/js/pinit.js” async=”” data-pin-hover=”true”></script>

To achieve the end result, you have to place the code on the page you’d like your images to be “pin-it” enabled. Preferably, right before the closing tag of the </body>, so the script will not interfere with the page load and will only activate after the rest of the content is shown.

The most common method is to place it on your footer, or footer.php template part, in order to enable the functionality for your entire website.  Place the code only ONCE per PAGE.

Would you like to add something to this story? Do you use Pinterest to pin images and links on your profile? Share your insight on the comments below!

Related Stories

Did you like this post? Subscribe to our Newsletter!

We don't spam, we will just send you a daily email with the best of our posts.

Comments are closed.