Add Pinterest Pin It Button to Every Post & to GetSocial

By January 9, 2012Blog Tutorials, Blogging

I am super obsessed with Pinterest right now.  It is the perfect pick me up and a way to stay inspired and fueled with a million great ideas for my life, my home, my kids and my kitchen.  If you have not heard of this amazing site yet, please check it out.  You will not regret it.  Not only is Pinterest good for you, it can be great for your blog.  Each and every day I see tons of people saying that their greatest source of traffic is now Pinterest over twitter, StumbleUpon or Facebook.  That is really saying something! It goes without saying you want it to be easy for people to pin your posts!

How to add Pinterest PinIt ButtonPin It

The problem is, for a site that is so big on sharing, it is not the easiest site to implement into your blog.  After a long time spent finding the code, I finally have the little PinIt button in my GetSocial plugin that floats in the left side of my page and I could not be happier! Now I do not have to worry about going to each individual post and choosing a URL and image.  Of course I still can choose to do this by using the Pin It instructions on the goodies page, but by having it right there with the other sharing options makes it available on each and every post I have ever written. Of course, I have added it to this post…feel free to pin!

I finally found the code snippet you will need at Chykalohpia and then I just changed it a little to get what I wanted.

The Magic Pinterest Code

If you want the PinIt button at the end of your post with other social media sharing buttons like twitter or facebook you have a few choices.

  1. You can use a plugin like GetSocial as I have and add it to the additional options in the menu.
  2. You can add the code to the end of each post or page in the HTML view.  This option is not preferred if you have other social media sharing icons here that will not match your new PinIt button.  However, it will work.
  3. You can add the code to the loop of your post and / or page files.  Usually these are single.php or single-post.php.
  4. If you are using Thesis (as I am) or another theme that has hooks you can use your hooks to add this code and the button to the bottom of posts or pages. I add code directly to my php files but you can easily break your blog this way so if you are using the Thesis plugin for hooks you would use the Thesis_Hook_After_Post.

Without further ado, the code!  Please note that this image pulls from one of my sites.  If you have a particular PinIt button you would like to use, make sure to replace the src portion of the code below with your own image file location.

[crayon attributes]
Pin It
[/crayon]

As a note, when you add this to the end of your post you can modify it’s placement using the margins in the code above and / or by applying specific css rules to it.

Using the code with Get Social

I chose to add this to my Get Social plugin because it puts them with the other sharing items.  If you use a sharing plugin and it allows you to manually add a site like pinterest, this should work. Get Social is awesome because it floats next to your posts and you have the option of easily setting in the menu where it floats, how far down it starts, what color it is and what icons you want to show.

The simple code to add for Get Social is as follows.  You simply add it in the box!

[crayon attributes] [/crayon]

Here’s what my profile looks like.  It is full of things I love! I would love to share Pinterest with you so please check out my profile and of course, let me know if you have any questions! Let’s Get pinning!

Brittany's Pinterest

Join the discussion 29 Comments

Leave a Reply

CommentLuv badge