How to add a "pin it" button dynamically?
Asked Answered
W

0

6

I'm trying to optimize my Wordpress install - and one of the culprits I'm seeing, is the "Pin It" button widget for Pinterest. I'm now trying to find a way to dynamically load the JS code (when they initially hover over the button), and then apply it to the page. So far I've only managed to get this far:

jQuery(document).on("mouseenter click",'.pinItSidebar', function() {
    jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
        // do something here?
    });
});

I can't seem to find a function that I can call (as a callback, after the JS is loaded). Obviously I will only do this once per page load (the above is just a very basic version at the moment)

Does anyone have any suggestions on how I can achieve this? The end game of how I want it to function, is with:

example of how it currently works

Working solution:

Here is a working solution I've now got, which will allow you to load the pinterest stuff ONLY when they click the button (and then trigger the opener as well). The idea behind this, is that it saves a ton of Pinterest JS/CSS / onload calls, which were slowing the page down.

jQuery(document).on("click",'.pinItSidebar', function() {
    if (typeof PinUtils == "undefined") {
        jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
            PinUtils.build();
            PinUtils.pinAny();
        });
    } else {
        PinUtils.pinAny();
    }
});

...and just call with:

<a href="javascript:void(0);" class="pinItSidebar">foo</a>

Hopefully this helps save someone else some time :)

Extra tweak: I'm just playing around, to see if I can make this even more awesome :) Basically, I want to be able to decide which images are pinnable. Below this will do that for you:

jQuery("img").each(function() {
    if (jQuery(this).data('pin-do')) {
        // its ok, lets pin
    } else {
       jQuery(this).attr('nopin',"1");
    }
});

All you need to do to make an image pinnable, is have the data-pin-do="1" param set the images you want to allow them to share :)

Wraith answered 9/2, 2016 at 12:13 Comment(7)
Pinit.js adds a global PinUtils object to window. You can call PinUtils.build() when you want it to parse your new HTML.Temperament
@ZackArgyle - awesome, thanks :) Kinda on the same lines...how do I then trigger a click? (so it brings up the screen with all the pinnable images on)Wraith
You either actually click the element itself after building, or you can call PinUtils.pinAny()Temperament
@ZackArgyle - you legend! Please add that as an answer, and I will accept. I'll also update my question with the working code I've got :)Wraith
The only little thing thats a but annoying, is that there is no way to tell it NOT to do some images :( its either pinAny() or pinOne() ... but as far as I can see, no way to exclude some images (for example, social media icons, and other stuff I don't really want to include on the pinlist)Wraith
You should be able to add the data-nopin attribute to any image tags you want to exclude.Temperament
This should be upvoted more. Hands down the most useful Pinterest hack I have ever seen. You can extend this by adding your (Pin) image classes to the click selectors, so each image click also triggers the Pinterest JS load.Primine

© 2022 - 2024 — McMap. All rights reserved.