title: Creating a Custom Pinterest Share Button: issues with pinit.js?
body: <p>I have been working with a 4.7.3 Wordpress installation and have created a custom pinterest share button to be placed in my footer where already other social share icons are present, for example:</p>
  
  <pre><code>&lt;div class="mysharingclass"&gt;
  &lt;a href="https://www.facebook.com/sharer/sharer.php?u=&lt;?php echo the_permalink() ?&gt;" target="_blank"&gt;&lt;i class="icon-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a  href="https://twitter.com/intent/tweet?text=&lt;?php echo urlencode( the_permalink() ) ?&gt;" target="_blank"&gt;&lt;i class="icon-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The existing social sharing urls/icons worked fine and, as mentioned, I have just included a pinterest one, as follows:</p>
  
  <pre><code>&lt;?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'full' ); ?&gt;
  &lt;a href="//pinterest.com/pin/create/%20button?url=&lt;?php echo urlencode(get_permalink($post-&gt;ID)); ?&gt;&amp;media=&lt;?php echo $pinterestimage[0]; ?&gt;&amp;description=&lt;?php the_title(); ?&gt;" data-pin-custom="true" target="_blank"&gt;&lt;i class="icon-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>While <code>icon-pinterest</code>is added to my theme and in the style.css looks like this:</p>
  
  <pre><code>[class^="icon-"], [class*=" icon-"] {
      font-family: 'my-icons';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-pinterest:before {
    content: "\e918";
  }
  </code></pre>
  
  <p>As you might have noticed, instead of using in the URL:</p>
  
  <pre><code>http://pinterest.com/pin/create/button/?url
  </code></pre>
  
  <p>I rather call:</p>
  
  <pre><code>//pinterest.com/pin/create/%20button?url 
  </code></pre>
  
  <p>Apparently, this seems to be the correct URL when you want to include your own custom button and bypass calling pinit.js. The outcome is that the sharing URL is correctly working, but it shows a "Missing Href" error as depicted by the below screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/KoFYU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KoFYU.png" alt="enter image description here"></a></p>
  
  <p>I am very much confused as I do not see anything wrong with my sharing code and this what I can see by inspecting the element:</p>
  
  <pre><code>&lt;a href="//pinterest.com/pin/create/%20button?url==http%3A%2F%2Flocalhost%2Fmywebsite%2Findex.php%2F2017%2F04%2F16%2Fhello-world%2F&amp;amp;media=&amp;amp;description=Hello world!" data-pin-do="buttonPin" data-pin-custom="true" target="_blank"&gt;&lt;i class="icon-pinterest"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I must also say that if I refresh multiple times in Chrome, sometimes the error disappears, but it is always there if i am using Firefox or Safari.</p>
  
  <p>I am rather stuck and I do not understand what it is going on and where I am going horribly wrong, so any help would be so much appreciated. The only hint I have is that pinit.js is messing with my own custom button. In fact, I have included in my header.php the following in order to enable embedding pins in my Wordpress posts:</p>
  
  <pre><code>&lt;script
          type="text/javascript"
          async defer
          src="//assets.pinterest.com/js/pinit.js"
      &gt;&lt;/script&gt;
  </code></pre>
  
  <p>When I comment that out, the missing href error goes away (hence the js is not "taking over" my custom button), but then I lose the ability to embed pins in posts (as per this: <a href="https://developers.pinterest.com/tools/widget-builder/?" rel="nofollow noreferrer">https://developers.pinterest.com/tools/widget-builder/?</a>) and the pinterest link returns a blank page (This is the current URL as generated: <a href="https://www.pinterest.com/pin/create/%20button/?url=%3Dhttp%3A%2F%2Flocalhost%2Fmywebsite%2Findex.php%2F2017%2F04%2F16%2Fhello-world%2F&amp;media=&amp;description=Hello%20world!" rel="nofollow noreferrer">https://www.pinterest.com/pin/create/%20button/?url=%3Dhttp%3A%2F%2Flocalhost%2Fmywebsite%2Findex.php%2F2017%2F04%2F16%2Fhello-world%2F&amp;media=&amp;description=Hello%20world!</a>). I need to retain both the ability to embed pins in articles and that of pin my articles through the sharing footer. How is that possible? Can you please help? I am not sure how to take this further and unfortunately I cannot discard one of the two functionalities, so would need a solution covering both. </p>
  
  <p>Thank you so much. </p>
  
  <p><strong>EDIT1:</strong> I have started doubting that <code>pinit.js</code> was included in the right place, so I have included in my footer.php just before the end of the <code>&lt;/body&gt;</code> as discussed <a href="https://developers.pinterest.com/docs/widgets/getting-started/?" rel="nofollow noreferrer">here</a> Same issue as before where it was placed in my <strong>header.php</strong> inside the <code>&lt;head&gt;</code> section, that is the functionality works, but the UI error saying "missing href" still appears. After a bit of fiddling, I have removed the async defer and tried these two alternatives, one after another:</p>
  
  <pre><code>&lt;script type=”text/javascript” src=”//assets.pinterest.com/js/pinit.js”&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;script type=”text/javascript” src=”http://assets.pinterest.com/js/pinit.js”&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The UI error went away and I am returned with the following URL:</p>
  
  <pre><code>https://www.pinterest.com/pin/create/%20button/?url=%3Dhttp%3A%2F%2Flocalhost%2Fmywebsite%2Findex.php%2F2017%2F04%2F16%2Fhello-world%2F&amp;media=&amp;description=Hello%20world!
  </code></pre>
  
  <p>However the URL returns a blank screen, why is that? </p>
  
  <p>Thank you for your help. </p>