How to Add Pinterest “Pin It” to WordPress

Pinterest is a vision board-styled social photo sharing website and app where users can create and manage theme-based image collections. Users of Pinterest curate themed image boards, populating them with media found online using the “Pin It” button, or uploaded from their computer. Each such item of media is known as a “pin,” and can be a picture, a video, a discussion or a monetary gift. Pins can be grouped into “boards,” which are sets of pins created on a given topic.

1. Plugins

Pin it Button  mimics the behavior of the official Pin It bookmarklet and you have the option of placing it above or below your post content. Just go to Settings > Pin It Button in your WordPress admin after installing.

2.  Hand-coded
Add one of the following code to the bottom of the footer.php, put that before
Simple

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Advanced

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

a. You want Pinterest to grab the first image of the post
Add the following to your template (single.php) where you want the ‘Pin It’ button to appear.

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo pin_img() ?>&description=<?php the_title(); ?> on <?php bloginfo('url'); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a>

Add the following to your functions.php to show the first image of the post

function pin_img() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

b. You want Pinterest to show a featured image
Add the following to your template (single.php) where you want the ‘Pin It’ button to appear.

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; ?>&description=<?php the_title(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a>