Pinterest button taken over by pinit.js

[billerickson]

If your site includes the pinit.js code from Pinterest, the Pinterest button is converted into a "Save" button:

I believe this has to do with the URL of the link. In this post it's recommended to use //pinterest.com/pin/create/%20button?url for custom share buttons because:

Apparently, this seems to be the correct URL when you want to include your own custom button and bypass calling pinit.js.

[billerickson]

Jared pointed out adding data-pin-do="none" resolves this.

[blogambitions]

adding data-pin-custom="true" will make it so that Pinterest won't adjust any custom css or html you've added to the button.

this url "https://www.pinterest.com/pin/create/button/" will still work for the button.

data-pin-do determines which image is pinnable. I'd assume that marking none would make it so that no image can be saved to pinterest?

source: https://developers.pinterest.com/docs/widgets/save/

[blogambitions]

seems like data-pin-do="none" results in this:

[jaredatch]

@blogambitions thanks for the details, really appreciate it :)

[billerickson]

This change prevented the button from being changed visually, but pinit.js still makes our Pinterest button nonfunctional. It moves the pinterest link from href to data-pin-href, so when you click the Pinterest button it opens a blank window.

We should check if data-pin-href exists, and if so use that URL in our global JS file. It's hacky but seems to be the only solution.