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

Answer 1

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