Add pinterest pin-it button to WordPress site

Add pinterest pin-it button to WordPress site

28.02.2012

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

add pinterest pin it button to wordpress blog or website

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.

  1. 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.
  2. 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>
  3. 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:

  1. 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;
    }
  2. 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!

 

Advertising

Download new responsive WordPress template

New responsive WordPress template with big call-to-action-areas, header-slider and different color-themes. It is built on Bootstrap and named Strap Them Boots On. Read more and download!

The one writing here:

Important information

This is the search engine optimization (SEO) and web tactics webiste/blog for Jonathan Björkskog, working at and co-owning Genero Digital Agency, a digital advertising agency based in Helsinki, Finland. If you searched for my Swedish blog, you find it here: jonathanbjorkskog.se.

That's one of my passions.

If you were searching for the other one, kitesurfing, you should check out my kitesurfing blog instead.

Follow on Facebook

Head over to the wall and send me all your questions about Facebook, SEO, or any other awesome topic on the internet!

Premium SEO-Plugin

Brian D. Hawkins about SEOPressor:

It’s almost as if SEOPressor took those features from my checklist. I guess I’m old school but I have a checklist that I use when writing new posts. It’s pretty cool that SEOPressor helps automate some of those tasks and the check/remind feature is very nice. As usual I love your presentation.

http://hotblogtips.com/about

Click Here to Download
SEOPressor
Read my SEOPressor review