Custom Pinterest Button for Custom Url (Text-Link, Image, or Both)

Link to pin it on pinterest without generating a button

If you want to create a simple hyperlink instead of the pin it button,

Change this:

http://pinterest.com/pin/create/button/?url=

To this:

http://pinterest.com/pin/create/link/?url=

So, a complete URL might simply look like this:

<a href="//pinterest.com/pin/create/link/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest">Pin it</a>

Create a dynamic Pinterest button?

For anyone who's interested, here's what I did:

HTML:

<a href="#" id="pinit">Pin It</a>

JS:

$(document).ready(function(){
    $("#pinit").click(function(){
        $("#pinmarklet").remove();
        var e = document.createElement('script');
        e.setAttribute('type','text/javascript');
        e.setAttribute('charset','UTF-8');
        e.setAttribute('id','pinmarklet');
        e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e);
    });
});

Normally, when you click the Pin It bookmarklet in the browser's bookmarks bar, it dynamically inserts a script (pinmarklet.js) that auto-executes a function which brings up the Pinterest UI for choosing which images you want to pin.

I modified this so that the script is inserted when a link is clicked instead (#pinit). I also added an id to the script (#pinmarklet) so that I can remove it ($("#pinmarklet").remove();) and re-add it every time the link is clicked - otherwise, duplicate links to the same script keep piling up if you keep clicking the link.

Anyway, the end effect is that you're doing the same thing as the bookmarklet, just from within the page instead. So it works the same way and pulls whatever the current page content is, meaning you can change other content dynamically and it'll get picked up by the same one "Pin It" link.

Pinterest Sharing Option

href="http://pinterest.com/pin/create/bookmarklet/?url=http://www.islandcompany.com/<?= $product->url; ?>&is_video=false&description=<?= $product->meta_description; ?>&media=http://www.islandcompany.com/<?= $product->getMainImage('large')->url; ?>

I was missing a few linking issues with my URL path for my image. All resolved now. This code, altered a little bit for your own image paths and meta descriptions, will work!

Override css for specific pinterest buttons

In the end I made my own plugin to loop through all images on the page and create a link which I then had complete control over.

As long as the link href was formatted in the following way, it seemed to work:

https://www.pinterest.com/pin/create/button/?url=[full url of web page]&media=[full url of image]&description=[image title]

Multiple images in media for Pinterest button

Figured this out. It's quite simple, but not explicitly stated in the docs. Just remove the media tag altogether and it will pull images from the post.

<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="vertical"><span><img width="29" height="29" src="<?php bloginfo('template_url'); ?>/img/socialButtons/share/icons/24/pinterest.png" alt="Twitter" /></span></a>

---

Related Topics