How to Add a Pinterest Button to All Blog Posts

**UPDATE**
If you’re using the “new Blogger interface”
an updated version of this tutorial is available here!

With Pinterest gaining popularity (or becoming an obsession?) I wanted to add a Pin It button on all of my posts to make them easier for myself, and others, to Pin to their boards. This took some time. Most of the tutorials I found involved having to add the html code at the bottom of EVERY post I write. Not exactly what I had in mind. I put my (minimal) html skills to the test and after some blood, sweat and tears, figured it out! I wanted to share this tutorial because Pinterest is a huge promotional tool that I use every day.

1. Copy this code:

2. Once you’ve logged into your Blogger Account, go to the Design tab and select Edit Html. Be sure to check the “Expand Widget Templates” box.

3. Look for <div class=’post-footer’> and paste the code directly after that.

4. Save your Template and you should be good to go!

Note that this coding makes the Pin It button appear on the bottom right side of your posts. If you want the button on the bottom left side of your posts, replace the <div style=”float: right; margin: 4px;”> coding with just <div>.

You can also customize your Pin It button. I used the standard Pin It image that Pinterest supplied, but changed its color to match my blog. You can really use any image that you want. Once you create it, host it online, and put its link in place of http://img.photobucket.com/albums/v419/green_tea/pin.jpg in the coding above.

Adding a button to your blog is a great way to help readers keep track of their favorite posts from your blog! They can easily find, or be reminded of, DIY tutorials they want to try or products they want to add to their wishlist! Give this Pin It button tutorial a try!

Special thanks to ClickinMoms for getting me started on this post!
163 Comments
  1. Gina 6 years ago

    Love this – thanks so much for figuring it all out and explaining it. I am pinning it for future reference now :).

  2. ashley 6 years ago

    Love this! Thank you so much for this tutorial! I just added it onto my blog, so easy, and I have no clue what I’m doing when it comes to html.

    Ashley
    theinspiredlens.blogspot.com

  3. LC 6 years ago

    Genius! Done and done!

    Maybe you could also tell me how to get the “You might also like:” that everyone always has at the bottom of their posts? Thanks ๐Ÿ™‚

  4. Sher 6 years ago

    Wow thanks! I just added it. Great idea!

  5. Jamie Pilgrim 6 years ago

    Ah! What a clever idea! Thanks for the tut!

  6. Anzouya 6 years ago

    Great! I’ve just added! Thanks for this tutorial. Really useful! ๐Ÿ™‚

  7. Tutus & Tea Parties 6 years ago

    Yay,I’ve been wanting to do this! Thanks!

  8. BeadsAndBarnacles 6 years ago

    Hey thyanks for this. I have looked at putting on in before but only ended up with it on the right hand bar and not at the bottom of the post.
    this is much more useful, and a great colour choice :p

  9. Venassa 6 years ago

    I’m coming back to this post in the future when I have the time to do it. I have the pin it button on my toolbar which works great for me, but I know not everyone has it.

  10. _kArLy[*] 6 years ago

    what a good idea!! :] so glad i stumbled upon your blog! too cute! can’t wait to catch up on the rest of your posts! ♥
    -kar

  11. Courtney 6 years ago

    Wow! Way to go putting all that info together. You’re amazing. That couldn’t have been easy. Thank you girl!

  12. Excellent! Thank you!

  13. rachel 6 years ago

    thanks so much for sharing. that was so easy! i appreciate it you taking the time…

  14. August Rose 6 years ago

    Thank you! I put it on my blog!

  15. Jennifer 6 years ago

    I have to say…I literally spent hours today with another tutorial. I was so frustrated and stumbled on yours…THANK YOU!!!! In less than a few minutes it WORKS!!!
    goosebumpfactor.blogspot.com is now easy to pin!

  16. Miss Meg 6 years ago

    So awesome and so easy! Thank you Thank you Thanks you!!!

  17. Marilyn 6 years ago

    Awesome! Now if only I can figure this out for Typepad blogs ๐Ÿ™‚

  18. Anna of IHOD 6 years ago

    So I just googled how to do this and stumbled on your blog! So glad I did! Thanks for this and looking forward to following your lovely blog!

  19. Brenda 6 years ago

    Thank you so much!!!!! I couldn’t figure this out on my own!

  20. Emma 6 years ago

    Thank you so much for sharing this!!

  21. Laura 6 years ago

    LOVE IT!

    Thanks so much, a perfect tutorial.

  22. Katie 6 years ago

    Thank you so much for an awesome tutorial! I love pinterest and it’s great to have this button for people to use on my blog!!! ๐Ÿ™‚

  23. Alison 6 years ago

    I got this to work and I love it. Thanks so much!

  24. Sherri 6 years ago

    Thank you SO much! This was brilliant and so easy to do!

  25. You are a genius!!! Ever since I joined Pinterest I’ve been looking at a way to get this embedded in every post. All the tutorials I found were fiercly hard to understand & didn’t work. Thank you thank you for this! It worked. I don’t suppose there is any other coding to make it be at the top of a post though is there?!

  26. dreenie 6 years ago

    thank you thank you thank you!!!!!!
    i feel smart and savvy!!!!

  27. Megan 6 years ago

    Thanks for the tutorial! Really easy to follow. Love it. Just found your blog and I love it already! ๐Ÿ™‚

  28. RainbowsWithinReach 6 years ago

    I was able to follow the tutorial, and it’s probably that I have done something wrong, BUT it is pinning the image back to the URL of my blog, but not to the specific URL of the blog post itself.

    I know that this is a HUGE pin-etiquette issue (not having the pin go to the actual blog post.) Have I done something wrong???? Is there a way to specify??

    • Julie Ann 6 years ago

      Pinning goes to whatever page you are on. If you are looking at the general blog site, and not a direct post, it will only link to the blog.

  29. Sarti Apartmani 6 years ago

    Nice step by step tutorial. Easy to follow and done in a second. Cheers ๐Ÿ™‚

  30. Deb 6 years ago

    I’ve read several tutorials on this topic, and yours is the clearest and simplest fix I’ve read. Thank you so much for this clear tutorial – my button now works and looks great!

  31. Beth Ann 6 years ago

    So easy! So simple!
    Thanks so much for sharing!!!

    ❁Beth Ann❁
    Taming My Flock of Firsties

  32. Sharon 6 years ago

    Wow! It really worked….so simple!

    Thanks!

    Ms. McBee’s Kinderbugs

  33. papillon 6 years ago

    i was able to put it on my blog, thanks to you!

  34. Ah, thanks!! Can’t wait to try this!!

  35. Christina 6 years ago

    is there any way this can be done for WordPress?

    • Julie Ann 6 years ago

      Hi Christina, sorry I’m not familiar with the html coding of WordPress blogs.

  36. Tonya 6 years ago

    Thank you for the tutorial! I just added this to my blog!!

  37. This tutorial is excellent! Thank you so much. And I’ve included a link to it in my blog post today … I hope that’s okay …

    http://itallstartedwithpaint.blogspot.com/2012/01/who-are-you-calling-pinterest-dummy.html

    Just wanted to give you a heads up!

    Linda

  38. Busy Mom 6 years ago

    Thank you!!!!

    This worked…of course, now I have your green button. I will have to work on updating it, but I think the color works okay on my blog!

  39. eeee thanks julie!!!!! you rock! I think I perfected my button with your tips/code help! =) love it!

  40. The Youngs 6 years ago

    Thanks so much! I don’t have a clue about HTML and this was very easy to follow!

  41. Ellen 6 years ago

    Thank you so much! It worked!

  42. JamericanSpice 6 years ago

    Thank you! This is great!

  43. Sugar Mama Bakeshop 6 years ago

    Thank you thank you! So simple and helpful ๐Ÿ™‚

  44. New follower!! Found you through Gina of Acute Designs! I just did this!! THANK YOU for the super easy tutorial!! So helpful!! http://jessicandesigns.blogspot.com/

  45. You are awesome, thank you!

  46. Deni Breitenbach 6 years ago

    Which part of this directs it to Pinterest? I would love to have this for Pinify as well… any advise will be appreciated!
    Deni
    dbreitenbach@ gmail.com

  47. Geri Centonze 6 years ago

    found several tuts online to do this – yours was the easiest and it worked! Thanks!

  48. Lisa, motyok 6 years ago

    I finally got one to work. Thanks so much!

  49. Mamie Coffey 6 years ago

    All I can say is that I feel really silly. I can’t even find the page with those tabs to select Design> Edit HTML etc… The new blogger look has me all confused. Help!?

  50. mo 6 years ago

    Of the many tutorials I found and tried to figure our, yours was the one that worked for me and the easiest to follow. Thank you very much for sharing ๐Ÿ™‚

  51. Thank you thank you- just added it!!

  52. Kelley 6 years ago

    It didn’t work at all for me.

    • Julie Ann 6 years ago

      Please let me know if you have any specific questions.

  53. Tracey 6 years ago

    Thank you so much, this worked perfectly for me, and it’s SO much easier than having to add the button to every single post.

  54. Mitsy / ArtMind 6 years ago

    Fab tutorial! Thanks so much! Is there any way to add the button to old posts too?

    • Julie Ann 6 years ago

      Hi Misty! Tthe button should show up on all your posts.

    • Mitsy / ArtMind 6 years ago

      Oh, then I must have done something wrong. Will try again. ๐Ÿ™‚ Thank you for your reply!

    • Mitsy / ArtMind 6 years ago

      Oh yay! It worked – fab! I’m so happy – thank you again! ๐Ÿ™‚

  55. emily 6 years ago

    Rediscovered this post via Twitter… thanks!!

  56. Chrissy 6 years ago

    This is awesome! Thanks so much! xxx

  57. Kim Wedlock 6 years ago

    The most convenient thing about all of this is the button this code gives -does- match my layout ;P

  58. rachael 6 years ago

    thanks SO much for sharing ๐Ÿ™‚

  59. Virg 6 years ago

    Thank you for sharing, I have spent several hours trying to figure out and yours was the easiest. Can you tell me where and what code to add to have the count next to the pin it button. Thanks!!!

  60. xdamy63x 6 years ago

    Thank you so much for the tutorial post! I’m barely getting started with my blog and I’ve been trying to figure out how to post the Tumblr and Instagram “follow me” button and such. The Pinterest is a great add too!! I really appreciate it!! Glad I stumbled on your blog thanks to Janee over at http://yellowbirdyellowbeard.blogspot.com/ Looking forward to reading more of your posts! ๐Ÿ˜€

  61. Tisha 6 years ago

    Thanks for making this so easy.

  62. Megan Miller 6 years ago

    Thank you Thank you!

  63. Ashley Urke 6 years ago

    Thank you!!! So easy!!!

  64. rachael 6 years ago

    forgot to add… found your tutorial from a link at Yellow Bird, Yellow Beard. again, thank you ๐Ÿ™‚

  65. Devon 6 years ago

    Thank you so much! I found this on Pinterest and pinned it myself. I love that my blog posts will be so easy to pin from now on.

  66. Samantha 6 years ago

    thank you thank you thank you!!!!

  67. Tamytha 6 years ago

    Thank you so much for this!! I have some understanding of html and I’ve spent quite a bit of time the last couple of days trying to figure out how to add the pin button to every post without actually having to add it to every individual post. However, I either kept find info that wasn’t what I needed, or far beyond my understanding of html. You made it so understandable and easy to do. I’m definitely pinning this post, so I can refer to it later to help my friends. Again…THANK YOU!

  68. I’m so glad I found your easy tutorial! I have been wanting to add this button to my blog posts, have attempted to pay for someone to do it (got no response from them), and you have saved the day! Huge THANKS!!!!

  69. Thank you so much!!

  70. Elizabeth Gilmore 6 years ago

    Awesome! Thank you so much for sharing this easy “how to”.

    Best,
    e

  71. Loves Happy Hour 6 years ago

    Thanks so much for this tutorial! I was trying to do it on my own, but nothing would pin. This was very helpful!!

  72. Tuffet Whimsy 6 years ago

    Thank you SO MUCH for sharing! I was able to do it no problem!

  73. Tutuland 6 years ago

    Thanks so much for the tutorial. I just did it! I admit I was afraid to hit save- but it worked! I pinned my post and shared it on facebook.. Thank you Thank you.

    Allice

    http://www.tutulands.blogspot.com

  74. Annie 6 years ago

    Thank you for such easy directions! The hardest part was finding the section to paste the code after, and that just took a couple minutes. Yay!!

    Thanks!

    Annie @ Love.Laugh.Live : http://hildaanniew.blogspot.com/

  75. The Frugal Family 6 years ago

    I need help. LOL I followed the tutorial and I love that you made it so easy and it did put the little pin button on every post! Thanks!! However, when I hit the pin button, it show every image associated with the blog post, my logo, my creative, my other buttons, all kinds of stuff. Is that normal? I thought it would pin the actual blog post, not all the images.

    • Julie Ann 6 years ago

      Yes, the Pinterest button looks for any image on the page that you are on. So you can choose the photo you are trying to pin!

  76. Awesome. Thanks!
    Laura from Dishfunctional Designs
    http://dishfunctionaldesigns.blogspot.com/

  77. Is 6 years ago

    Thanks, it worked great!
    Greetings from Spain

  78. Joelyn Morgan 6 years ago

    Thank you, that was so helpful!!!

  79. Sam @ The Junk House 6 years ago

    Thank you so much! That was so much easier than the other tutorials I’ve read!

  80. Rebecca 6 years ago

    You’re amazing!! This is exactly what I’ve been looking for!!! ๐Ÿ™‚

  81. Erin A 6 years ago

    Will this show the counter as well? I added it, pinned something to see if it worked and the count isn’t showing. Any thoughts?

  82. Lyndsey 6 years ago

    Thanks, I have googled and checked out many others explaining how to add the pin it to each post. This was so easy the way you described it, and just what I wanted, a smal pin it without the counter. Perfect!

  83. This sounds sooo simple! The Pinterest buttons that I have tried don’t have any images in the box to select and have yet to successfully add even a blank box to my board. I have right click disabled on my blog. Is that why?

  84. Mrs. Jennifer Lynn 6 years ago

    When I click on a individual post to pin (so it will link back to that particular post & not just the homepage) when it does pin, I can click on the image & it will link me to the correct post. However when I click on the link at the top on the pin (ex: Jenn pinned 1 hour ago from http://www&hellip;.) that link doesn’t go to the correct post but yet the image does? The link has a “/” at the end of the url which messes it up, but when clicking the image it works perfectly.. Any suggestions?

  85. smithpeasinapod 6 years ago

    You are THE best <3
    http://www.smithpeas.com

  86. Angela Puccinelli 6 years ago

    Thank you so much! I had spent hours trying to find directions how to add this to my blog and they were all to confusing or just plain didn’t work.

    Thank you so much for your great information!

  87. Thanks! I had tried following someone else’s directions, placement and code but couldn’t get it. Yours worked great! Thanks so much for sharing.

  88. Off Our Wall 6 years ago

    A million thanks to you! I have NEVER done ANY HTML EVER and you’re directions were spot on. Thank you so much!

  89. Smriti 6 years ago

    Thank you so much for the directions!! They’re so spot-on!

  90. wendy 6 years ago

    Thank You! Amazing tutorial! You were very clear, confident and made it simple. Thank you!!!

  91. Elise Frederickson 6 years ago

    Thank you! I’ve seen other pin it button tutorials going around, but yours was the one that I could finally understand and was able to use. You’re the best!

  92. EmilyF 6 years ago

    Thank you for this tutorial! ๐Ÿ™‚

  93. Jan Blencowe 6 years ago

    Perfect! THANK YOU!

  94. sweet! this is approximately the 61st tutorial i tried to follow, but definitely the 1st I could wrap my brain around. thanks so much!!

  95. Debbie Kemp 6 years ago

    Cool, this actually worked!!

  96. Autumn Schneider 6 years ago

    I so want to do this, but I can’t find the edit widget tab you’re referring to. My blogger account used to look like the screenshot you posted, but now that it’s updated I can’t find it. Looking forward to your help! ๐Ÿ™‚

    • Autumn Schneider 6 years ago

      Okay, I found it and added it. Two things: I don’t entirely understand the explanation for how to change the color back to red. And, when I hit the button, it’s blank. Thanks in advance for a response. ๐Ÿ™‚

    • Julie Ann 6 years ago

      Hi Autumn! You can replace the pin it button with any image you’d like. Just host the image you want to use (using Photobucket, Flickr, etc) and replace the link to it with “http://img.photobucket.com/albums/v419/green_tea/pin.jpg” in the code I provided above.

    • Autumn Schneider 6 years ago

      Thanks! My more pertinent questions is how it’s linking to each image on your blog. I can only get it to link to one image since the template is a universal one. Does my question make sense?

    • Autumn Schneider 6 years ago

      Never mind! I got it! I had to add it into the html of each post. Thanks for all of your help!

  97. StitchinByTheLake 6 years ago

    Thank you! blessings, marlene

  98. Chris 6 years ago

    This is the ONLY tutorial I have found that works! You rule!

  99. Jeannie Partin 6 years ago

    This was AMAZING!!! Thanks!

  100. Thank you SO much! This is just fantastic! It worked perfectly on my first try! :]

  101. Inspire Me Heather 6 years ago

    Thank you for posting this and I’ve got it linked to my blogging post as well today!

  102. Ashley Rock 6 years ago

    This is great!! Thank You!!

  103. Jo Connolly 6 years ago

    THANK YOU!!!!

  104. Handmade in Israel 6 years ago

    I have spent hours trying to work this out to no avail. An Etsy teammate alerted me to your post and I solved it in seconds!!! THANK YOU!

  105. Handmade in Israel 6 years ago

    Just one teeeny tiny thing! I guess the column on my blog must be narrow and the Pin It button is now pushing the Google + button onto a second line in a kinda messy way. Could you possibly take a peek at my blog and see if you can suggest an html adjustment? Thanks so much!
    http://lisa-handmadeinisrael.blogspot.com

  106. Thanks so much for the tutorial! I just added, and it was a breeze!

  107. Sew Scrumptious 6 years ago

    Thank you. Just got it to work on my blog. I’m so impressed with myself (and you!!)
    http://sewscrumptious.blogspot.co.uk/

  108. Thank you! So simple even I could figure it out with your easy steps!
    http://www.dutchgirlsfavoritethings.com

  109. Worked like a charm!! Thanks so much for this awesome tutorial! I’ve been trying to figure this out for AGES!

  110. Emily Boyd 5 years ago

    Thank you so much Julie Ann, I’ve been trying and failing to get the coding onto my blog for ages – I don’t know why I couldn’t get it to work, but it hasn’t! And within two minutes of finding your blog I’ve got it up and running!

    Thank you!
    Em x

  111. Pinterest software 5 years ago

    I like this blog so much!!!

  112. My Life as Mommy 5 years ago

    Thank you so much! This was the third time I attempted to add a “pin it” button to my blog and yours was the only one that worked ๐Ÿ˜€

  113. Teresa Patterson 5 years ago

    Thanks so much for the great information. It worked the first time! I still can’t figure out how to do the same thing with the Follow Me on Pinterest button. Could you provide the code you used for that also?
    Thanks again,
    Teresa

  114. dang it, i’m so bummed. i can’t find the ‘post footer’ in mine! it just says, group footer. any tips or thoughts?

  115. Yay, I’m so excited – just installed mine!!! So happy you provided us with this how-to!

    Lesley (above) – the ‘post footer’ part is about a quarter of the way down from the top!

  116. Jennie Esplin 5 years ago

    THANK YOU, THANK YOU, THANK YOU!!! Your tut was by far the easiest one out there to follow ๐Ÿ™‚ Thanks for sharing, YOU ROCK!!

    Jennie {Cinnaberry Suite}

  117. Melissa 5 years ago

    This comment has been removed by the author.

  118. Lori 5 years ago

    Thank you so much for sharing this! Blessings, Lori

  119. Tia 5 years ago

    Thanks so much for sharing this ๐Ÿ™‚ I love pinterest and also use it daily!
    -Tia
    sewcalmama.blogspot.com

  120. Sugar Glitz 5 years ago

    How were you able to change the color of the pin it button? I want a button that says pin it and have no idea where to get one from and then how to change the color. TY!!

    • Julie Ann 5 years ago

      If you google Pin It Button you should get tons of images. I changed mine in Photoshop. Good luck! :]

  121. Sarah A 5 years ago

    You made it SO easy to do this. I did it in one go! Thank you for adding cuteness to my blog.

    Miss A’s Kindergarten

  122. Jenafur 5 years ago

    Thank you so much for this!! Much appreciated!

  123. Akshaya Borkar 5 years ago

    Thankyou so much for this. The tutorial is very each to follow ๐Ÿ™‚

  124. ana jacobs 5 years ago

    Thanks so much. It works great! http://www.anainstyle.com

  125. OMG!!! THANK YOU! I am completely inept when it comes to blogger. Your tutotial is EXCELLENT! I used it and it worked. Thank you !

    I am your newest follower.

  126. Awesome! Thanks for sharing this!

  127. Cally 5 years ago

    Thanks Julie Ann! You made it so clear and easy ๐Ÿ™‚

  128. sandytoesbride 5 years ago

    I just went to do this…but now that blogger has a different layout I cannot seem to figure out what to do. Can you help? Please!!

    • Galactic Lacquer 5 years ago

      When you’re in your Blogger dashboard, click “Template” on the left. Then click “edit HTML,” and when it asks if you’re sure, click “Proceed.”

      Then, make sure you check the box toward the top that says “Expand Widget Templates” so you can find the proper “post-footer” div! (Press ctrl + f so you can just type it in and find it!) Then paste the code right after it when you do ๐Ÿ™‚

      I hope it helps and works for you! I just added mine.

    • Julie Ann 5 years ago

      Hi Sandy, I posted an updated version of this tutorial using the new Blogger interface:

      https://julieannart.com/2012/07/how-to-add-pinterest-button-to-posts-in.html

  129. Angie Kantorowicz 5 years ago

    So helpful… my first time in the HTML code stuff. You made it not scary. Thanks
    http://makingthebasicsfun.blogspot.com/

  130. Rhonda Nelsen 5 years ago

    Thanks you so much!!!! I have tried a few tutorials and haven’t had any success! You are a genius!

  131. Queequeg 5 years ago

    Thank you!!! I put mine on the left side without problem, very clear tutorial ๐Ÿ™‚

  132. Alina Mihaela 5 years ago

    Thank you so much! So helpful!

  133. Christina 5 years ago

    Thank you so much♥

  134. Thank you very much!! works perfectly and the color combined with my blog, thanks!

  135. Brandy~GreyLaneHome 5 years ago

    Thank you so much for sharing.

  136. Kristy Bearfield 5 years ago

    Thank you sooooo much! I have been searching for code that works. yours is the first to work. Moved it to the left and found a slightly larger image.

  137. Laura Wagner Jordan 5 years ago

    This is absolutely wonderful! Thank you so much for sharing! I love it!
    Laura
    TIPS: Teach, Inspire, and Prepare Students

  138. Megan 5 years ago

    Great tutorial! It worked when I tried : )

  139. didnt work for me! i cant see it to show up anywhere. i fail.

  140. Tate Jones 4 years ago

    Thank you so much for sharing, worked like a charm! ๐Ÿ™‚

  141. Sara Rodrรญguez 4 years ago

    Hola, me gustaría este botón en mi blog, pero no se como ponerlo en la nueva plantilla HTML de Blogger. Puede ayudarme? Gracias!

  142. Becky 4 years ago

    I still can’t get it to work. My format in Blogger looks different from the one you posted. ARGHHHH! I am so frustrated. Any advice?

  143. Roxie 4 years ago

    My question is how do you add the pinterest button of your choice to your website. I mean the button you have under your picture to the left?

  144. This comment has been removed by the author.

  145. ~Brooke 4 years ago

    Awesome post! Thank you!

Leave a reply

Your email address will not be published. Required fields are marked *

*

Log in with your credentials

Forgot your details?