Pinterest javascript SDK pinOne method to pop up dialog

Question

Good afternoon

CONTEXT

We are using Pintrest JavaScript SDK to pop a dialog to pin something on Pinterest.

REQUIREMENT

We would like the pop up dialog to appear centered on the screen.

PROBLEM

Currently it's working but the dialog box appears at the wrong place.

CODE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 $.getScript('https://assets.pinterest.com/js/pinit.js', function () {
  var pinObj = {
  url: url,
  media: ogImg.attr("content")
};
                
pinObj.description = 'description';
                
PinUtils.pinOne(pinObj);

QUESTION

Is there a way to make pinOne() method pop the dialog centered on the screen?

Regards,

Martin Ouimet

aug · Accepted Answer · 2018-09-24T22:57:51.277

So it seems like you're referencing this from the Widgets API here.

To answer your question, I don't think there is a way to communicate where to open up the dialog. This would be hard in general because depending on the screen size or even the resolution, it's hard to pin point where "centered" is defined.

Looking at the source code of pinOne

            pinOne: function(a) {
                if (a.href) {
                    var b = e.f.parse(a.href, {
                        url: !0,
                        media: !0,
                        description: !0
                    });
                    b.url && b.url.match(/^http/i) && b.media && b.media.match(/^http/i) ? (b.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), b.description = e.d.title), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=invalid_url&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny())
                } else a.media ? (a.url || (e.f.log("&type=config_warning&warning_msg=no_url&href=" + encodeURIComponent(e.d.URL)), a.url = e.d.URL), a.description || (e.f.log("&type=config_warning&warning_msg=no_description&href=" + encodeURIComponent(e.d.URL)), a.description = e.d.title), e.f.log("&type=button_pinit_custom"), a.href = e.v.config.pinterest + "/pin/create/button/?guid=" + e.v.guid + "&url=" + encodeURIComponent(a.url) + "&media=" + encodeURIComponent(a.media) + "&description=" + encodeURIComponent(a.description), e.w.open(a.href, "pin" + (new Date).getTime(), e.a.pop.base.replace("%dim%", e.a.pop.small))) : (e.f.log("&type=config_error&error_msg=no_media&href=" + encodeURIComponent(e.d.URL)), e.f.util.pinAny());
                a.v && a.v.preventDefault ? a.v.preventDefault() : e.w.event.returnValue = !1
            },

The only real customization options you are offered include the url, media, and description. Doesn't really seem there is any way to communicate "centered".

That being said, I think this is simply a limitation of their Widget API. if you are hardcoding a specific pinterest link, you might be able to get away with just creating your own and passing in the windowFeatures. I tried it below and it "kinda" works (prob need to adjust the logic of determining the position.

document.getElementById('pinterest-link').addEventListener('click', function(e) {
  var URL = e.target.getAttribute('data-pin-myownlink');
  // assuming you want a 450x450 popup
  
  var w = 450;
  var h = 450;

  // plagiarized from http://www.nigraphic.com/blog/java-script/how-open-new-window-popup-center-screen
  var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.availLeft;
  var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.availTop;
  width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
  height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

  var left = ((width / 2) - (w / 2)) + dualScreenLeft;
  var top = ((height / 2) - (h / 2)) + dualScreenTop;

  window.open(URL, "Pinterest Link", 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+width+', height='+height+', top='+top+', left='+left);
});

<a id="pinterest-link" href="#" data-pin-myownlink="https://www.pinterest.com/pin/create/button/?guid=Nsp1JckZPYuE-6&url=https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=https%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Click here</a>

StackOverflow disables popups so here's a jsFiddle

This is what I expected. Actually I could modify the framework to add the feature but before that I was wondering if there is an out-of-the-box solution. — Martin Ouimet, Sep 24 '18 at 20:31
Hmm yeah in all honesty, so the normal way you center a popup via JavaScript is to simply pass the correct `top` and `left` coordinations. See [this answer](https://stackoverflow.com/a/28749237/1168661). You can see in the `pinOne` code there is a `e.w.open` which is what is triggering the popup but they don't give you room to pass in extra [windowFeatures](https://developer.mozilla.org/en-US/docs/Web/API/Window/open). Not sure how easy it is but you might be able to get away with just extracting the URL and triggering the `window.open` yourself + passing the features. — aug, Sep 24 '18 at 22:40
@MartinOuimet I created a mini demo of my comment above? Not sure if that's actually what you should be doing though as it is pretty hacky. — aug, Sep 24 '18 at 22:58

Pinterest javascript SDK pinOne method to pop up dialog

1 Answers1