Pinterest browser extension ignoring data-pin-* attributes

[Rhys-T]

(This isn't an issue with the widgets, exactly, but I don't see an issue tracker for the browser extension anywhere.)

The Pinterest browser extension doesn't currently seem to pay any attention to the data-pin-media, data-pin-description, etc. attributes on image elements. This means that whenever someone tries to pin an image from our site, it always pins the thumbnail version of the image from the page itself rather than the full-size version, and uses the title of the page as the pin's description instead of the one we've written.

Looking at the extension's code, I think I've managed to track the problem down to the get() function in logic.js. If the attribute it's looking for (e.g. data-pin-media) doesn't exist as a DOM property on the image element, it tries to read it through the element's dataset object. However, the dataset's properties are named like pinMedia rather than data-pin-media, so get() still can't find them. As far as I can tell, either:

a) get() needs to use the getAttribute() method on the element rather than using the dataset at all (this is how the Pinterest widget script does it), OR b) get() needs to convert the attribute name to the camel-case version before looking it up in dataset, OR c) everything that calls get() needs to pass the camel-case version of the name instead of the hyphenated, prefixed version.

(The set() function seems to have the same issue, but it never causes any problems there because set() never gets called with a data-* attribute name.)

[kentbrew]

Pretty sure that's working as intended. When I do this in console:

t = document.createElement('A');
t.setAttribute('data-pin-media', 'woo.jpg');
t.dataset;

... I see a DOMStringMap in output, like this:

{pinMedia: 'woo.jpg'}

t.getAttribute('data-pin-media') also seems to work as expected.

Can you supply a page URL that isn't behaving?

[Rhys-T]

Just to be clear, the Pinterest widget that we (as the authors) embed into the page is working correctly. The problem I'm having is that when a user/customer tries to use the Pinterest browser extension (either the Firefox or Chrome version) to save an image from our site, it seems to ignore all the data-pin-* attributes.

Here's an example of where I'm having problems. The Pinterest button that's actually part of the page works fine. Now, with the extension installed, try hovering over a product photo and using the 'Save' button that appears. It should save a framed version that has our logo, and the pin's description should resemble the product description. Instead, it gets the frameless version of the image from the page, and the description is just the page's <title>.

Tracing the extension's code in the debugger, it looks to me like what it ends up doing is neither el.getAttribute('data-pin-media') nor el.dataset['pinMedia'], but rather el.dataset['data-pin-media'], which would never return anything but undefined.

(Interestingly, the same extension's toolbar button works fine. It's just the hover buttons that it adds to the page that are having issues.)

[kentbrew]

Aha, okay, yes, I can replicate. I'm not sure what to do next here; I've been retired from Pinterest since March, and it is not clear who currently owns the browser extension. I will guess that there's not a lot of monitoring in place for this repo, either; Pinterest has for some time now been concentrating on creating original content on the platform and not saving pins from offsite.

Here's a gist that might be useful, particularly the bits about adding Pin ids and images in your meta tags:

https://gist.github.com/kentbrew/2f5be2bdc8383f7489d923af0cc3ce9f

[Rhys-T]

Okay, thanks for confirming it. I'll take a look at that link and see if it's anything we can use. I could also try enabling the pinit.js version of the hover buttons, so that it would take priority over the ones from the extension.

I tried contacting the extension's official support email address almost a week ago, but never even saw an auto-response, so I figured I'd try here. The extension was last updated on March 1st of this year, so it sounds like someone is working on it - I'm just not sure how to contact them.

I've modified a local copy of the extension by changing found = me.el.dataset[me.att]; to found = me.el.getAttribute(me.att); on line 702 of js/logic.js, and it seems to fix the issue, though admittedly I haven't done extensive testing on it. I also tried working around it from our site's JavaScript by adding getters to the dataset object that redirect to the correct property names, but as I suspected, the sandbox keeps the extension from seeing any changes like that.

Should I leave this issue open for now, just in case? Or close it since it technically doesn't belong on this repository anyway?

[kentbrew]

Right, the March 1st update was my last. Let me see if I can reach someone who might be able to help; this does seem like a good fix.