Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Pinterest “Pin It” button in your WordPress Blog

Last updated on by
Elegant Themes
How to Add Pinterest “Pin It” button in your WordPress Blog

Recently while monitoring our blog stats, a new traffic source was popping up enough for us to notice. This traffic source was Pinterest. We started using the platform and saw great potential in it therefore we have added it on List25. In this article, we will show you how to add the Pinterest “Pin It” button to your WordPress blog.

Pinterest Buttons

Adding a Pinterest Pin it Button Using Plugin

The easiest way to add a Pinterest “Pin it” button to your WordPress site is by using a social sharing plugin. We recommend using a Floating Social Bar, which we use on our own sites. First you need to install and activate the Floating Social Bar plugin. Upon installation, you need to go to Settings » Floating Social Bar to configure the plugin.

Adding Pinterest Button to WordPress using Floating Social Bar

Simply drag and drop Pinterest button to the Enabled Social Services area, along with other buttons that you would like to display and save your settings.

Manually Adding a Pinterest Pin it Button in WordPress

First thing you need to do is paste the following script in your footer.php file right before the body close tag.

<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>

Once you have done that, you can add the following code in your single.php file at a location of your choice:

<?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(); ?>" class="pin-it-button" count-layout="vertical">Pin It</a>

The code above is basically pulling your Featured Image, the title of your post as description, and the URL of the post. It is designed for the vertical share button. If you want to put the horizontal share button, simply change count-layout parameter to horizontal.

We hope that this will help. P.S. if you are on Pinterest then please follow Syed Balkhi

Pinterest Shortcode

Update: one of our user wanted to create a shortcode for the Pinterest “Pin It” button. You can easily do so by pasting the following code either in your theme’s functions.php file or your site plugin’s file:

<?php
function get_pin($atts) {
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }

add_shortcode('pin', 'get_pin');
?>

Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • mark taylor

    Good tutorial, i have put it on my site without any problems, i then tested it and it worked, but it still says 0 after i pinned.
    Mark

  • vrinda

    I tried so many plugins… they don’t work with infinite scroll and nextgen gallery…. but with some changes this script solved my issue.. thanks

  • Michael

    Hello,

    I just want to ask if I could change the size of the “pin it” button? Because it seems that it was a little bit small.

    Regards,

    Michael

    • http://www.wpbeginner.com Editorial Staff

      You could use the pin count layout vertical or horizontal. Other than that, no you cannot change the size.

  • Jenny

    This code just recently stopped working. I had it on my site and it was working great and recently images appear to be working but then when you go view the pinboard there is no image set. Other times when trying to pin it 502 error that comes from the Pinterest site. Any ideas?

    • http://www.wpbeginner.com Editorial Staff

      Probably server errors on Pinterest’s end. We have this code running on our other sites.

  • Ido Schacham

    There’s a bug in the code. The generated href for the pin it button should include ‘url=’, currently it’s missing the equals sign.

    • http://www.wpbeginner.com Editorial Staff

      Fixed the shortcode code for that. Thanks for reporting it :)

  • jess

    For wordpress users..adding the pin it or any other social media is easy! Under dashboard, go to setting, click on sharing and they all appear- click on what you want to add!

    • http://www.wpbeginner.com Editorial Staff

      You are referring to WP.com sites. This tutorial is for self-hosted WordPress sites. Two different things.

    • Jen M

      THANK YOU! I have been searching for how to do this for 2 days & downloaded something & that didn’t work, I was about to give up & then THANKFULLY read your comment. I appreciate someone making it as EASY as it really is, how come wordpress can’t do that?

    • Jenn K

      Ooh, thanks for the tip! Exactly what I was looking for :)

  • Nick

    Is there a way to customize this so you can select a custom image for the pin-it button ?

    • http://www.wpbeginner.com Editorial Staff

      If you mean a custom image for your article, then yes you can. Look at the &media tag in the second code.

  • http://tomeda.bg/ Husein Yuseinov

    Hi,
     
    I need to implement this code but in header file, but postthumbnail returns error?!

    • http://www.wpbeginner.com/ wpbeginner

       @Husein Yuseinov You have to call the thumbnail code within your post loop. In order to call it in your header.php file, you must utilize the global variable. 
       
      http://www.wpbeginner.com/wp-themes/how-to-display-custom-fields-outside-the-loop-in-wordpress/

      • http://tomeda.bg/ Husein Yuseinov

         @wpbeginner Thanks for the fast respond, but I’m not a coder, and it’s hard for me to understand you.

        • http://www.wpbeginner.com/ wpbeginner

           @Husein Yuseinov Ok… so here is what you do. Add the following line above $pinterestimage line inside the PHP tags:
           
          global $wp_query;
          $postid = $wp_query->post->ID;
           
          Then replace $post->ID with $postid and it will work. Also after the code, you may want to end wp_reset_query();
           
          This is the best we can do. What you are asking for requires coding. If you are unable to do this, then shoot us an email. We can help you out for a small fee. 

  • http://robthecomputerguy.com/ robthecomputerguy

    What in the world is going on with the “animhut blog” button on thee next 3 comments?

    • http://www.wpbeginner.com/ wpbeginner

       @robthecomputerguy I think they just liked our comments, and livefyre is showing their profile.

      • http://robthecomputerguy.com/ robthecomputerguy

         @wpbeginner Oh that’s fascinating – that didn’t even occur to me – thanks for the follow up!

  • FuturePocket

    I tried adding this… it worked but when you click on “Pin it” and it opens the window in a new browser and you actually submit the pin, it just reloads the newly opened window and the pin isn’t submitted. Decided not to implement it until they’ve fixed their bugs.

  • http://pinterestplugin.com/ Phil Derksen

    If you don’t want to mess with adding code, I created a Pin It button plugin you can try out.

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

    (or just search for “pinterest pin it” under plugins)

  • http://jeanoram.com/ Jean Oram

    I used the ‘follow me’ code on the Pinterest Goodies page and pasted it into the ‘text’ widget on my WordPress blog. The button now appears right after my mini bio. It works quite well. :)

  • http://www.wpbeginner.com Editorial Staff

    For any advanced theme framework like Thesis, Genesis, Headway etc, you have to add these codes via functions.php file using the framework appropriate hooks. We cannot possibly cover all the theme frameworks out there. Most theme framework blogs have instructions on how to do customize the themes.

  • http://www.wpbeginner.com/ wpbeginner

    Your method seems a bit tedious because you would have to do it for each image.

    • http://www.tomaytotomaaahto.com/ Ruby

      @wpbeginner It’s not ideal, but it’s really not much more than you have to do to post the image anyway. I’m still looking for a great option (plugin ideally) that a) works on my theme and b) is easy. Luckily, due to the popularity of Pinterest, I’m confident someone will have one up and running soon!

  • http://www.wpbeginner.com/ wpbeginner

    Make sure you set $pinterestimage[0] otherwise it will return an array. Other than that not sure why you are getting the error.

    • merrittsgret

      @wpbeginner It’s working now, thanks to the shortcode code you gave us. Thank you so much!

      Now to get it to align with everything else via CSS… (http://ylcf.org/2012/01/tomorrow-2/) Ah, the joys.

      • http://www.wpbeginner.com/ wpbeginner

        @merrittsgret Yeah, you might have to utilize the !important tag in some cases.

  • dave2

    Any idea on how to change it from featured image to first image?

  • http://ylcf.org/ Gretchen

    It works, but it shows the text “array” before the Pin It button. I’m calling it via my functions.php, like so “echo $pinterestimag…..<?php;" Could that be why?

  • http://crockpotladies.com/ Heidi at CrockPotLadies

    I cannot seem to get it to work. I put the first code in my footer.php before the closing body tag and then added the other code into my single php after my other sharing buttons provided by po.st. Yet when I look at a post on my site (http://crockpotladies.com/recipe-categories/entrees/crockpot-chicken-enchiladas/) I do not see a Pin It Button. Any suggestions?

    • http://www.wpbeginner.com/ wpbeginner

      @Heidi at CrockPotLadies We can see the button in the next line after the Subscribe to feed etc links.

  • http://www.wmwebdesign.co.uk/ wmwebdes

    Only just started to hear about Pinterest – looks as though it is really taking off.

    Thanks for the tut.

  • http://www.tomaytotomaaahto.com/ Ruby

    Thanks for this. I recently tried a similar method but it doesn’t seem to work with my WordPress.org theme, so I came up with my own work-around and posted it here: http://www.tomaytotomaaahto.com/tools-and-tutorials/how-to-turn-your-images-into-pinterest-pin-it-buttons-wordpress

  • YeahThatsKosher

    How do you get this to integrate with an existing WP plugin like Digg Digg or Sociable?

    • http://www.wpbeginner.com/ wpbeginner

      @YeahThatsKosher You would have to ask the developers to do so for you.