How To Add Pinterest Button for WordPress Blogs

Ben Daggers
Ben Daggers
on October 15, 2013

Forget about Facebook and Twitter. Brace yourselves because Pinterest is on it’s way. Many bloggers are driving their traffic from Pinterest and it’s a wise move for us if we go with the flow of Social Media Marketing. In this blog post, I’ll try to walk you through the process on how to add a Pinterest button for WordPress Blogs.

This is not your typical Pinterest button code that you just copy and paste in your WordPress Blog, this code is customized to meet every WordPress Bloggers’ demands.

Adding a Pinterest “Pin It” button to your WordPress blog is a great way to connect socially with your audience and to drive traffic to and from your site and your Pinterest page. This post will cover on how to add a customized Pinterest Code to your WordPress Blogs.

You may generate the default Pinterest Button codes from Pinterest Button Code Generator or just copy my codes below. It’s the same thing though, I just added my preferred attributes.

In the header.php, between <head>  and </head> , copy the following code:

Paste the above code where you want the Pinterest button to appear. Remember that the Pinterest button will be displayed according to the position where you pasted the Pinterest button codes in your Single.php WordPress theme file.

The Pinterest button code is still raw and requires us to add few tweaks which will make our Pinterest button function effectively. In the Pinterest codes above, modify it by changing the following attributes:

URL - Find the line  href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.bendaggers.com and change this to href="//pinterest.com/pin/create/button/?url=<?php the_permalink() ?> . Noticed that I only changed the  http%3A%2F%2Fwww.bendaggers.com  (this is the link to my website which you don’t want to copy) to <?php the_permalink() ?> . This will make your Pinterest button variable and applicable to ALL your post. By the way,  <?php the_permalink() ?>  is generally used in WordPress to display the permalink for each post.

Media – Right next to the URL code is the Media or Image that will be pinned to Pinterest. This is very vital since Pinterest is all about sharing Images. You want to deliver the right images to your users and share it with their friends. So to make make things easier, in the Pinterest Button Code, find the line media=http%3A%2F%2Fwww.bendaggers.com%2Fwp-content%2Fuploads%2F2013%2F11%2FBenDaggersCOM.png  and change it to this one: media=<?php echo pinterest_image_snatcher() ?> . The code is for our customized function that will help our Pinterest Button to get the right images for your users. For now, we’ll leave that behind and go on with the other modifications. More explanations later for the Pinterest Button Function.

Image Description - If you want to add a default description when the user pins your images, you may add them by editing this line: description=BenDaggers.COM%20%7C%20Feeding%20Your%20Dirty%20Doubting%20Minds." . You may change them to what ever you want. For example, i want to add “This Pinterest Button Code Tutorial is Very Awesome!”, want I need to do is edit the line and insert the text description=This%20Pinterest%20Button%20Code%20Tutorial%20is%20Very%20Awesome!" . Just so you know,  “%20″ stands for spaces. You may wanna use the Pinterest Button Code Generator if you’re having a hard time.

Button Count – Don’t forget the button count, you can change this to beside, above or hide them. Technically, it displays the number of times your images are pinned.

  • data-pin-config="beside"
  • data-pin-config="above"
  • data-pin-config="none"

Pinterest Button open on a new Tab (OPTIONAL) – This works like this: Whenever the user clicks on the Pinterest Button, a small window will open for Pinterest sharing tool. To do this, find this line <a href= and change that to this <a target="_blank" href= . Then find this  "> and change this to onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=325,toolbar=no,menubar=noe,resizable=0'); return false;"> . If you’re wondering how this works, you may click the Pinterest Button on the left side floating with Facebook and Twitter Share button.

Double check if you got it right, here’s the final Pinterest Button Codes after all the modifications.

We’re almost done with the Pinterest Button! But before we launch our revision to our Pinterest Button, we need to add a function that will perform an essential task for us. This task is to get the right image that will be available for the user to be pinned.

I call the function Pinterest Image Snatcher. This function is in charge of getting the images from your WordPress Blog to Pinterest. It works like this:

  1. When the user clicks the Pinterest button, the function will scan your WordPress blog post.
  2. Once its done, it will check if your Blog post has a Featured Image assigned to it. If featured image in the blog post exist, it will return the same image and display it so the user or visitor of your WordPress blog can pin it.
  3. If the Pinterest button don’t find any assigned Featured image for your WordPress blog post, it will perform a quick scan (again) of your WordPress blog post and search for the first image. Once it found the first image included in your blog post, the function Pinterest Image Snatcher will return the first image and prepare it to be pinned.
  4. If and only if the condition B and C was not met, the last resort would be the default image you assigned. This image will be assigned by you which you can save anywhere in your WordPress blog. The function will get that and prepare to be pin by the user.

You may refer to the Pinterest Image Snatcher Function Flow Chart for better understanding.

How to add Pinterest button for WordPress Blogs

We’ re done talking about the function and how it works. Now, let’s open our Function.php file and paste the codes below. You may paste the codes at the bottom of your Function.php File.

In the Function code above, change the path or location of the default image. You can see mine is below.

$first_img = "http://www.bendaggers.com/wp-content/uploads/2013/11/BenDaggersCOM.png";

Upload your changes if your using Filezilla or save your changes if your directly editing your WordPress blog in your Template Editor Page. Refresh your blog post and test your Pinterest button if it works.

This tutorial is not possible without the help of Peter Michael. We are very thankful he helped us with the Pinterest Image Snatcher Function. Thank you very much.

How are you integrating Pinterest into your WordPress blogs? Please, Let us know! If you have any questions, then feel free to ask in the comments

Ben Daggers

Ben Daggers

is the creator of BenDaggers.com. He graduated from Adamson University (Philippines) with a Degree in Bachelor of Science in Accountancy dating back 2009 and earning his MBA in Polytechnic University of the Philippines. He is currently employed as a General Accountant in a well known Global Business Process Outsourcing. He enjoys learning new things. He consumes his spare time in front of his Computer with Adobe Photoshop and Dreamweaver.

Leave a Reply

Reproduction without explicit permission is prohibited. All Rights Reserved.

Disclaimer: The editor(s) reserve the right to edit any comments that are found to be abusive, offensive, contain profanity, serves as spam, is largely self-promotional, or displaying attempts to harbour irrelevant text links for any purpose.