Pin it button on iPad throws error

[andymantell]

When using the pin it button on the iPad (iPad 2 - iOS 7), I receive the error "Cannot open page: Safari cannot open the page because the address is invalid" when I try to click on the button (As per screenshot).

The following codepen exhibits the bug:

http://codepen.io/andymantell/pen/Jfjlo

I believe the problem is related to the use of a protocol relative url on the main link. However even if I replace this with a full http:// in the html source, the javascript changes it to a // regardless. I suspect that the root problem is iOS safari mishandling protocol relative urls on links, but until the problem is fixed in iOS the pinterest widget probably needs to work around it by avoiding their use.

[andymantell]

I removed the protocol relative URLs on a local build by changing these values around line 1375:

      $.v.endpoint = {
        'pinterest': 'https://' + map.domain + '.pinterest.com',
        'builder': map.builder,
        'repin': 'https://' + map.domain + '.pinterest.com/pin/%s/repin/x/',
        'create': 'https://' + map.domain + '.pinterest.com/pin/create/button/?'
      }

But it didn't fix the bug so maybe I'm wrong about that being the problem...

[kentbrew]

What you're seeing is the error that throws when we try to deep-link to the Pinterest app and it's not present. It should self-dismiss; is this not happening?

[andymantell]

Unfortunately not, you actually have to press OK on the button. Once you press ok, everything then proceeds as it should...

[andymantell]

Ipad 2, iOS 7.0.3

Sent from my iPad

On 16 Feb 2014, at 01:31, "Kent Brewster" notifications@github.com wrote:

May I please have the exact hardware and OS version you're using?

— Reply to this email directly or view it on GitHub.

[andymantell]

Further to your question about the error self dismissing - it seems to be intermittent. I always see the error message and sometimes it goes away by itself, but sometimes it just stays on screen.

[andymantell]

I've been digging around a bit in the $.f.deepLink() function and various posts on Stackoverflow to try and get to the bottom of the issue of detecting whether an app is installed or not and/or whether a custom URL scheme is supported. I've (tentatively) reached the conclusion that it's not really possible though unfortunately, not without the error message dialog anyway. Has this ever worked on iPad without the error message popping up? Or did it used to pop up and then disappear quickly? It seems like $.f.deepLink() kinda relies on certain foibles that have maybe changed in recent versions of iOS...

[kentbrew]

This has definitely worked in the past and I am sure I tested it on an iPad 2 with IOS7. It was removed from production for a while but put back later. The error message should pop up and disappear quickly; I will check it using your codepen tomorrow from the office, where I have the same hardware. Sorry for the trouble!

[kentbrew]

I'm having a hard time replicating this outside your codepen, Andy. I've taken your HTML and put it here:

http://kentbrewster.com/pinit/ipad

... and it's behaving as expected. If it's happening on a site you control and it's driving you crazy, add data-pin-shallow="true" to the original call to pinit.js:

<script src="//assets.pinterest.com/js/pinit.js" async data-pin-shallow="true"></script>

... and we won't even try to deep link.

[andymantell]

Wow ok. This is getting weirder. Your example does indeed work fine for me. I'm struggling to think what could be causing the difference... The only thing I can think of is the slightly unusual URLs that we've tested this through:

• Codepen, which even in "full" mode still embeds my demo in an iframe
• On a staging site which is protected by http auth
• On my local development environment, using a url piped through http://xip.io/

I wonder whether something about one or all of the above ways of testing it could have caused it. I'll raise it with the backend developers so once the site is finished and live it can be tested again.

Thanks for your help!

[3urdoch]

Hello

I have been having this same issue, I thought for a long time it was something I was doing wrong until I stumbled upon this post. I can give you a link to a web page in production where this is happening.

http://www.propertypal.com/36-grove-house-kilmakee-road-si-38-kilmakee-road-templepatrick-ballyclare/252774

You will see pin button to the right below the photos.

I have been testing using browserstack with various iOS devices & versions. On iPhones though the pin button wont display in portrait mode as there isn't enough space so flip the phone on its side.

I get the "Cannot open page: Safari cannot open the page because the address is invalid" on all devices but only on iOS 7 does it force you to click OK before continuing, on older iOS versions the message displays briefly before going to pinterest.

[andymantell]

Aha. I just realised that whilst testing this the other week I had installed the pinterest app... If I uninstall the pinterest app, I can reproduce it on @kentbrew's demo (http://kentbrewster.com/pinit/ipad) and on the propertypal website.

So it seems that with the pinterest app installed, things obviously work fine, but without the app I can reproduce the bug. @kentbrew when you tested it, did you have the pinterest app installed?

[kentbrew]

@amurdoch84 great clue, thanks! I will check with a different iPad when I get to work.

@andymantell no, I uninstalled the Pinterest app.

[kentbrew]

@amurdoch84 your page worked for me. (That's a very pretty house, by the way.) I am using a 16GB wi-fi-only model MC705LL/A iPad, with IOS version 7.0.6(11B651). I'm going to plug it into a Web inspector and see if I can catch what's happening on Andy's codepen next.

[kentbrew]

@andymantell: I think this may have something to do with the iframe. We're setting X-Frame-Options to SAMEORIGIN for all of Pinterest (to cut down on clickjacking and other bad behavior) and the error may be enough to interrupt the timing loop that self-dismisses the Cannot Open Page warning.

I've added an iframe to this page:

http://kentbrewster.com/pinit/ipad

... and am seeing the same result for the second button (in the iframe) only. This may be because I'm simply setting window.location to Pinterest instead of opening a new window; I'll investigate that next.

[kentbrew]

If the Pin It button is shown in an iframe, the shallow link to /pin/create/button would try to open inside the iframe and fail due to our X-Frame-Options = SAMEORIGIN header. Failure would interrupt the timing loop that tries to auto-dismiss the Cannot Open Page error, and leave it hanging there.

Fix: open shallow links to /pin/create/button by setting window.top.location, not window.location.

Note: this still does not work on @andymantell's codepen because the top level window is sandboxed, but should be fine in situations where the site operator can set allow-top-navigation

Thank you: @andymantell and @amurdoch84

[andymantell]

Thanks for that update @kentbrew. The development site which we also experience the bug on isn't in an iframe so I'm not sure that explains the whole issue unfortunately. I'll see what happens when the site we're building launches and the environment is then completely "normal" and I'll get back to you...

[3urdoch]

This doesn't sound like it is what was causing my issue as my site doesn't have an iframe to speak of. I have actually since started using the data-pin-shallow="true" that @kentbrew suggested in the short term so as not to confuse users with the prompt. (this was after you reported that it was working fine for you @kentbrew).

I haven't had a chance today but I can have a tinker with it on a development server on Monday and see if this has resolved my issue or if I can narrow it down a bit more.

[davidham]

I'm seeing this on my site as well. I even changed my link URL from '//www.pinterest.com/pin/create/button/?url=[...]' to 'http://www.pinterest.com/pin/create/button/?url=[...]' but the script seems to rewrite it.

[davidham]

Hi @kentbrew, I tried your page at:

http://kentbrewster.com/pinit/ipad

with my iPhone, and I still see the error message, though it does cancel itself. I am loading pinit.js via RequireJS (works great incidentally!) so I can't do the data-pin-shallow=true fix. Any other way to avoid these error messages?