Add Pinterest Pin It Button to Every Post & to GetSocial

posted in: Blog Tutorials, Blogging 27 comments

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 Button Pin 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]

[/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

Brittany
I'm Brittany. I believe that simple is best and that smiling can make or break a day. I love being a woman, a wife and a mother. I like to make pretty things and making things with big tools. I am a huge fan of good design. I love to travel. Hugs make me happy. I share my life, experiences, tips and tutorials in the hope that this community can find a whole lot of awesome together.
Brittany
Brittany
Brittany

Latest posts by Brittany (see all)

23 comments… add one

  • January 10, 2012 Alison

    You are a coding machine :)

    I do love Pinterest too – I go there now to look for recipes instead of Googling them!
    Alison recently posted… Guest Star: Kir of The Kir CornerMy Profile

    Reply
  • January 10, 2012 Galit Breen

    I’m over the moon for pinterest, too! Thank you so much for the code work!
    Galit Breen recently posted… Memories Captured, Another StartMy Profile

    Reply
  • January 10, 2012 Nicole @MTDLBlog

    I adore Pinterest! I need to add this to my get social plug-in – another great way to share our blogs with a new audience! Thanks for the tips!

    Reply
  • January 10, 2012 Lyz

    Nice work! Can’t wait to implement.

    Reply
  • January 11, 2012 Kate

    I love Pinterest! I can’t wait to use this to get the social plug-in!

    Reply
  • January 11, 2012 Tina @ Life Without Pink

    LOVE your floating bar on the side…I might do this too. Thanks for the great info!

    Reply
  • January 11, 2012 Jessica

    I needed this! The plugin I was using was completely unreliable. Thank you!!

    Reply
  • January 25, 2012 Bev

    Hi there,

    I am so frustrated……I am not understanding how to set this up to have a floating pin it.
    Is there an explanation for dummies on that.

    Reply
    • March 6, 2012 Brittany

      In order for the pin to float as well as any other social media icons you will need a plugin like GetSocial that worls as a floating bar. good luck!

      Reply
  • January 31, 2012 Ed Thralls

    Everything works right up to the click. When I click the Pin It button nothing happens. Where does the DoPinit() happen? Is that function that needs to be added to the blog code or is part of the java script from Pinterest directly?

    Thanks!

    Ed

    Reply
    • February 1, 2012 Brittany

      Ed I don’t know what theme you are using but another person had that same issue. I use Thesis as does the other woman but the thesis designers themselves cannot figure out why it is clickable with the exact same url as the PinIt button but then goes nowhere. I am still trying to figure it out but in the meantime I did get the code figured out for putting all of your buttons at the bottom of the post. If this is interesting to you I will be posting soon. So sorry for the problem. I assume it is another plugin issue but I just can’t be sure. Good luck!

      Reply
  • February 10, 2012 Hot Chocolate

    Thanks for the info about Pinterest! I love it too. I added it to my website and it caused some security problems with my SSL certificate so I had to temporarily remove it. Just so you know, the folks at Pinterest said they are working on fixing that. I am going to try just adding it to my blog using your instructions. Thanks again.

    Reply
  • February 13, 2012 Phil Derksen

    About the time you posted this I created a Pin It button WordPress plugin that hopefully works better than the others out there. It’s a bit different in that it asks the user to pick an image like the Pinterest bookmarklet though. If you give it a shot and let me know what you think.

    http://wordpress.org/extend/plugins/pinterest-pin-it-button/
    Phil Derksen recently posted… This Week in Pinterest [2012-02-13]My Profile

    Reply
  • March 3, 2012 Patti Brockhoff

    Can’t wait to see how this works.

    Reply
  • April 23, 2012 Jarrett Gucci

    I wrote an article on the top Pinterest Wordpress plugins and would love to link back to your article for those that do not use Wordpress.

    Is this ok? My article is here http://orangecountycustomwebsitedesign.com/top-3-free-pinterest-plugins-to-add-to-your-wordpress-website/
    Jarrett Gucci recently posted… LOCAL MOTION: TOP TEN REASONS TO THINK LOCAL WHEN BUYING ONLINEMy Profile

    Reply
  • May 15, 2012 cathy

    love it!!!!

    Reply
  • May 15, 2012 cathy

    thanks love it!!!!

    Reply
  • June 10, 2012 Richard Johnson

    Thanks for the article i really loved it :)
    Richard Johnson recently posted… You Gonna Love This I Am Damn Sure!My Profile

    Reply
  • June 28, 2012 Vishwambhar

    Great post over there… Thanks for sharing…I wanted to know it would be possible to attract enough amount of traffic using pinterest, equal to that we can get from other social media like facebook, twitter etc??
    Vishwambhar recently posted… Chrome Remote Desktop BETA- Remotely access your computer with Chrome BrowserMy Profile

    Reply
  • July 1, 2012 Lucy Bieri

    Thanks for Sharing Brittany.. Very insightful.
    Lucy Bieri recently posted… MyPCBackup – Money Making Formula Simplify.My Profile

    Reply
  • August 15, 2012 Sharon Schneider

    I just joined Pinterest a few minutes ago.Your article has made me very hopeful.
    I have a website in progress not finished yet.I am very new to this internet stuff.
    I’m still not sure of this code business.I don’t want to appear stupid,BUT….
    My problem is tackling new things.I am afraid of failure.
    I am on my own and not young anymore.I have no one to help me.
    And frankly,my dear,I am scared to death.

    Reply
  • October 26, 2012 Teresa

    I love Pinterest and would like to pin things from facebook to my boards, I use to have the floating “P” that would appear on my photos in FB but now it’s gone and I can’t get it back………do you know how to do that???

    Reply
    • October 30, 2012 Brittany

      No, I don;t. Actually it is impossible to pin from Facebook so I am not sure if I ever saw that feature.

      Reply

Leave a Comment and Make Me Smile

CommentLuv badge
About Brittany

Life on Instagram

Love on Pinterest

Fun on the Facebook

Gifts Galore

Shop Stella Dot

Barefoot Books
Usborne Books

Quite Clever and Cool

167 queries in 3.382733 seconds.