How to Add Pinterest Save Button to WordPress

Pinterest is a traffic goldmine, without any doubt. Thanks to Pinterest, for making it easy for bloggers to convert their following to revenue.

Out of various image tools offered by Pinterest, save to Pinterest button is one of the most important functions you need to integrate right now.

Here is a step-by-step tutorial on how to add Pinterest button to your WordPress 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:

Step-by-Step: Add Pinterest Save Button to WordPress

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 a 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’

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 of 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.

<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, and add the below code right before the </body> tag.

Save changes and reload the website. Done

<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 an image hover save button.

Recommended Read: The Best Social Media Platforms for Bloggers