125

I have a page with tens or hundreds of posts, each one with social buttons. I just can't generate all the buttons for each url: it is too slow (facebook, g+, twitter, pinterest... for hundreds of links). So, instead of the facebook share button to be generated on the fly, I use a simple img pointing to

https://www.facebook.com/sharer.php?u=${url_of_current_post}&t=

When the user clicks on it, a popup window opens with content generated by facebook.

How can I do it for Pinterest? I only find around code to generate the button, but I would like to avoid js at all if possible. Is there something like the following?

http://pinterest.com/pinthis?url=${url_of_current_post}

Please do not try to make me use the js button, thanks.

Narcolessico
  • 1,921
  • 3
  • 19
  • 19

7 Answers7

189

The standard Pinterest button code (which you can generate here), is an <a> tag wrapping an <img> of the Pinterest button.

If you don't include the pinit.js script on your page, this <a> tag will work "as-is". You could improve the experience by registering your own click handler on these tags that opens a new window with appropriate dimensions, or at least adding target="_blank" to the tag to make it open clicks in a new window.

The tag syntax would look like:

<a href="http://pinterest.com/pin/create/button/?url={URI-encoded URL of the page to pin}&media={URI-encoded URL of the image to pin}&description={optional URI-encoded description}" class="pin-it-button" count-layout="horizontal">
    <img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" />
</a>

If using the JavaScript versions of sharing buttons are ruining your page load times, you can improve your site by using asynchronous loading methods. For an example of doing this with the Pinterest button, check out my GitHub Pinterest button project with an improved HTML5 syntax.

Eugene Manuilov
  • 4,271
  • 8
  • 32
  • 48
Mike Kibbel
  • 1,961
  • 2
  • 12
  • 5
  • 3
    Great answer, thanks! Also please see our page on developer.pinterest.com, here: http://developers.pinterest.com/pin_it/ – Kent Brewster Jul 24 '13 at 15:33
  • The Pin It widget builder http://business.pinterest.com/widget-builder/#do_pin_it_button is also useful for getting some sample code that you can then customise programatically. – William Denniss Mar 18 '14 at 09:08
  • 7
    @KentBrewster - For what it's worth, I ended up here with the same question after visiting your page. The info it has is all great, but it doesn't talk about the URL parameters or that the URL can be used without javascript (under the context of creating buttons on the fly) like facebook and twitter equivalent pages do. – xr280xr Apr 11 '14 at 15:36
  • My urlencode on the description is a bit janky. Any idea why? Example: "At this point, I&#8217;m just going to copy &amp; paste from another post because&#8230;  time." -- obviously less than ideal. – Imperative Feb 24 '15 at 01:11
  • 3
    The above answer works fine if user is already logged-in in pinterest otherwise it just stays in the pinterest home page even after successful login. Any solutions? – Uday Oct 30 '17 at 15:40
85

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>

vsync
  • 118,978
  • 58
  • 307
  • 400
Joe Fletcher
  • 2,133
  • 4
  • 28
  • 33
  • 2
    I much prefer to make my own links. Is this still working, or have they changed it? – nouveau Oct 21 '13 at 00:27
  • 6
    The accepted answer will generate a button if you have another pinterest button (and the pinit.js script loaded). Changing the url to have 'link' instead of 'button' will allow you to have a pinterest button in your footer and a custom pinterest link somewhere on your page. This should be the accepted answer. – ashack May 15 '14 at 16:47
  • 1
    Thank you for your answer, exactly what I was looking for. This should be the right answer in my opinion :) – patricia Nov 11 '14 at 16:08
  • 3
    I upvoted this answer, but later found that pinterest throws an error when trying to pin: `Parameter 'method' (value link) is not one of unknown, uploaded, scraped, bookmarklet, email, iphone, button, ipad, android, android_tablet, api_sdk, extension, api_other, bad.`. The solution is to keep the url as `button` but ignore the pinterest script. see http://stackoverflow.com/a/15035520/440646 – resting Jan 04 '15 at 00:28
  • this will not work, as @resting said: it will result in the error `pinterest parameter method value link is not one of unknown, uploaded, scraped, bookmarklet, email, iphone, button, ipad, android, android_tablet, api_sdk, extension, api_other, api_bulk_upload, adtech, directpartner, martech, button_external, bad.` Apparently the parameter after create must be one of these possibilities. – 0x4a6f4672 Mar 31 '15 at 14:16
  • 2
    does not throw an error as of now :P using as a property listing share link: `http://pinterest.com/pin/create/link/?url=URL&media=COVERIMAGE&description=ADDRESS` – Jeannie May 17 '16 at 16:34
  • @Jeannie What should be defined in param "media" and "description"? Is there an official documentation you could link? – Andy Apr 01 '21 at 06:05
  • New final Url to post is `https://pinterest.com/pin-builder/?url=YOUR-URL&media=IMAGE-URL&description=YOUR-DESCRIPTION` – ricardoasensio Jan 18 '22 at 22:14
12

I had the same question. This works great in Wordpress!

<a href="//pinterest.com/pin/create/link/?url=<?php the_permalink();?>&amp;description=<?php the_title();?>">Pin this</a>
ion
  • 1,033
  • 2
  • 16
  • 46
hawkdown14
  • 139
  • 1
  • 4
3

For such cases, I found very useful the Share Link Generator, it helps creating Facebook, Google+, Twitter, Pinterest, LinkedIn share buttons.

bencergazda
  • 620
  • 8
  • 18
2

I Found some code for wordpress:

 <script type="text/javascript">

    function insert_pinterest($content) {
        global $post;
        $posturl = urlencode(get_permalink()); //Get the post URL
        $pinspan = '<span class="pinterest-button">';
     $pinurl = '';
     $pinend = '</span>';
        $pattern = '//i';
        $replacement = $pinspan.$pinurl.'$2.$3'.$pindescription.$pinfinish.''.$pinend;
        $content = preg_replace( $pattern, $replacement, $content );
        //Fix the link problem
        $newpattern = '/<span class="pinterest-button"><\/a><\/span><\/a>/i';
     $replacement = '';
     $content = preg_replace( $newpattern, $replacement, $content );
     return $content;
    }
    add_filter( 'the_content', 'insert_pinterest' );

    </script>

Then you put the following in your 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>
Mansfield
  • 14,445
  • 18
  • 76
  • 112
2

So you want the code to the pin it button without installing the button? If so just paste this code in the place of the url of the page you're pinning from. It should function as a pin it button without the button.

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());

Nathan
  • 11,814
  • 11
  • 50
  • 93
mng
  • 50
  • 1
  • 1
    This worked for me, but 2 questions. How can you maintain the popup? Also, what does the random math do? – Pat Jun 19 '13 at 00:55
  • It's Pinterest's official code from their 'bookmarklet'. It's normally used as a link you save to your bookmarks and can click on any website you visit in order to bring up a Pinterest dialogue, but it works fine this way too, and is easy to implement. – ConorLuddy Jan 23 '15 at 17:08
  • 1
    They pretty specifically tell you not to do this in the API docs. Just because you can, doesn't mean you should. – Imperative Feb 24 '15 at 01:13
0

You can create a custom link as described here using a small jQuery script

$('.linkPinIt').click(function(){
    var url = $(this).attr('href');
    var media = $(this).attr('data-image');
    var desc = $(this).attr('data-desc');
    window.open("//www.pinterest.com/pin/create/button/"+
    "?url="+url+
    "&media="+media+
    "&description="+desc,"_blank","top=0,right=0,width=750,height=320");
    return false; 
});

this will work for all links with class linkPinItwhich have the image and the description stored in the HTML 5 data attributes data-image and data-desc

<a href="https%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F" 
   data-image="https%3A%2F%2Fc4.staticflickr.com%2F8%2F7027%2F6851755809_df5b2051c9_b.jpg" 
   data-desc="Title for Pinterest Photo" class="linkPinIt">
    Pin it!
</a> 

see this jfiddle example

Community
  • 1
  • 1
0x4a6f4672
  • 27,297
  • 17
  • 103
  • 140