How to add a Pinterest pin it button to all of your posts tutorial

How to add a Pinterest pin it button to all of your posts tutorial

Pin It If you have a blog, you probably have social media buttons attached to your post so that your readers can “Like,” “Retweet,” “Digg,” etc your posts.  If you’re a photographer, though, you’ve probably also found yourself wishing that you could add a Pinterest “Pin it” button to your blog. There are a couple of great options on the Pinterest Goodies page including 1) “Follow me on Pinterest” button This is a basic button that links to your Pinterest pinboards.  To set it up, just log in to your Pinterest account, then click on the button on the Pinterest Goodies page to autogenerate your custom code). 2) Image/Product Specific Pin button This one is great for those selling products, posting single images infrequently, or if you want to just make one especially notable images available for pinning here and there.  To auto-generate your custom image-specific code, go to the Pinterest Goodies page and provide your website URL, selected image URL, and a description of the image (if you want to pre-populate that field for the pinner). We used this for the image above.

… but what if you want a universal Pin It code for all of your posts?

One request that we have heard made regularly from our photographer colleagues is a way to add a “Pin It” button similar to the “Like” or “Retweet” buttons that will appear in every blog post — without having to generate new image-specific code every time. When we set up our new CMpro Daily Project, we realized that it was time to figure it out — and we want to share that code with you. Simply copy and paste the code (in orange) below in one of several places:

  1. In the HTML at the end of every blog post (right in the body of the post in HTML View)
  2. Inside the loop of your post template file (typically single.php, single-post.php, single-photo.php, or something similar)
  3. Using an action hook — depending on how much of a geek you are, this may be a bit much, but many WordPress themes come with features that make the addition of hooks a simple cut-and-paste.

* Want to use a different Pinterest image or prefer to design your own button graphic? Just replace “http://www.clickinmoms.com/cmprodaily/wp-content/uploads/2011/09/pinit.jpg” with the URL of your own image.

We’ll see you — and your images!! — over on Pinterest!

Have you found or developed something that worked better? Tweaked the code to make it even more awesome? Tell us about it! And if you liked this article, be sure to Like it, Retweet it, and – of course! – pin the banner below!

About the Author:

Sarah Wilkerson is the CEO of Click & Company and also provides mentoring services, teaches advanced Click Photo School courses on composition & creativity, and authors the “Why It Works” series in CLICK magazine. She specializes in low light photography, everyday documentary, and tilt-shift work. A former attorney and Duke graduate, Sarah resides in northern Virginia with her Army JAG husband, four children, and three dogs. Visit Sarah Wilkerson online.
FOLLOW :

85 Comments

  1. Satakieli Sep 12 2011 at 12:15 pm - Reply

    Awesome, i've been trying to work this out for a while but with no luck! Thank you!

    Also, FYI I copied and pasted from but couldn't get it to work originally, I had to go back into the code and retype all of the " and ' in the code to get it to show.

    • admin Sep 12 2011 at 12:40 pm - Reply

      Thanks! Yep, the clipboard is copying the formatting and reversing quote marks and apostrophes. We'll post unformatted code shortly!

  2. admin Sep 12 2011 at 4:10 pm - Reply

    The code has been reposted without formatting – should work for everyone now!

  3. Vivian Sep 12 2011 at 8:46 pm - Reply

    It sucks that I have to add it to every post manually (wish I could add it to the template of my blog, but tried and it didn't work, probably bc I'm on Blogger?!?!). But I love this idea though. Thanks ladies!

  4. admin Sep 12 2011 at 9:58 pm - Reply

    Hey Vivian! Maybe something like this would work? http://isabellasnow.hubpages.com/hub/How-to-Inser

  5. jodi Sep 13 2011 at 5:47 am - Reply

    awesome! thanks for sharing.

  6. Jamie - The Modern T Sep 13 2011 at 7:52 am - Reply

    I'm actually in the process of having a plug-in developed for WordPress that will make this easier and will allow you to specify the image & description right below where your post editor is. I'll let you know when it's done. 🙂

  7. admin Sep 13 2011 at 7:57 am - Reply

    Jamie, we'd love to know when it's ready!!! Please keep us updated!

  8. Jen Sep 13 2011 at 9:13 am - Reply

    Thanks for this! Worked perfectly!

  9. Melany Sep 14 2011 at 3:27 am - Reply

    This is such a great addition to my stamping blog! Thanks so much for taking the time to create/share it!

  10. Doodle Dog Sep 15 2011 at 1:33 pm - Reply

    Thank you so much for this brilliant tid-bit of information and help! This button is a fantastic addition to any blog.

  11. Averie @ Love Veggie Sep 19 2011 at 8:46 pm - Reply

    Thanks for this! It worked for me!

  12. Jenny Sep 20 2011 at 8:57 am - Reply

    that's pretty nifty. i'll have to do this for my photo blog posts 😀

  13. Justina Sep 20 2011 at 12:03 pm - Reply

    Tried it fo my wordpress blog and it did successfully post the button, but then when I click on the button it doesn't link to Pinterest, it went to an al white+text (CSS?) page…Did I miss something?

    Thanks!

  14. Brenda Sep 27 2011 at 6:12 pm - Reply

    I had the same problem as Justina. Does this only work on self hosted blogs like WordPress.org or will it work on wordpress.com? If so, I wonder what I'm doing wrong.

  15. Averie @ Love Veggie Sep 29 2011 at 4:50 am - Reply

    This has stopped working for me 🙁

  16. Chelsea Oct 03 2011 at 9:11 pm - Reply

    I followed the link you gave to Vivian after her comment

    http://isabellasnow.hubpages.com/hub/How-to-Inser

    It worked! I used your html code and put it under post template! It only works on posts I create from here on out, but my blog is fairly new and I haven't been able to get any other things to work – so I'll take it! Thanks for sharing!

  17. Rhonda Oct 05 2011 at 2:47 pm - Reply

    I just found this answer for Blogger users and it worked for me. Yay.

    Try selectign the html/javascript gadget from the basic menu instead of the add your own. (I've never noticed the add your own gadget link before.) The http:// is necessary, but make sure it doesn't appear twice. It won't in that gadget.

  18. kristanlynn @ adelyn Oct 06 2011 at 9:48 pm - Reply

    This is great! Found it through JulieAnnArt! I was wondering if you had (well.. actually I looked and you don't, so I guess I'm wondering if you could do) a StumbleUpon Link one? So it makes it easier for people to "I like it!" on StumbleUpon?

    Love the site! I'm not photographer, but I hope to one day be at least an amateur.

  19. sara Oct 07 2011 at 4:53 am - Reply

    Added your code snippet to my Blogger signature, and it works perfectly – thank you so much!!!

  20. heidi Oct 07 2011 at 7:16 am - Reply

    This is great! TFS…I have a q. 😉 If you have a blog posts with say 5 pics, and you put a pin button at the bottom of the post, when you click it, do you have another page pop up with the option of choosing one or all five, or does it just pin the last pic it is under?

  21. Tammy Oct 16 2011 at 7:11 am - Reply

    thanks! This was just what I was looking for.

  22. Correen Oct 20 2011 at 11:15 am - Reply

    After reading tons I finally discovered your post with the code. Added it to my Blogger settings and voila! it is working. Thanks for pulling this together.

  23. Cathy @ NurtureStore Oct 29 2011 at 6:01 am - Reply

    Really great idea – but same problem for me as Justine and Brenda. I get the 'pin it' button but it doesn't actually go through to Pinterest. I'm self-hosted wordpress. If you have a fix I would love to know – and will spread the word! Thanks 🙂

  24. Amy Pezz Nov 09 2011 at 4:08 pm - Reply

    Thank you! Works great!

  25. Jenny Nov 11 2011 at 10:06 am - Reply

    Hey, I used this on a site, and it works perfectly in IE, Safari, and Chrome – but on Firefox it opens a new tab and says "Sorry, we can't see any big images or videos on this page" – anyone else having this issue? I can't seem to find it anywhere, and I don't know what to do about it. It's like it is opening a new empty tab and trying to pin THAT.

  26. HeatherL Nov 13 2011 at 6:41 pm - Reply

    Same as above for mine, nothing in firefox.

  27. Danae (The Busty Bak Nov 14 2011 at 6:03 pm - Reply

    Thank you! I've been looking for just 1 single Pinterest button to add to my blog instead of adding it to each and every single post (which is just too much work to go back and add to all my older posts) and this works great!

  28. Joanna Nov 15 2011 at 12:33 pm - Reply

    can you add this on a website? just wondering as I am trying to and it's not working for me.

  29. KC Nov 17 2011 at 11:25 am - Reply

    Thank you SO much – this worked perfectly!

  30. Angie@Angiesrecipes Nov 18 2011 at 6:00 am - Reply

    Thanks, finally found the code that works in blogger.

    There's a minor problem about the count…the number didn't show up.

    Is there a way that it can be fixed?

    Thanks,

    Angie

  31. Angie@Angiesrecipes Nov 18 2011 at 6:37 am - Reply

    Just discovered another problem…after I installed it, the sidebar went wrong..it went under the post.

  32. MARIA RIOS Nov 21 2011 at 6:06 am - Reply

    Hello,

    Thanks for sharing this code. I added to my blog, but when I click on the Pin it Button, images such as the ones I created for my Nav Bar under my header are being Pinned as well. Any thoughts???

  33. Beth Dec 30 2011 at 8:17 am - Reply

    I'm not super tech-y, but I can't get it to work. I'm using it on wordpress, and when I click on the button in a published post on my blog, I get a pop-up asking if I want to open or save "pinmarklet.js" as though it were a document or file instead of a link. If I select to open it, it gives a runtime error saying "line 4 char 105 'document' is undefined."

    Anyone know what I've done wrong or what I can change to fix it?

    Thanks 🙂

  34. Not Just A Mommy! Dec 30 2011 at 8:00 pm - Reply

    Worked like a charm! Thank you!

  35. Jamie Jan 01 2012 at 8:05 am - Reply

    Having problems with this on blogspot….pin button shows up on my blog and allows me to click the image I wanted posted to pin from that page but when it "successfully" pins to my pinterest board there's no image…only the description and my blogpage url. What am I doing wrong?

  36. f.e. Jan 04 2012 at 9:58 am - Reply

    hello! great post! i have one question though. i'd like to be able to automatically add an attribute that fills in the description for the user with the title of the post. (I'm using this in my loop on the single post page in WordPress). I tried this by adding this after the src attribute:

    e.setAttribute('description','');

    it didn't work… it was just kind of a guess. i thought it might work. any idea how to get this to work?

    thank you!

  37. f.e. Jan 04 2012 at 10:00 am - Reply

    oops, the php was stripped out, so here's that code but replacing the real php tags with capitalized text…

    e.setAttribute('description',' PHPSTART echo the_title(); PHPEND');

    thanks!

  38. Natasha @ 5 Minutes Jan 07 2012 at 6:54 pm - Reply

    Thank you so much for this! I have been wondering how to do this myself and it was giving me a headache!

    Thanks so much from a Pinning Blogger!

    Best wishes,

    Natasha.

  39. tara Jan 07 2012 at 7:23 pm - Reply

    I have tried to figure this out, but failed. I was hoping that someone smarter than me would figure it out. Thanks!

  40. Whimsy Couture Sewin Jan 08 2012 at 5:43 pm - Reply

    It totally worked for my blogger blog! It's awesome!

    Thank you soooo much for offering this code!!

  41. Shalamar Jan 10 2012 at 12:22 pm - Reply

    Thank you for sharing. I've shared this post on my blog and linked it back here!

  42. kansas Jan 12 2012 at 12:27 pm - Reply

    I have wordpress/prophoto and I can't figure out where to put this-I have looked into my editor and everything-still nothing. Prophoto has one that I can put the Pin It at the end of the post but I want to do each image 😉 Anyone installed it and it worked for them on wordpress/prophoto? If so please share with me!

  43. Amy Jan 13 2012 at 6:36 pm - Reply

    THANK YOU!!!! I've been adding a button manually to each of my blog posts for some time now, but it has been glitchy, so I wanted to find an automatic button. I've tried many people's tutorials, but yours was the only one that worked the way I wanted it to. Oh, I am on blogger and I just put the code under settings>posts>post template . I'm a happy girl tonight. Thanks again.

  44. Just One Donna Jan 17 2012 at 3:19 pm - Reply

    Thanks so much for your clear explanation and code that actually works. You were the 4th source I tried today and the only one that worked. I spent several hours on this today and am grateful for your assistance.

  45. Kristina Jan 19 2012 at 4:28 pm - Reply

    Thank you so much for sharing this info it really saved me a lot of time. I'm going to share this and link back to your website!

  46. Christy Jan 24 2012 at 11:53 am - Reply

    I went through like three different blogs that tracked me back to you and this! lol Thanks so much for sharring how to do it. Easy Peasy! 😉

  47. CrAzY Working Mom Jan 25 2012 at 7:23 am - Reply

    LOL, got this from Pintrest. Thanks!!! 🙂

  48. Maryellen Schuelke Feb 04 2012 at 4:15 am - Reply

    I actually desired to compose a small note to thank for you for some of the pleasant secrets you happen to be showing on this webpage.

  49. Sarah Feb 14 2012 at 10:58 am - Reply

    Hi, and thank you for this how-to!

    Question… will changing "aligncenter" to "alignleft" do what I hope it will do? 🙂

    Thanks!

  50. SAHMmy Says Feb 15 2012 at 7:45 am - Reply

    Worked like a charm! I used Option 1: paste into html view of each post. I inserted the code after each photo's code so the pin it button appears directly under each photo. Thank you so much–yours is the easiest tutorial for this I've seen!

  51. Скейтборди Feb 18 2012 at 10:17 am - Reply

    Лучший скейт-портал в Украине и странах СНГ !

  52. Emily Meyers Feb 21 2012 at 6:24 pm - Reply

    Thank you for your tutorial! I'm just not very tech savey and I'm wondering if you have an option that will make the button appear at the end of each post without me having to enter it every time? Thanks so much for your help!

    Emily

  53. Carol Lindberg Feb 25 2012 at 3:34 pm - Reply

    The tutorial I would like to find (again) is the one that 'fixes' all your pictures automatically so when you run your cursor over it, the frame around your picture appears and you have 'pin it' or others can 'pin it' at any time. I remember reading these instructions, but guess I didn't save them,,,,,,,,, can't find them. Help please??? Thanks, Carol cinez123@aol.com

  54. Carol Lindberg Feb 25 2012 at 3:35 pm - Reply

    The tutorial I would like to find (again) is the one that ‘fixes’ all your pictures automatically so when you run your cursor over it, the frame around your picture appears and you have ‘pin it’ or others can ‘pin it’ at any time. I remember reading these instructions, but guess I didn’t save them,,,,,,,,, can’t find them. Help please??? Thanks, Carol cinez123@aol.com

  55. Pinterest Invites Feb 28 2012 at 1:55 am - Reply

    Thank you for sharing, i will check here more often .

  56. Kermit Hassanein Mar 20 2012 at 10:13 pm - Reply

    Getting followers pretty much always equates to credibility. I feel like in current times that many celebrities are judged by how many follower they have. It's kind of wrong, but true. Whether it be pinterest, twitter, or anything really.

    I manage social media for a small business and I found a pretty unique website that "sells" followers. There are many websites that do this (surprisingly!) but this particular one has targeted followers too: http://www.mysocialanswer.com

    PS- Just don't tell your boss you bought the followers 🙂

  57. Matt Mar 21 2012 at 10:21 pm - Reply

    Awesome! I used this on my drupal site. Hardcoded for the moment, but hopefully it gets made into a module or incorporated into another.

  58. Alison Moore Smith Mar 28 2012 at 12:29 pm - Reply

    Thanks so much for this information. My old buttons stopped working and I had tried everything to get around the individual pin button. This was just what I needed.

  59. Alison Moore Smith Mar 28 2012 at 12:30 pm - Reply

    Should add, I used mine in a hook, just replacing my styled div tag with the generic one.

  60. Karyn Apr 18 2012 at 4:58 am - Reply

    Thanks so much. I've added this to my blogger account and I was wondering how you got the "Count" function to appear. I've been trying to find a way to get a count of my photo pins and re-pins on Pintreset and am not finding what I want. I know I can "Source" from my blog, but I want a count of each photo posted. I know you can, I just don't know how.

    Thanks so much.

  61. Kathy, Petticoat Jun May 06 2012 at 2:11 pm - Reply

    oh my gosh, this is awesome, I was referred from seven thirty three. I've been wanting to add a pin it button to my posts but did not want to edit my template because I'm a sissy and have never done that. This was so easy. thanks, Kathy p,s, what are trackbacks, pingbacks. You can tell I know nothing!

  62. liana Jul 01 2012 at 10:17 am - Reply

    this WORKS!!!!!! Thanks so much for sharing. I have spent most of my sunday morning trying to figure out how to get all of my pics to show up with a pin it button in my blog margin. this works and now my readers can pin from all of my uploaded images vs. just the one in the post!

  63. meegan Aug 08 2012 at 2:47 am - Reply

    Just read this, and tried it out on my blog-works perfectly!! Thanks SO much!!
    Meegan
    What Meegan Makes

  64. Blanche Alers Aug 14 2012 at 10:55 am - Reply

    Really? Exactly what could these people be imagining? This is unbelievablehttp://www.heraldtribune.com/article/20051019/NEWS/510190303!

  65. Deadra Brendal Aug 16 2012 at 9:47 am - Reply

    Someone necessarily assist to make significantly articles I might state. That is the very first time I frequented your website page and to this point? I surprised with the research you made to make this actual submit incredible. Fantastic activity!

  66. Autumn Jones Sep 09 2012 at 12:43 am - Reply

    Yes! Thank you so much! The html code pinterest generated for me wasn't picking up any of my photos and it was very frustrating–you fixed my problem! Thanks so much!

  67. Rohit Roy Sep 14 2012 at 5:22 am - Reply

    Awesome tips Thanks For Sharing
    i love it….:D

  68. Cory Guinther Oct 15 2012 at 11:51 pm - Reply

    Aw, this was an incredibly good post. Taking the time and actual effort to create a very good article… but what can I say… I procrastinate a lot and don’t manage to get anything done.

  69. Natalie Nov 19 2012 at 10:27 am - Reply

    Thank you, thank you, thank you!!!!
    You saved me a bunch of time. I was trying to follow PInterest’s goodie tutorial but I could not figure it out!!! I finally just googled it and your blog came up!!!

  70. aimee Dec 07 2012 at 12:08 pm - Reply

    Thank you for this! You’ve made it so EASY! I could kiss you 🙂

  71. Jassmine Dec 11 2012 at 1:59 am - Reply

    how it appear on the center or bottom image, not on out side image with big pinterest button? thanks for advice

  72. janet Dec 14 2012 at 11:16 am - Reply

    where is the orange code?
    i do not see it

  73. http://www.pascherfree.com/ Dec 28 2012 at 8:46 am - Reply

    I really like it when individuals come together and share thoughts.
    Great blog, keep it up!

  74. PrNewsNet Jan 07 2013 at 8:05 am - Reply

    works very well. thanks for that supporting

  75. Yee Coven Jan 26 2013 at 2:48 pm - Reply

    Hello my good friend! I want to say that this put up is remarkable, great penned and involve roughly all important infos. I would like to determine much more posts like this .

  76. Becca Whitham Mar 04 2013 at 8:04 pm - Reply

    Thank you. I love you. Will you marry me?

  77. Natisha Summa Apr 17 2013 at 9:06 pm - Reply

    I cherished as significantly as you will collect carried out right here. The sketch is enticing, your authored topic issue stylish. nonetheless, you command get purchased an impatience around that you would like be delivering the next. unwell unquestionably come extra formerly all over again considering that exactly the exact same nearly a lot generally inside event you shield this hike.

  78. Katie Jul 13 2013 at 10:21 pm - Reply

    I added this code a while back, and I’d love to remove it and install the hovering Pin It button instead, but I can’t for the life of me figure out where the code is to delete it! Do you have any suggestions? Thank you SO much!

  79. Franziska Jan 09 2014 at 10:39 pm - Reply

    Hmm is anyone else having problems with the pictures on this blog loading?
    I’m trying to determine if its a problem on my end or if it’s the blog.
    Any feedback would be greatly appreciated.

    Feel free to visit my homepage … seo rankings (Franziska)

    • Sarah Wilkerson Jan 09 2014 at 10:45 pm - Reply

      Hi Franziska! Double check that you aren’t accessing a secure (HTTPS) version of the URL; we’re having some issues with images for those trying to access the HTTPS version of the page. 🙂

  80. I will immediately clutch your rss feed as I can not to find your email subscription link or newsletter service.
    Do you’ve any? Kindly permit me recognize so that I
    could subscribe. Thanks.

    Also visit my homepage: get free instagram followers now

  81. Cam B Apr 16 2014 at 10:33 pm - Reply

    Hi,

    I was wondering where the pin it html is on this page? I can’t find it- maybe i’m just not looking hard enough…

  82. Rohit Roy Jul 06 2016 at 6:43 am - Reply

    Its Working but not working in all post…

  83. Christine Yoon Taylor Apr 01 2018 at 9:04 pm - Reply

    Hi there! This pin it code has been working great for me for years, until just this week. Any ideas why?

    Thanks!
    Christine @ My Epicurean Adventures

Leave A Comment

Follow

Follow this blog

Get a weekly email of all new posts.

Email address