Creating a Custom Pinterest Share Button: UI issue

CMS & WordPress
1

I am 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:

 <div class="mysharingclass">
    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo the_permalink() ?>" target="_blank"><i class="icon-facebook"></i></a>
    <a  href="https://twitter.com/intent/tweet?text=<?php echo urlencode( the_permalink() ) ?>" target="_blank"><i class="icon-twitter"></i></a>
 </div>

The existing social sharing urls/icons worked fine and, as mentioned, I have just included a pinterest one, as follows:

    <?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
    <a href="//pinterest.com/pin/create/%20button?url==<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" data-pin-custom="true" target="_blank"><i class="icon-pinterest"></i></a>

While icon-pinterestis added to my theme and in the style.css looks like this:

  [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";
    }

As you might have noticed, instead of using in the URL:

[http://pinterest.com/pin/create/button/?url](http://pinterest.com/pin/create/button/?url)

I rather call:

[//pinterest.com/pin/create/%20button?url](http:////pinterest.com/pin/create/%20button?url )

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:

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:

<a href="//pinterest.com/pin/create/%20button?url==http%3A%2F%2Flocalhost%2Fmywebsite%2Findex.php%2F2017%2F04%2F16%2Fhello-world%2F&amp;media=&amp;description=Hello world!" data-pin-do="buttonPin" data-pin-custom="true" target="_blank"><i class="icon-pinterest"></i></a>

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.

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:

    <script
            type="text/javascript"
            async defer
            src="//assets.pinterest.com/js/pinit.js" >
    </script>

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: https://developers.pinterest.com/tools/widget-builder/?) and the pinterest link returns a blank page (This is the current URL as generated: https://www.pinterest.com/pin/create/%20button/?url=%3Dhttp%3A%2F%2Flocalhost%2Fmywebsite%2Findex.php%2F2017%2F04%2F16%2Fhello-world%2F&media=&description=Hello%20world!). 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.

Thank you so much.

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.