title: How to add a "pin it" button dynamically?
body: <p>I'm trying to optimize my Wordpress install - and one of the culprits I'm seeing, is the "<strong>Pin It</strong>" button widget for <em>Pinterest</em>. 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:</p>
  
  <pre><code>jQuery(document).on("mouseenter click",'.pinItSidebar', function() {
      jQuery.getScript("http://assets.pinterest.com/js/pinit_main.js", function() {
          // do something here?
      });
  });
  </code></pre>
  
  <p>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)</p>
  
  <p>Does anyone have any suggestions on how I can achieve this? The end game of how I want it to function, is with:</p>
  
  <p><a href="https://i.stack.imgur.com/fjp7C.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fjp7C.jpg" alt="example of how it currently works"></a></p>
  
  <p><strong>Working solution:</strong></p>
  
  <p>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.</p>
  
  <pre><code>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();
      }
  });
  </code></pre>
  
  <p>...and just call with:</p>
  
  <pre><code>&lt;a href="javascript:void(0);" class="pinItSidebar"&gt;foo&lt;/a&gt;
  </code></pre>
  
  <p>Hopefully this helps save someone else some time :) </p>
  
  <p>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:</p>
  
  <pre><code>jQuery("img").each(function() {
      if (jQuery(this).data('pin-do')) {
          // its ok, lets pin
      } else {
         jQuery(this).attr('nopin',"1");
      }
  });
  </code></pre>
  
  <p>All you need to do to make an image pinnable, is have the <code>data-pin-do="1"</code> param set the images you want to allow them to share :)</p>