Thursday, October 6, 2011

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!

161 comments:

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

    ReplyDelete
  2. 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

    ReplyDelete
  3. 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 :)

    ReplyDelete
    Replies
    1. Try linkwithin.com

      They have a great widget for that!

      Delete
    2. I use linkwithin and it was very easy to install.

      Delete
    3. Thanks, I have been wanting to add that option to my blog also.

      Delete
  4. Wow thanks! I just added it. Great idea!

    ReplyDelete
  5. Ah! What a clever idea! Thanks for the tut!

    ReplyDelete
  6. Great! I've just added! Thanks for this tutorial. Really useful! :-)

    ReplyDelete
  7. Yay,I've been wanting to do this! Thanks!

    ReplyDelete
  8. 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

    ReplyDelete
  9. 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.

    ReplyDelete
  10. 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

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

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

    ReplyDelete
  13. Thank you! I put it on my blog!

    ReplyDelete
  14. 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!

    ReplyDelete
  15. So awesome and so easy! Thank you Thank you Thanks you!!!

    ReplyDelete
  16. Awesome! Now if only I can figure this out for Typepad blogs :)

    ReplyDelete
  17. 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!

    ReplyDelete
  18. Thank you so much!!!!! I couldn't figure this out on my own!

    ReplyDelete
  19. Thank you so much for sharing this!!

    ReplyDelete
  20. LOVE IT!

    Thanks so much, a perfect tutorial.

    ReplyDelete
  21. 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!!! :)

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

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

    ReplyDelete
  24. 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?!

    ReplyDelete
  25. thank you thank you thank you!!!!!!
    i feel smart and savvy!!!!

    ReplyDelete
  26. Thanks for the tutorial! Really easy to follow. Love it. Just found your blog and I love it already! :)

    ReplyDelete
  27. 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??

    ReplyDelete
    Replies
    1. 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.

      Delete
  28. Nice step by step tutorial. Easy to follow and done in a second. Cheers :)

    ReplyDelete
  29. 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!

    ReplyDelete
  30. So easy! So simple!
    Thanks so much for sharing!!!

    ❁Beth Ann❁
    Taming My Flock of Firsties

    ReplyDelete
  31. Wow! It really worked....so simple!

    Thanks!

    Ms. McBee’s Kinderbugs

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

    ReplyDelete
  33. Ah, thanks!! Can't wait to try this!!

    ReplyDelete
  34. is there any way this can be done for Wordpress?

    ReplyDelete
    Replies
    1. Hi Christina, sorry I'm not familiar with the html coding of Wordpress blogs.

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

    ReplyDelete
  36. 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

    ReplyDelete
  37. 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!

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

    ReplyDelete
  39. Thanks so much! I don't have a clue about HTML and this was very easy to follow!

    ReplyDelete
  40. Thank you so much! It worked!

    ReplyDelete
  41. Thank you! This is great!

    ReplyDelete
  42. Thank you thank you! So simple and helpful :)

    ReplyDelete
  43. 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/

    ReplyDelete
  44. You are awesome, thank you!

    ReplyDelete
  45. 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

    ReplyDelete
  46. found several tuts online to do this - yours was the easiest and it worked! Thanks!

    ReplyDelete
  47. I finally got one to work. Thanks so much!

    ReplyDelete
  48. 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!?

    ReplyDelete
    Replies
    1. Hi Mamie, I posted an updated version of this tutorial using the new Blogger interface:

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

      Delete
  49. 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 :)

    ReplyDelete
  50. Thank you thank you- just added it!!

    ReplyDelete
  51. It didn't work at all for me.

    ReplyDelete
    Replies
    1. Please let me know if you have any specific questions.

      Delete
  52. 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.

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

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

      Delete
    2. Oh, then I must have done something wrong. Will try again. :) Thank you for your reply!

      Delete
    3. Oh yay! It worked - fab! I'm so happy - thank you again! :)

      Delete
  54. Rediscovered this post via Twitter... thanks!!

    ReplyDelete
  55. This is awesome! Thanks so much! xxx

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

    ReplyDelete
  57. thanks SO much for sharing :)

    ReplyDelete
  58. 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!!!

    ReplyDelete
  59. 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! :D

    ReplyDelete
  60. Thanks for making this so easy.

    ReplyDelete
  61. Thank you Thank you!

    ReplyDelete
  62. forgot to add... found your tutorial from a link at Yellow Bird, Yellow Beard. again, thank you :)

    ReplyDelete
  63. 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.

    ReplyDelete
  64. thank you thank you thank you!!!!

    ReplyDelete
  65. 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!

    ReplyDelete
  66. 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!!!!

    ReplyDelete
  67. Awesome! Thank you so much for sharing this easy "how to".

    Best,
    e

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

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

    ReplyDelete
  70. 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

    www.tutulands.blogspot.com

    ReplyDelete
  71. 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/

    ReplyDelete
  72. 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.

    ReplyDelete
    Replies
    1. 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!

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

    ReplyDelete
  74. Thanks, it worked great!
    Greetings from Spain

    ReplyDelete
  75. Thank you, that was so helpful!!!

    ReplyDelete
  76. Thank you so much! That was so much easier than the other tutorials I've read!

    ReplyDelete
  77. You're amazing!! This is exactly what I've been looking for!!! :)

    ReplyDelete
  78. 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?

    ReplyDelete
  79. 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!

    ReplyDelete
  80. Anonymous10:40 PM

    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?

    ReplyDelete
  81. 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….) 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?

    ReplyDelete
  82. You are THE best <3
    www.smithpeas.com

    ReplyDelete
  83. 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!

    ReplyDelete
  84. 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.

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

    ReplyDelete
  86. Thank you so much for the directions!! They're so spot-on!

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

    ReplyDelete
  88. 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!

    ReplyDelete
  89. Thank you for this tutorial! :)

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

    ReplyDelete
  91. Cool, this actually worked!!

    ReplyDelete
  92. 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! :)

    ReplyDelete
    Replies
    1. 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. :)

      Delete
    2. 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.

      Delete
    3. 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?

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

      Delete
  93. Thank you! blessings, marlene

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

    ReplyDelete
  95. This was AMAZING!!! Thanks!

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

    ReplyDelete
  97. Anonymous5:03 AM

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

    ReplyDelete
  98. This is great!! Thank You!!

    ReplyDelete
  99. 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!

    ReplyDelete
  100. 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

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

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

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

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

    ReplyDelete
  105. 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

    ReplyDelete
  106. I like this blog so much!!!

    ReplyDelete
  107. 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 :D

    ReplyDelete
  108. 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

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

    ReplyDelete
  110. 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!

    ReplyDelete
  111. 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}

    ReplyDelete
  112. This comment has been removed by the author.

    ReplyDelete
  113. Thank you so much for sharing this! Blessings, Lori

    ReplyDelete
  114. Thanks so much for sharing this :) I love pinterest and also use it daily!
    -Tia
    sewcalmama.blogspot.com

    ReplyDelete
  115. 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!!

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

      Delete
  116. 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

    ReplyDelete
  117. Thank you so much for this!! Much appreciated!

    ReplyDelete
  118. Thankyou so much for this. The tutorial is very each to follow :)

    ReplyDelete
  119. Thanks so much. It works great! www.anainstyle.com

    ReplyDelete
  120. 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.

    ReplyDelete
  121. Awesome! Thanks for sharing this!

    ReplyDelete
  122. Thanks Julie Ann! You made it so clear and easy :)

    ReplyDelete
  123. 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!!

    ReplyDelete
    Replies
    1. 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.

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

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

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

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

    ReplyDelete
  126. Thank you!!! I put mine on the left side without problem, very clear tutorial :)

    ReplyDelete
  127. Thank you so much! So helpful!

    ReplyDelete
  128. Thank you so much♥

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

    ReplyDelete
  130. Thank you so much for sharing.

    ReplyDelete
  131. 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.

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

    ReplyDelete
  133. Great tutorial! It worked when I tried : )

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

    ReplyDelete
  135. Thank you so much for sharing, worked like a charm! :)

    ReplyDelete
  136. 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!

    ReplyDelete
  137. 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?

    ReplyDelete
  138. 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?

    ReplyDelete
  139. Anonymous5:32 PM

    This comment has been removed by the author.

    ReplyDelete
  140. Awesome post! Thank you!

    ReplyDelete

Thanks for the comment! I read them all and reply when I can. Please be sure your blogger account is linked to your e-mail so I can do so! (Tutorial on how to do that here: http://tinyurl.com/c6gh9fk) xo JA