Use a custom Pinterest "Pin It" button to display post feature image?

Question

I am trying to use a custom "Pin It" button for Pinterest that goes on each post and which pulls from the featured image of that post.

So far I have this script which successfully pulls the feature image of the post, as well as shows it in a pop-up window:

 <script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

And here is the code I use in my single.php:

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a  href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">Pin It</a>

I can't figure out how to change the "Pin It" button to my own custom button; every time I try my button gets overridden.

I hope this explains it well enough. I'm still very new to php and javascript. Thank you for any help you can provide.

score 0 · Answer 1 · answered May 13 '14 at 21:39

There are a variety of WordPress plugins that put Pinterest buttons and other social sharing buttons on each post. If you want to have the Pinterest button hover effect on the featured image that is different than having a Pinterest button appear at the bottom of each post. You can specify which image gets pinned in your metadata, you can specify which image gets shared for all major social networks in the meta data.

I haven't messed with my blog in months but how I do my social sharing buttons and how I track them in Google Analytics is detailed here.

If you want to learn more about Structure Meta Data there is a good Moz.com article. I collected even more links when I added structured meta data to my domain.

Since you are using WordPress and not adding social sharing buttons to decades old static HTML you should really look into plugins. My blog is by no means a WordPress best practice, but it is old and I've seen a lot of plugins come and go, these are the ones I currently use including the ones I use to help do structured meta data and social sharing. I ended up doing some custom stuff in my theme too, because I wanted things perfect.

Good Luck!

score 0 · Answer 2 · edited May 23 '17 at 10:26

I was trying to do the same and found a solution in a previous stack overflow thread here. I used the answer by courtsimas and it worked well.

I also discovered some customization options on the pinterest widget builder website, you can generate the source code with different built in button options and incorporate in your own code.

I am currently running the widget builder based option with a round button and I am happy with it.

Mark

Use a custom Pinterest "Pin It" button to display post feature image?

2 Answers2