How to choose which pictures are available to pin when adding a pin it button to a page?

Question

I am developing a webpage that has a pin-it button on it. The problem is that when I click on it, the popup window that appears shows images that I don't know where are retrieved from because they are not present in the current page.

Is there a way to specify which images to be available to pin?

I have added this code just before the end of body tag:

<script  src="//assets.pinterest.com/js/pinit.js" async defer></script>

And this is how I am placing the button:

<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

is it possible to do what I need? if it is, how?

Jaime

Answer 1

Make sure you're using the right Pinterest Button Type for your needs. It looks like you're using the Any Image button. Perhaps try using the Image Hover button or even the One Image button which would need data-pin-do="buttonPin" added to the images you want to show the Pin It button.

Regardless which one you use, I tend to also place data-pin-no-hover="true" on specific images that I don't ever want to be pinned (like a header graphic). If a user has the Pinterest extension installed on their browser, that automatically scrapes an entire page and adds a Pin It button to all of the images. The data-pin-no-hover="true" overrides that.

Example of the hover button.

Example of the static button.