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.
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!
Love this – thanks so much for figuring it all out and explaining it. I am pinning it for future reference now :).
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
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 🙂
Try linkwithin.com
They have a great widget for that!
I use linkwithin and it was very easy to install.
Thanks, I have been wanting to add that option to my blog also.
Wow thanks! I just added it. Great idea!
Ah! What a clever idea! Thanks for the tut!
Great! I’ve just added! Thanks for this tutorial. Really useful! 🙂
Yay,I’ve been wanting to do this! Thanks!
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
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.
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
Wow! Way to go putting all that info together. You’re amazing. That couldn’t have been easy. Thank you girl!
Excellent! Thank you!
thanks so much for sharing. that was so easy! i appreciate it you taking the time…
Thank you! I put it on my blog!
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!
So awesome and so easy! Thank you Thank you Thanks you!!!
Awesome! Now if only I can figure this out for Typepad blogs 🙂
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!
Thank you so much!!!!! I couldn’t figure this out on my own!
Thank you so much for sharing this!!
LOVE IT!
Thanks so much, a perfect tutorial.
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!!! 🙂
I got this to work and I love it. Thanks so much!
Thank you SO much! This was brilliant and so easy to do!
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?!
thank you thank you thank you!!!!!!
i feel smart and savvy!!!!
Thanks for the tutorial! Really easy to follow. Love it. Just found your blog and I love it already! 🙂
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??
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.
Nice step by step tutorial. Easy to follow and done in a second. Cheers 🙂
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!
So easy! So simple!
Thanks so much for sharing!!!
❁Beth Ann❁
Taming My Flock of Firsties
Wow! It really worked….so simple!
Thanks!
Ms. McBee’s Kinderbugs
i was able to put it on my blog, thanks to you!
Ah, thanks!! Can’t wait to try this!!
is there any way this can be done for WordPress?
Hi Christina, sorry I’m not familiar with the html coding of WordPress blogs.
Thank you for the tutorial! I just added this to my blog!!
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
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!
eeee thanks julie!!!!! you rock! I think I perfected my button with your tips/code help! =) love it!
Thanks so much! I don’t have a clue about HTML and this was very easy to follow!
Thank you so much! It worked!
Thank you! This is great!
Thank you thank you! So simple and helpful 🙂
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/
You are awesome, thank you!
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
found several tuts online to do this – yours was the easiest and it worked! Thanks!
I finally got one to work. Thanks so much!
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!?
Hi Mamie, I posted an updated version of this tutorial using the new Blogger interface:
https://unblushing.com/2012/07/how-to-add-pinterest-button-to-posts-in.html
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 🙂
Thank you thank you- just added it!!
It didn’t work at all for me.
Please let me know if you have any specific questions.
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.
Fab tutorial! Thanks so much! Is there any way to add the button to old posts too?
Hi Misty! Tthe button should show up on all your posts.
Oh, then I must have done something wrong. Will try again. 🙂 Thank you for your reply!
Oh yay! It worked – fab! I’m so happy – thank you again! 🙂
Rediscovered this post via Twitter… thanks!!
This is awesome! Thanks so much! xxx
The most convenient thing about all of this is the button this code gives -does- match my layout ;P
thanks SO much for sharing 🙂
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!!!
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! 😀
Thanks for making this so easy.
Thank you Thank you!
Thank you!!! So easy!!!
forgot to add… found your tutorial from a link at Yellow Bird, Yellow Beard. again, thank you 🙂
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.
thank you thank you thank you!!!!
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!
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!!!!
Thank you so much!!
Awesome! Thank you so much for sharing this easy “how to”.
Best,
e
Thanks so much for this tutorial! I was trying to do it on my own, but nothing would pin. This was very helpful!!
Thank you SO MUCH for sharing! I was able to do it no problem!
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
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/
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.
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!
Awesome. Thanks!
Laura from Dishfunctional Designs
http://dishfunctionaldesigns.blogspot.com/
Thanks, it worked great!
Greetings from Spain
Thank you, that was so helpful!!!
Thank you so much! That was so much easier than the other tutorials I’ve read!
You’re amazing!! This is exactly what I’ve been looking for!!! 🙂
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?
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!
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?
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?
You are THE best <3
http://www.smithpeas.com
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!
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.
A million thanks to you! I have NEVER done ANY HTML EVER and you’re directions were spot on. Thank you so much!
Thank you so much for the directions!! They’re so spot-on!
Thank You! Amazing tutorial! You were very clear, confident and made it simple. Thank you!!!
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!
Thank you for this tutorial! 🙂
Perfect! THANK YOU!
sweet! this is approximately the 61st tutorial i tried to follow, but definitely the 1st I could wrap my brain around. thanks so much!!
Cool, this actually worked!!
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! 🙂
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. 🙂
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.
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?
Never mind! I got it! I had to add it into the html of each post. Thanks for all of your help!
Thank you! blessings, marlene
This is the ONLY tutorial I have found that works! You rule!
This was AMAZING!!! Thanks!
Thank you SO much! This is just fantastic! It worked perfectly on my first try! :]
Thank you for posting this and I’ve got it linked to my blogging post as well today!
This is great!! Thank You!!
THANK YOU!!!!
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!
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
Thanks so much for the tutorial! I just added, and it was a breeze!
Thank you. Just got it to work on my blog. I’m so impressed with myself (and you!!)
http://sewscrumptious.blogspot.co.uk/
Thank you! So simple even I could figure it out with your easy steps!
http://www.dutchgirlsfavoritethings.com
Worked like a charm!! Thanks so much for this awesome tutorial! I’ve been trying to figure this out for AGES!
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
I like this blog so much!!!
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 😀
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
dang it, i’m so bummed. i can’t find the ‘post footer’ in mine! it just says, group footer. any tips or thoughts?
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!
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}
This comment has been removed by the author.
Thank you so much for sharing this! Blessings, Lori
Thanks so much for sharing this 🙂 I love pinterest and also use it daily!
-Tia
sewcalmama.blogspot.com
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!!
If you google Pin It Button you should get tons of images. I changed mine in Photoshop. Good luck! :]
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
Thank you so much for this!! Much appreciated!
Thankyou so much for this. The tutorial is very each to follow 🙂
Thanks so much. It works great! http://www.anainstyle.com
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.
Awesome! Thanks for sharing this!
Thanks Julie Ann! You made it so clear and easy 🙂
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!!
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.
Hi Sandy, I posted an updated version of this tutorial using the new Blogger interface:
https://unblushing.com/2012/07/how-to-add-pinterest-button-to-posts-in.html
So helpful… my first time in the HTML code stuff. You made it not scary. Thanks
http://makingthebasicsfun.blogspot.com/
Thanks you so much!!!! I have tried a few tutorials and haven’t had any success! You are a genius!
Thank you!!! I put mine on the left side without problem, very clear tutorial 🙂
Thank you so much! So helpful!
Thank you so much♥
Thank you very much!! works perfectly and the color combined with my blog, thanks!
Thank you so much for sharing.
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.
This is absolutely wonderful! Thank you so much for sharing! I love it!
Laura
TIPS: Teach, Inspire, and Prepare Students
Great tutorial! It worked when I tried : )
didnt work for me! i cant see it to show up anywhere. i fail.
Thank you so much for sharing, worked like a charm! 🙂
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!
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?
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?
This comment has been removed by the author.
Awesome post! Thank you!