How to Tech

How to Add Pinterest Image Hover Save Button

how to add pinterest image hover save button

Hover on the above image, you can see the save to Pinterest button. This is what to achieve, RIGHT?

Here is a step by step tutorial on how to add Pinterest image hover save button to your website. This article is written keeping WordPress users in mind but you can apply these steps with a little tweak on your non-WordPress websites too. Let’s start:

How to Add Pinterest Image Hover Save Button

Pinterest has a dedicated section for developers where you can do many things to integrate and enhance your websites with Pinterest. In our case where we have to add save to Pinterest button on image hover, all we have to do is to add a javascript code to the body section of our website. Here is a step by step guide:

Step 1: Log in to your WordPress website and navigate to ‘Theme Editor’

Step 2: Under ‘Theme Editor’, head over to ”footer.php’

add pinterest image hover save button

There are two types of Pinterest image hover save button, one is round and another is rectangular with ‘save’ text on it. I am providing javascript codes for both, it’s on your choice which button looks best on your website.

1. Pinterest Image Hover Save Round Button

Starting with the round Pinterest save button, in the footer.php scroll down to the bottom and copy and paste the below javascript code just before the </body> tag.

Save changes, reload the website and hover on any image to see the Pinterest save button.

Pinterest image hover round button
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js"></script>

2. Pinterest Image Hover Save Rectangular Button

Here comes, another detailed Pinterest image hover save button. I personally prefer this one, you can add this using the same steps described above. i.e. Under footer.php, scroll down to the bottom, add the below code right before the </body> tag.

Save changes and reload the website. Done

add pinterest image hover save button big
<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>

Alternatively, you can visit Pinterest developer tools directly and add image hover save button.

An engineer and a tech enthusiast, driven by curiosity.

Similar Posts

Leave a Reply

Your email address will not be published.

three × one =