If you scroll down to the bottom of any post here on Kevin & Amanda, you’ll see a “Pin It” button that you can click on to pin the image of your choice onto Pinterest. Adding a “Pin It” button of your own is so ridiculously simple to do! Here’s a quick tutorial that will show you how to automatically add a “Pin It” button of your own down at the bottom of every post on your blog, for Blogger, Blogspot, and self-hosted WordPress blogs.
Choose an Image
First you’ll need to choose the image you want for your “Pin It” button. Here’s the one I use. Feel free to right-click and save it to use for your button, too.
You can also do a Google Image search for Pinterest Icon for more button options.
After selecting your image, upload it somewhere so it will have its own URL, like Flickr or Photobucket. Here is an example URL:
http://i238.photobucket.com/albums/ff17/kevinandamanda/pinit.gif
Note: Don’t use the URL above — there won’t be enough bandwidth for everyone and you’ll get a red X instead of the button. Bummer.
The Code
Here’s the code you’ll use to place the “Pin It” button on your blog.
<a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"><img alt="Pin It!" style='border: none;' src="INSERT IMAGE URL HERE"/></a>
Paste this code onto your blog (I’ll show you where below), then replace the INSERT IMAGE URL HERE with the URL for your button.
Note: Be sure to place this exact code on your blog, or else it won’t work. You’ll also want to delete the “Read More” link that will appear underneath the code when you paste it.
Where to Paste (Blogger/Blogspot)
From your Blogspot Dashboard, click on the Design tab, then Edit HTML. Click the Expand Widget Templates checkbox.
Use CTRL-F to search for: <div class='post-footer'>. Paste the code right above that.
That’s it! Save and view your blog!
Note: If you need extra spacing between your post and the “Pin It” button, just add
<br /> above the “Pin It” button code. You can add as many as you want, above or below the code, for as much space as you need.
Where to Paste (WordPress)
For a self-hosted WordPress blog, navigate to your WordPress Dashboard, look for the Appearance heading, then click on Editor. From there, select Single Post (single.php).
Use CTRL-F to search for php the_content. It might look something like this:
<?php the_content(‘Read more »’); ?>. Paste the code below that. Save and view your blog!
Note: If you need extra spacing between your post and the “Pin It” button, just add
<br /> above the “Pin It” button code. You can add as many as you want, above or below the code, for as much space as you need.
Troubleshooting
What if the image doesn’t appear? What if I only see a red X? What if it only shows text and not the image?
Double check and make sure the Image URL is correct. It will just show text if there is something wrong with the image or the image URL. For Photobucket, use the Direct Link as your URL.
To test: Copy and paste the Image URL into a new browser window and confirm that the image appears, and just the image — not a webpage with the image on it. If just the image appears, that is the correct Image URL.
Good luck and Happy Pinning!
Find me on Pinterest: http://pinterest.com/kevinandamanda/
More from Amanda:
Share:
Filed Under: Blog Design, Tutorials
Follow Amanda on 
101 Comments
Yeah! Am I the first comment? I guess waking up at 3am paid off! I do visit blogs a lot, but I don’t have a blog. I hae seen the pinterest button a few times, and never paid much attention to it. I just went to that website, pinterest. Okay, I am sorry if I sound dumb, but what is it about? Or, why would someone like me want to visit that site? Thanks Amanda! –Mindy
Mindy it is soooooo addictive ~ wonderful pictures of food, decortating, craft ideas, fashion – you name it! But then you click on the pictures and go to the original site to find the recipes or the directions of “how to” and DYI!! If you are on Facebook then use it as your sign in and start playing around with it ~ you can set up your own favorites and “Pin it” (save) to make them yours (sharing is the key word here) and you can Pin It to Facebook too. It is FUN!!!!!!
Thank you Amanda!
Mindy, I am kind of new to Pinterest myself. It’s a website where you can “pin” web pages you like so you have them all in one place to refer back to. In the words of the person who got me hooked “anything and everything you love that you can find on the internet can be pinned to your profile in one spot. You will never lose those items you loved so much you found while browsing online!”
Hope that helps.
Amanda,
Is it possible to follow your boards? I love looking at Pinterest! So many great ideas. I do think I am addicted! Thanks! Barb S
Hi Barb! Here is my Pinterest board:
http://pinterest.com/kevinandamanda/
See you on Pinterest!! :)
Oh HOLY COW. Thank you so much. Here, I thought I was adding a “pin it” button using the “help” menu from Pinterest — but I was going about it all wrong — and no images were coming up. I just followed your steps, and got the button on my blog — then tried pinning and got IMAGES!!!!!! Success. Thanks Amanda! Have a great day! ~Sally
Thank you so much for sharing Amanda, I’ve been wanting to do this!
Thanks, Amanda! This tutorial was helpful although I just want to let you know that the Blogger platform looks quite different now and it might be confusing to someone who isn’t sure where to find the ‘Edit Template’ tab. Anyways, I found it for mine but had to poke around first. Have a great day! :)
Oh, that’s weird! Since I don’t use Blogger, I just created an account yesterday to do the tutorial. So glad you found it anyway! :)
Thanks for the help. I was trying to figure this out yesterday and figured out how to get 1 image pinned in my posts but you helped me get it so that the reader can choose what to pin. This came at the perfect time!
Kendra
Amanda,
I don’t know if you can help with this… I’ve got my “pin it” button installed, but it shows up AFTER my LinkWithin gadget. I wish it would show up BEFORE. I’ve tried removing the LinkWithin gadget, and adding after the pin button — then re-adding the LinkWithin — not on my template, but in my Edit Layout. Any tips for me? I’m not much of an HTML girl — just following your instructions… =) Thanks! ~Sally
Think I’ve figured it out. Thanks anyway! =)
Yay! I’m glad you figured it out!! How did you do it?
I’m having the same problem! Sally, what did you end up doing to fix it?
Amira, Sally replied later in the comments, here is a link to her comment (currently comment #32)
Sally’s Reply
THANK YOU! This tutorial is so easy and I’m so excited that you took the time to post this for the rest of us!
Thank you SO much for the tip!
I’ve been following your blog for over a year and LOVE LOVE LOVE it :)
Great post! Quick question though (because I just did this) is there any downfall to using a pinterest button plugin instead on wordpress? It was even simpler than all this by literally just installing and activating and then choosing the placement to be either top or bottom of the post.
Hi Gina! I’m sure the plugin is totally fine, but for optimal Wordpress speed and performance, my host recommends using as few plugins as possible. So if I can do something myself, I do, instead of using a plugin. :)
Gina, I was wondering where you found the plug-in and what is it called (the one I found doesn’t work and neither does this tutorial since I have Wordpress blog that is not self-hosted)? I think I would go the plug-in way too, if I can get it work! ;)
Tami- I don’t believe plugins work on non-self hosted WP sites. But the one I use is called Pinterest “Pin It” button.
oh, shoot. I do have a self-hosted blog…got the terminology mixed up. :-\
Hi Amanda, You read my mind! I was just thinking the other day, “How can I get a Pinterest icon on my site?” Thank you so much for sharing this information and taking the time to explain it – your tutorials are always so helpful! And especially thanks for giving us the go-ahead to use the “Pin It” icon on our own blogs/websites! Have a great day!
Once again you save the day! I’ve been curious how to do it but honestly, too lazy to look it up! :-\
This may be a silly question. My wordpress ‘Appearance’ menu doesn’t seem to have an ‘Editor’ option. Am I missing something?
Yes, I agree with Barb – are you on Pinterest? – I would love to follow your pins as I love your blog!
I seems as Pinterest got rid of their search button and you can now only search for people through Facebook.
Hi Anne! Here I am on Pinterest:
http://pinterest.com/kevinandamanda/
See you on Pinterest!! :)
Thank you so much for the clear, easy explaination!
Thank you so much for the clear, easy explanation!
Thanks so much for the tutorial! It worked!!! Love your blog and thanks again for your step-by-step visual!
Thank you soooo much Amanda. I have been trying to figure this out for a while and you helped so much!
Hi Amanda!
I did a search and found this link: http://mayura4ever.blogspot.com/2011/06/how-to-position-elements-on-blogger.html which showed me how to reposition the html code for my “pin it” button.
I’ve noticed that it (the button) moves around a little for each post — depending on if my post ends w/ a photo, another button, or text — but that’s okay w/ me – as long as it’s before the LinkWithin.
Thanks for checking back w/ me! ~Sally
Thank you! Very helpful! Just added mine above linkwithin as well!
To get space between the button and your post, like Amanda mentioned, just add before the code and it will add a break between your post and the button. I added two breaks so there is a cushion of space between the post and button!
With a little work from us all, we all figured it out!!!
can u have a pinterest account without a twitter or Facebook account? i did get an invite but have no idea what to do
You have the best tutuorials!!! Thank you so much.
This is fabulous! Thank you so much! I have been adding the pinterest manually to each post everytime I make one. Now I don’t have to. Thank you SO much!
Thanks for the great tutorial. I have been trying to figure this out for a couple of weeks! I did everything that you said on my blogger account but I am not sure how or when the PIN IT button will appear. Could you advise. I wasn’t sure if i needed to do something or if it should just appear.
thanks:)
Hi Anna! If it was done correctly, the Pin It button will show up immediately.
Thanks, Amanda! Love this! I’d +1 it, if I could. In fact, that would make another great tutorial for you to write. ;p
Thanks so much! This was incredibly easy and so helpful!
Thanks! Just a question, if I want it on every post from now on, do i need to do it manually each time or does it automatically work?
BTW, just got in my samples of swerve, what did you think of it?
Hi Brenda! As the tutorial says, it will automatically add a “Pin It” button down at the bottom of every post on your blog. Hope this helps! :)
Thank you so much! I have tried this several times with other tutorials, but they didn’t work! Now it works, BUT my pinit button just says pinit..no red ,,no box. weird! wonder why it did that? any ideas??
It will just show text if there is something wrong with the image or URL.
first instruction question: right click Pinit button and then what? where do I save it (Iphoto?) (Downloads?) and then what do I do with it and where do I put it? Is this so that readers of my blog can easily pin my pictures to their Pinterest boards? That’s what I assume. Also how do you add Pinterest to the share buttons at the bottom of my posts along with facebook, google etc.? This would be great to do. Thanks for getting me started.
Hi May, I just rightclicked the image and saved it to my desktop. It really doesn’t matter where you save the image, just save it in a place you will remember. Then, using Amanada’s recommendation, I uploaded it to photobucket so that I could copy the code. I just followed the rest of her instructions above! Hope that helps!
Thank you much for sharing this, i just added mine!! {I had been wanting to do that for a while :)}
Thanks for the VERY useful tip! I was wondering how they got that button on every post. It’s going on my next one for sure.
Thanks for responding. I used your pin it image and saved it to my desktop then uploaded it to Flickr. Any ideas? thanks!
I would double check and make sure the Image URL is correct — it will just show text if there is something wrong with the image or the image URL.
To test: Copy and paste the Image URL into a new browser window and confirm that the image appears, and *just* the image — not a webpage with the image on it. If just the image appears, that is the correct Image URL.
Hope this helps! :)
Thank you so much! I am going to work on this little project tonight… Would you be open to sharing how you put “Leave A Comment” on the bottom of your posts in Google Reader? I think that is a stroke of genius! Would love to know how you did it! Thanks so much :) -Catherine
Hi Catherine! Check out step number 3 here:
http://www.kevinandamanda.com/whatsnew/tutorials/9-quick-steps-to-a-better-blog-experience.html
Hope this helps! :)
Hi Amanda,
Thanks for another great tutorial. And perfect timing – just yesterday a bunch of us on Blogger were trying to figure out how to install the pin it button on each of our posts. Your instructions were easy to follow and worked – sort of. Unfortunately this is the same issue we’ve been struggling with – and haven’t solved yet.
So a heads up for those on Blogger who use the instructions above:
If you’re on the homepage and click on the pin it button in a post, the pin you create will link back to the homepage, NOT the permalink page the image you pinned is located on.
And even if you use the ‘read more’ page break option, the pin it button will still show up on each post on the homepage (right below the ‘read more’ link), so if somebody clicks on the pin it button while still on the homepage, the pin will link back to the homepage, not the permalink page.
Maybe there’s a way to somehow have the pin it button only appear on permalink pages? Although it wouldn’t be a great solution for those of us with several short blog posts always appearing on the home page.
We’re still trying to hopefully figure out a perfect solution on our end. In the meantime, thanks again for all the wonderful and helpful things you blog about! :)
thanks amanda, got it to work :)
Thanks so much for this tutorial. I love how simple and easy you make your blogging tutorials. I never worry that I will mess up. :)
Officially addicted to your site! Added the Pin it LOVE IT!
I have Wordpress and I was able to follow along until I tried to find the code mentioned. Within the single php the code you mentioned didn’t exist for me? Any suggestions?
Thanks so much for the tutorial!!!
I have been trying to do this all week. I just see your post came up in search. It worked perfect and i learned something about coding.
Thanks.
Great tutorial! I followed it exactly and in less than 10 minutes my pin it button was up and running! Thank so much!
Hi Amanda! :) Thanks SO MUCH for the tutorial! Can I ask how to get the pin it image above my “link within” widget at the bottom of each post…and centered? Thank you!
To center, add centering tags around the code, like this:
<center>INSERT THE PIN IT CODE HERE</center>
And here’s how another reader moved her Pin It button above the Link Within widget:
http://mayura4ever.blogspot.com/2011/06/how-to-position-elements-on-blogger.html
(Check out comment #30)
Hope this helps!! :)
Hi Amanda!!
Thanks so much for your instructions!! I’m just starting to blog and my photos aren’t that great but I still think it’s neat to have a pin it button. I enjoy reading your blog and learning lots from ya!
Thanks again!!
Thank you so much for this Amanda! I have been wanting to add a Pinterest button for a while, and the AddThis one seems to break my code for my other sharing tools! With your easy steps and pictures I’ve added it successfully!
Thank you! I posted about this on my blog with a link to this post and gave you two credit!
http://thesmallthings89.blogspot.com/2012/01/how-to-add-pin-it-button-to-your-posts.html
THANKS!!
I just added a pin it button to my blog and it was so easy to do with your tutorial. Thanks so much!
Thank you for the tutorial! I tried it and it worked perfectly! :)
Thanks for this! I was able to add a Pin It button to my Blogger very easily. :-)
Hi!…I’ve created a blog where I will include all the Freebies and Tutorials related to Blog design, of course with link to the authors…Here is yours. Thanks for the tutorial
http://everythingblogdesign.blogspot.com/2012/02/kevin-and-amanda-add-pin-it-button-to.html
FINALLY, I got it, not all images can be resized and used…that was my problem. I did not get a cutsie one like I wanted, but it will have to do…thanks!
Okay, so I am so frustrated;) I followed the directions to a tee and I did get a “pin it” button. However, it just says “pin it” w/ an X in a box. There isn’t actually a red pin it button. I am not very computer savvy for sure. I just want to cry at this point. Do you have any suggestions? I want it to say “Follow Me On Pinterest” and I am using photobucket. Please Help. Thanks
Double check and make sure the Image URL is correct. It will just show text if there is something wrong with the image or the image URL. For Photobucket, use the Direct Link as your URL.
To test: Copy and paste the Image URL into a new browser window and confirm that the image appears, and *just* the image — not a webpage with the image on it. If just the image appears, that is the correct Image URL.
Hope this helps! :)
Thank you for getting back to me…I will try it and see if it works:)
So do you have to create a Flickr or Photobucket account or page to “save” the pin it button? I don’t have either, and I’m just wondering before I create it. Thanks!
Hi Susannah! You have to have somewhere to upload and save the image, so you will have an online URL to the image so everyone can see it. It doesn’t have to be Flickr or Photobucket, but those are the two most popular sites. :) You could probably upload it to your blog as well. Hope this helps!
Hi Amanda
Thanks for sharing this wonderful tutorial. Is there any way I can have the Pin it button above the post itself? Right now I’m adding it manually and it’s a little time consuming. There’s a “pin it” plugin for Wordpress, but it still shows up at the end of the post :(
Hi Roxana! For the Wordpress instructions, try adding above “the content” instead of below. Hope this helps! :)
it’s working! Thanks Amanda! You’re the best!
Yay! So glad it worked :)
Thank you so much for this! I have been looking for instructions everywhere!
Thank you soooooo much! I’ve been trying to do this with the instructions on Pinterest and only succeeded with the follow me button on my sidebar. This is awesome! Yes, let’s feed the Pinterest frenzy even more, huh? lol!
I went to SEVERAL websites and blogs trying to find out how to do this and yours was the ONLY one that made any sense. THANK YOUUU!!!!!!
Ok, so one question… Where do I get the URL for your button? Not quite sure what that means here. I tried my blog URL and that didn’t work. What am I doing wrong?
Do you know how to resize the image? I found a great photo from here:
http://www.buymodernbaby.com/IconPinterest.jpg
and on that site it’s a cute little button, but on my blog it’s HUGE! I don’t know what happened!
Thanks!
I use Photobucket.com to resize all of my images and its free to sign up!
Thank you soo much! I’ve been racking my brain trying to add a PinIt button to my blog and your advice was the only one that worked for me! You have saved me many grey hairs!
Thank you!! That was so easy and so helpful!
Thanks Amanda.
I did everything correctly and have a nice little “Pin It” button on the bottom of each post now, but my readers have been saying it’s not working.
So I went to view my blog and clicked on the “Pin It” button myself and a little pop up window comes up that says
“Sorry, we can’t see any big images or videos on this page” and doesn’t load the Pinterest page.
What’s up??
I think it might have something to do with the link — it’s opening it in a new window. The new window is blank, therefore it doesn’t see any images or links on the page to pin. I noticed that all the links on your page, even the Archives, will open in a new window. Is there a setting on your blog that makes it do that?
Yes, there is.
I just changed it to do that a few weeks ago because anytime you’d click on a link within one of my posts it wouldn’t open a new window, therefore readers would lose their place.
This is where I got the code to open all links in new windows…
http://blogging.nitecruzr.net/2008/02/make-all-links-open-in-new-window.html
Am I going to have to disable this if I want the Pin It button to work??
There’s no way to have both?
You can try adding a target attribute. It will attempt to overwrite the “open in new window” code you have installed.
At the beginning of the “Pin It” code you have this:
a href="javascript:void ...Try adding this:
a target="_top" href="javascript:void ...I am not sure if this will work, but it’s worth a try. Good luck!
I did take that link out of my HTML and now the PIn It button is working fine… I just wish there was a way to have both!
Thanks Amanda!
It worked! Thank you Amanda!!!
Thank you so much for the tutorial. I have been trying to figure this out for a while. :)
Awesome. Thanks.
This is a great tutorial!! Thank you for your easy explanation!! Works perfectly :)
Thanks so much for this great tutorial–so easy to follow.
Hi Amanda,
I tried following your steps and have not had any success. I do have the new version of blogger dashboard so things did look a little different. I’m wondering if I’m missing a bit of the code because when I look at the post it runs into the adds on the side. Could you copy the code into a comment box for me?
Maybe that will help.
Thanks so much!
pam
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?
This is great! Thank you so much for sharing!