Jetpack: Sharing: Pinterest image hover button broken

[KokkieH]

Steps to reproduce the issue

1. Go to Tools ->Marketing ->Sharing buttons
2. Enable the Pinterest sharing button, and set button settings to Official button
3. View a post on the site that contains images, and has sharing buttons enabled.

What I expected

For a Pinterest sharing button to appear on images when I move my mouse pointer over them.

What happened instead

No Pinterest sharing button appears

Able to replicate the issue across browsers and different themes, and on both WordPress.com simple sites and Jetpack-connected sites.

Reported in https://wordpress.com/forums/topic/pinterest-hover-gone/

[jeherve]

cc @sgomes; could this be caused by your recent changes to the Sharing feature in D52212-code? It looks like some of the sharing buttons, like the Pinterest official button, rely on jQuery.

[sgomes]

cc @sgomes; could this be caused by your recent changes to the Sharing feature in D52212-code? It looks like some of the sharing buttons, like the Pinterest official button, rely on jQuery.

Thanks, @jeherve, I'll take a look!

At first glance, I wouldn't say that this is caused by a lack of jQuery, however; my change didn't remove it, it simply makes it unnecessary for the purposes of sharing.js. In fact, for most sites jQuery will still be loaded, and that is still the case for the site in the linked forum post.

It's more likely that in reimplementing sharing.js I may have broken part of its functionality. I'll see if I can track down the issue.

[sgomes]

The issue manifests as an error in Pinterest's pinit_main.js:

Uncaught TypeError: a.getAttribute is not a function
    at Object.get (pinit_main.js?0.9800221506185274:formatted:34)
    at Object.getData (pinit_main.js?0.9800221506185274:formatted:43)
    at Object.showHoverButton (pinit_main.js?0.9800221506185274:formatted:457)
    at HTMLBodyElement.over (pinit_main.js?0.9800221506185274:formatted:509)

I'm investigating whether this is caused by a change on our end, or whether it's a bug in Pinterest's code itself.

[sgomes]

TL;DR: I could be wrong, but as far as I can tell, this is a bug in Pinterest's code.

Long explanation
Looking at the pretty-printed minified code, the bug happens in a get method:

get: function(a, b) {
  var c = "";
  return c = "string" === typeof a[b] ? a[b] : a.getAttribute(b)
},

This method allows for the first argument to either be an element or an object, so it first checks if the property is available directly (a[b]), and if not it tries to get it with a .getAttribute. However, that's going to fail on objects, since objects don't have getAttribute.

So the idea is that when get is called on an object, the object must have that attribute, or it will throw an error. Okay, that's fair enough.

So what's actually failing? Well, this is failing on a call to getData(d, "lang"), where d is an object. So let's look at an excerpt of d, the object in question:

{
  [...]
  "dataAttributePrefix": "data-pin-",
  "lang": "en",
  [...]
}

From this we assume that the way things are supposed to work is that for objects, {propertyName} is passed to the get call, whereas for elements it's data-pin-{propertyName} instead, so that .getAttribute works and gets a data attribute. So let's look at getData:

getData: function(a, b) {
  return b = e.a.dataAttributePrefix + b,
  e.f.get(a, b)
},

Everything is controlled by dataAttributePrefix, but it's done unconditionally. For this to work, it would have to be the empty string (so that the resulting property name is the same), but in this case it's set to 'data-pin-'. This results in a missing property in the object, which results in a call to an undefined .getAttribute function.

So where does this d object come from? Should its properties be set with data-pin-{propertyName} instead? Well, as far as I can tell, it's the fourth parameter in the pinit_main.js IIFE, and thus provided by Pinterest themselves:

}(window, document, navigator, {
    [...]
    dataAttributePrefix: "data-pin-",
    "lang": "en",
    [...]
});

This leads me to think that Pinterest have pushed a broken build to production, and that's the cause of the errors our users are seeing.

[jeherve]

@kentbrew Hi! 👋

I see you've made changes to https://github.com/pinterest/widgets/ in the past. Does the above ring a bell in Pinterest's Pin widget?

Thank you!

[sgomes]

FYI, the code in production appears to be different from the code in that repo. Here are the relevant lines inside showHoverButton:

GitHub repo:

lang: $.f.getData(el, "lang") || $.v.config.lang,

Production, pretty-printed:

lang: e.f.getLang(e.f.getData(d, "lang") || e.v.config.lang || e.v.lang),

It seems that in the GitHub repo (presumably the older code), the getLang call was being done with the first argument to the showHoverButton method, which was an element, and thus worked. In production, the getLang call is being done with some sort of config object instead (d in the minified code; aka the fourth argument that's passed in the IIFE), which fails.

[sophiegyo]

I've encountered someone who's also experiencing this with their third-party pin-it button plugin; and we've confirmed that this issue occurs on two other websites that they visit regularly (which are, admittedly, hosted on dotcom, but which seem to not have the Sharing Buttons-style pin-it hover). Would that be a good indication that it is something on Pinterest's side, rather than ours?

[sgomes]

Would that be a good indication that it is something on Pinterest's side, rather than ours?

Yes, that certainly seems to confirm the theory, thank you! 👍

[sophiegyo]

References:
16144512-hc

Sites:
stampwithamyk.com
stampsnlingers.com

They were both using this plugin: https://wordpress.org/plugins/pinterest-pin-it-button-on-image-hover-and-post/

• also do have the official sharing buttons selected, but the pin it hover doesn't show with or without the above plugin active.

[sophiegyo]

Encountered another site with the same issue in 3539830-zen too.

[jartes]

I've got another report with the same issue on 3543941-zen as well.

[sgomes]

Pinterest's widget code seems to still have the issue. I'm not sure what would be the best way of getting in touch with someone at Pinterest about this.

[serabi]

Two reports today on 22128476-hc and 21118378-hc.

[nerdysandy]

Reported on #3543258-zen

[fashuvo]

Another report on #25614502-hc

[eamcgill90]

reported here: 26136421-hc

[eamcgill90]

And here 3547286-zen

[kathrynwp]

Another report in 25465728-hc

[wpericam]

Another report in 3548674-zen

[ezebecke]

Report 3550592-zen

[sanjeev00733]

Another report in #5667133-hc

[jeherve]

I'll close this issue for now, as adding more user reports here is not going to help I'm afraid. This is not something that can be fixed on our end.

I have opened an issue here to let the Pinterest team know about the problem:
https://github.com/pinterest/widgets/issues/99

Until the problem is fixed, I'm afraid there are no work-arounds for this issue.

Internal reference: p7fD6U-4a4-p2

[jeherve]

Final update to mention that the problem has now been fixed on Pinterest's end.

[sophiegyo]

Final update to mention that the problem has now been fixed on Pinterest's end.

Checked one of the two sites I mentioned, the button's definitely working in my browser. Woo!