How to Add a Pinterest “Pin It” Button to Your Site

Posted on 79 Comments

In case you haven’t heard, there’s a new rage in social media and it’s called Pinterest. Pinterest lets you organize and share all the beautiful things you find on the web. People use pinboards to plan weddings, decorate their homes, and organize their recipes.

If you’re like most of us, you know exactly what Pinterest is, and you’ve probably heard a number of people talking about it. Some people think that Pinterest is a “timesuck” or “online bulletin board”, but to others it’s a huge source of traffic.

Don’t Believe Me?

ProBlogger founder Darren Rowse wrote a really good blog post recently about how he overlooked a 1000 visitor a day source of traffic.

Or you can see what Nester thinks about Pinterest and blogging. She’s a home decor blogger, and knows a thing or two about that niche.

Many folks are pigeonholing Pinterest as a website for women – but I’m seeing more and more people (as in guy friends of mine) sign up and using it as well.

Adding the “Pin It” Button

I won’t tortue you any more, so here’s how you add a Pinterest “Pin It” button to your site. As with all tutorials, this assumes you’re using the Genesis Framework.

The first step is to create a file named single.php and place the code you see below. Save the file and upload it to your child theme’s directory on your server.

With Pinterest, you have three options for the “Pin It” button display – horizontal, vertical and no count. Choose one of the three options – not all of them.

Horizontal button display:

<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
	
    /** Horizontal */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );

}

genesis();

Vertical button display:

<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
	
    /** Vertical */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="vertical">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );

}

genesis();

No-count button display:

<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
	
    /** No-count */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="none">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );

}

genesis();

Which Image Will Show?

The pinterest_share_button function will pull in the genesis_get_image function, which first searches your post to see if you have set a Featured Image.

If you haven’t set a Featured Image, the fallback will be the first image found in the gallery for that particular post.

Placing the Pinterest “Pin It” Button

The sample code given above will place the Pin It button directly above your post content. If you’d like to display it after the post content, replace this code:

add_action( 'genesis_post_content', 'pinterest_share_button', 5 );

With this code:

add_action( 'genesis_post_content', 'pinterest_share_button' );

If you would like to place the Pin It button before and after the post content, your entire single.php file would look like this:

<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {
	
    /** Horizontal */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );

}

add_action( 'genesis_post_content', 'pinterest_share_button_after' );
function pinterest_share_button_after() {
	
    /** Horizontal */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );

}

genesis();

Styling the Pinterest “Pin It” Button

There probably isn’t much that you’ll want to style with the “Pin It” button. Depending on where you place it you might want to adjust margin or padding.

Here’s how you can target the Pinterest “Pin It” button through CSS:

.pinterest-button iframe {
    margin: 10px 0;
}

Email Newsletter

Like what you read here in this blog post?
Get more like it delivered to your inbox daily.

Comments

  3. says

    I recently started work on a simple Pinterest Pin It button plugin after I ran into issues adding it to my WP sites. Features are minimal at the moment but it gets the job done and I’m working on requests from folks such as placement an display options.

    http://wordpress.org/extend/plugins/pinterest-pin-it-button/

    It mimics the JavaScript behavior of their bookmarklet rather than their “add to your website” code that you used.

    Other than that, I got a hold of a developer at Pinterest and they say they’re working on an API currently. But no timeline as to when it will be released to the public.

    Reply

    • says

      Phil – thanks for dropping by and linking to your plugin. I actually considered writing this tutorial with your plugin in mind, but I’m trying my best to teach people how to do things with Genesis here on the site. Either way works the same probably. :-)

      Reply

      • says

        I like Phil’s plugin, which is getting better by the day… but I also like doing things like this without plugins a lot of the time. So kudos to you both.

        Reply

  5. says

    Thanks so much for this Brian! I was using the Pinterest “Pin It” plugin on my website but it was putting the “Pin It” button underneath my related post stuff where no one can see it – and it was doing my head in!

    Reply

    • says

      I just tried adding it in as ‘another service’ and it’s possible to add it in but you can only do it for one url and have to predefine the image and everything.

      Brian’s way of doing it here is definitely the best way to go about adding it to your site.

      However, it would be nice to see a mini tutorial on adding a similar set of social sharing buttons to posts like the ones in Jetpack. Brian? :)

      Reply

      • says

        I hear ya Paul – I tried the “simple” code given by Pinterest and yes, it required a manual setting of URL and image for each one. That’s why I insisted that Nathan write up something with the “all inclusive” style for pinning posts.

        Reply

  8. says

    Can I just check – by adding this material to child theme it will not get overwritten by genesis framework update?
    What if child theme gets updated by studiopress – will there be a a way to save anyof these child theme mods?

    Reply

    • says

      Mike, child themes are never affected (files getting overwritten, etc) when Genesis is updated. Child themes themselves are seldom updated, and even when they are it’s usually minor stuff.

      Reply

  12. says

    Of note. I had an existing single.php file so I just added the code above to that file (above the closing “genesis( );” line). It error’ed out unless I *removed* the “<?php" from the copied code. I'm sure a real coder would find that obvious, but I'm a hack…

    Reply

    • says

      Yea, the tutorial assumes it’s a fresh file, which is why the opening php line is there. Obviously you figured out the hard way Jay, but like you said – you’re a hack. Like me, you seem to learn by trial and error, also known as being street smart. (sometimes I think that’s a better trait than being book smart!) :-)

      Reply

  18. says

    Perfect timing. I just had a client request this feature for her catering and recipe website.

    Love Studiopress and Genesis. So much bang for the buck.

    Reply

  20. says

    Hi Brian,
    Thanks for this. I tried this method and got this error on each blog post.
    “Parse error: syntax error, unexpected T_STRING in …[edited]… themes/eleven40/single.php on line 9″

    Any ideas about line 9? I was using the 1st code listed for the horizontal display button.

    Thanks

    Reply

      • says

        Not yet. I did double check my copy/paste. But just because, yes, I’m a hack…
        The file does go in the Child Theme’s main directory, correct? Not Some other directory?
        Thanks

        Reply

      • says

        No. sad face…I’m using a plugin.

        I’ll try again, but each time I copy re-paste, the blog posts get shut down with that error message.

        Feeling pretty incompetent right now. Outside of me actually learning to code, yes, you’ll be enabling me, any consoling professional advice on why adding that code gives that error?

        Thanks again

        Reply

  22. Wendy says

    I am wondering what would be the best way to include the Pinterest button along with Facebook, Twitter, etc. in Genesis. I have some experience with Thesis custom functions. Genesis seems somewhat similar with regard to hooks but I am a newbie and have not gotten the hang of Genesis yet. Thanks in advance for your help.

    Reply

  23. says

    Brian, Thanks so much for the awesome tutorial. I was struggling getting the images to show up with another plugin. I remembered you had tutorials on your site and sure enough you had one for Pinterest. I uploaded the single.php and it worked perfectly right away! Thanks again!

    Reply

  24. says

    This is great.

    Only thing I will add is that if you are planning on using this with multiple instances on a page (say your archive pages) you can add this to you Genesis Settings > Header Scripts:

    <!-- Include ONCE for ALL buttons in the page -->
<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;
        if (window.location.protocol == "https:")
            s.src = "https://assets.pinterest.com/js/pinit.js";
        else
            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 then leave out the inline javascript call.

    Reply

  25. says

    I used Phil’s Pinterest “Pin It” Button plugin. I was able to align the button with my Facebook “Like” button very easily. Thank You ;p

    Reply

  27. says

    Is there an easy way to add a feature image? My images aren’t showing whey I try to pin from my posts. I’m new to Genesis Framework and I’m a dork on top of that so I’m pretty sure I don’t know what I’m doing 99% of the time :) .

    Reply

  29. says

    I’m having a pinterest problem that I can’t figure out even after 3 hours of googling the issue. When someone goes to my site and wants to pin an image, if they use the pinterest bookmarklet instead of using a pin it button that I specifically install, all they see is a bunch of blank boxes that show the image sizes and say pin it. No images. Any idea what I am doing wrong? I use Genesis Prose on my site. I’m an obvious newbie to the blogosphere. You’re a smart guy. I’m desperate for a solution. Thanks!!!

    Reply

  30. Cyndi says

    Hi Brian,

    Thanks so much for this post, this is just what I needed.

    How would I change the function to automatically grab the post title to use as the pin description? I have this function hooked to the Genesis Featured Widget Amplified plugin/widget in my sidebar:

    add_action( 'gfwa_before_post_content', 'gfwa_pin' );
function gfwa_pin() {
    /** Horizontal */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) ); 
}

    Thanks!

    Reply

  31. says

    I love how easy this was to install. Will the counter pick up on the number of times a post has already been pinned? If not automatically, is there a way to do this? I’m transferring from blogger to wordpress. My posts have already transferred, but links have not yet been redirected if that makes any difference.

    Reply

      • says

        Okay, I thought I had it figured out, but obviously I don’t since I can’t seem to get the button to show up. I considered the plugin, but it places the code after my Link Within thumbnails. Here are some questions I have:

        1. When you say “create a file named single.php” what type of file are you referring to?

        2. How do I “upload it to your child theme’s directory on your server?”

        3. Does it automatically appear once I upload or are their additional steps?

        Sorry, I’m such a WordPress newbie that I can’t even follow instructions :)

        Reply

  34. marco says

    Hi Brian,
    hi can i post an image on pinterest from html like the sharer.php of facebook ?
    I’ve a web site with a lot of image ad i have click on a with my styles (no iframe) to post it.

    Reply

  37. says

    Hi Brian, how would I put this inline inside of an existing custom function? I have four custom buttons: FB, Twitter, G+ and Pinterest – at the bottom of each post. I’ve saved a spot with a but can’t find code that will work properly there. Would you mind taking a look?

    http://daze.theblogmaven.com

    Thank you!
    Jeni

    Reply

  38. says

    So I had this added to the Genesis Featured Widget Amplified widget back in September (see my comment above). A month or so ago the counts on the pin button stopped working. Any ideas why?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>