Add pinterest pin-it button to WordPress site or website

Okay, the new big thing in social media seems to be here, and it is called Pinterest. Let’s start as usual by gaining some traffic and referrals from that new site by adding a pinterest pin-it button to our WordPress website or blog, so that people can start pinning our pictures and therefor send us visitors as well. It goes like this

A code is needed to add pinterest pin-it button to WordPress site

As with adding the Google Plus button, there is no good plugin for this. Or, there is basically two plugins you can use, the Pinterest “pin it” plugin, and the other plugin that was so bad that I don´t even want to link to it. So we will be editing some template files for being able to add the pinterest button manually instead until someone makes a great plugin.

Start looking for the place where you want to add the button in single.php. You are searching for something that looks like this: <?php the_content(); ?>. We want to put the button right above that for making it appear above the content, in the same place where I have the Like, Tweet, and G+ Buttons.
Paste the code found on the Pinterest page for adding pin-buttons. It is in the middle of the page, and named “Pin it button for website”. But do not paste it as it is, we need to modify it slightly before inserting it. Modify it like this:
<div class=”pinterest” style=”float:right; width:50px; margin-left:10px;”>
<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><script type=”text/javascript” src=”http://assets.pinterest.com/js/pinit.js”></script>
</div>
You can still add more div’s around it and style it if you want to. But like that it will work. Place the same code in page.php, index.php and category.php as well if you want it to show on more pages.

Warning! You need to have “featured” image function active on your WordPress site, and you will need to have a featured image chosen for every post where this is gonna work. Because the Pin It button needs a picture in the post, and with this code it automatically choses the featured image.

Alternative codes for Pinterest Pin It button

You can also chose a code that makes the pin it button grab the first picture from the blog post or article, if you have no featured images in your blog posts. This is then what you need to do:

Put this code in the file named functions.php:
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;
}
Put this in single.php
<a href=”http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo pin_img() ?>&description=<?php the_title(); ?>” count-layout=”horizontal”>Pin It</a> <script type=”text/javascript” src=”http://assets.pinterest.com/js/pinit.js”></script>

Optimization of the code where the Pinterest Pin It button is

You can move the <script… to the footer for a faster site. And you can also move all the style’s to the style.css file for a nicer code. But anyway, it works like this also!

Thanks for reading about how to add the pinterest pin-it button to WordPress site, if you have improvements or questions, feel free to comment! And do not forget to test-pin this post for checking if it works!