Follow Kevin and Amanda on Pinterest.
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
187 Comments
Hello Amanda!!
I put the button on so easily thanks to you! Just one question… when people pin from this button it just pins a picture that returns to my blog homepage right? Is there anyway to make it pin it to that actual post so people don’t have to search? or is that impossible??
Blessings,
Jessica Stanford
Mrs. Stanford’s Class Blog
My TpT Store
Thank you! (I spent countless hours trying to figure out how to install a button, and this tutorial helped me do it in less than 10 minutes.) You’re kind of my hero right now. :D
Thank you so much! I have been trying other tutorials, but for some reason I couldn’t get them to work. Your’s worked the first time with no problems. I pinned your tutorial. :)
YAY!!!! I LOVE YOU! I’ve been searching for one of these that works and i’ve finally found it.. only thing is it just says pin it with no box, i saw up above you told someone there was something wrong with the pic..?? i can’t figure out what that would be, I used the pic you had in the post and saved it on picasa.. i’m wondering should I have removed the” ” from the “insert image url” here too?? it works tho.. i can’t ask for much more :)
Thank you so much! This was super helpful.
Thank you so much for this! I am so grateful for you and everyone else who posts these things! I have started my blog from scratch with no knowledge of how to even sign in!!! Now I have a pin it button! Especially good for me since I am an artist. Thanks again!
so grateful,
Melissa Lyons
Thank you a zillion times over!!
A big THANK YOU for sharing. Works perfectly on my blog! Cheers! :)
Thanks for the pinterest code! You might note that more complex themes don’t have a “single.php”, while such themes usually do have a place to put custom code, named something like “custom-functions.php”, or simply “functions.php”. I put your pinterest code in my site’s posts using ‘the_content’ filter hook.
Thank you so much for this code — I was actually able to do this, even though I know nothing about coding, and it worked like a charm!
The button is showing up on new posts, but because readers often visit my archives to access vintage embroidery and quilt patterns, I would love to be able to add your button to all of my past posts. Is this possible? My site is self-hosted Wordpress.
I am such a dope! The button is showing up on all the single posts, but I’m wondering if there is a way to make it appear at the bottom of each post when they are displayed one after the other on the main page. I hope this makes sense — I’m sure I’m not using the correct terminology.
I figured it out — I just pasted your code in the “Main Index Template” and now it shows up on the main page and all the single posts. Thank you so much!!
Thanks so much for this great tutorial. I’ve used it TWICE! {I had to re-do it when I changed my URL to a dot com.} Plus, I’m such a fan of your wonderful blog. I’ve been reading for years. In fact, some of my favorite recipes came from you! Thanks for everything.
Warmly, Michelle
Thanks for this info…I have been trying unsuccessfully with other google “help” to do this and it just wouldnt work. Got it the first try! Had to adjust the size of my Pin It button, but that was simple enough. :)
Awesome Amanda – your instructions were so easy. I’ve been meaning to do this for weeks, but kept procrastinating because I though it would be so time consuming. Not so, thanks to you. I just added this to our blog (just happens that it is hosted with blogger, so that was handy). I added it to our sidebar instead – just as easy. Thanks!
I know you have probably heard this a million times, but Thank you. I had a pin it button that looked great with a counter before, but when you clicked on it, there were no image options. Thank you for solving my problem. Oh, and your recipes are wonderful, keep them coming!!!!
Thank you so much for these great instructions. I followed your step by step and my button is up! You rock!
Thank you so much for everything you do! I have found your blog tutorials extremely easy to use and I love all your free fonts! You are 2 very special people!
awesome tute! worked like a charm. thanks! :)
Thanks so much! Just used this on my blog tonight and it works wonderfully. Thank you!
Hi! I think the template is different now. Mine doesn’t have a <div class= post footer part anywhere. sos!
Thank you, thank you, thank you!! I’ve tried this at least two other times from other tutorials and have never gotten it to work! Yours is so clear and easy, and it WORKED! Hooray!
Thanks Amanda! I was using the wordpress plugin to handle this and all of a sudden the darn thing quite working, now I’m using your method – works like a charm!
Stephanie from grinninglikeanidiot.com
You Rock!! Thanks for this easy tutorial !
Oh I can-t describe how grateful I am for this tutorial. It-s so great when the experts have understanding for the beginners(and it does not happen very often), thank you so much again!
Hi Amanda! {{Great name, btw!}} ;)
I use Blogger. I followed your steps. Everything got installed nicely, however when I clicked “Pin it” – it took me here: 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)})());
Which it says: Internet Explorer cannot display this page.” What do you think happened? Do you know what I did wrong? I used “direct link” from photobucket and now I’m not sure what to do. Thank you for your help and awesome tutorials!
-Amanda
Thank you I have been looking and looking and everything I found was saying something else and it never worked.
Wow, you guys are so amazing! Just started my blog and I needed all this wonderful info!! Thanks so much for sharing! Im off to read more of your posts! : )
This was VERY helpful! Thank you for taking the time to give us the run-down!
Thank you so much! I never could make this work until I found your instructions! YAY! :)
Hi there. I can’t find single.php in my Atahualpa either. Any ideas please? I just had a reader tell me she couldn’t find my Pinterest button, but it’s at the bottom of my posts w/ the other social media buttons. Thanks!!!
THANK YOU SO MUCH! This how-to works PERFECTLY! I’ve been trying this for FOREVER and this was so easy and helpful! Thank you again! :)
OMG, thank you! You are amazing! This was the easiest tutorial to follow EVER!
Thank you, thank you, thank you! I set this up on my blogger blog and it works beautifully.
What if someone want the button to show up in a different location on their posts? How would that be done?
Thank you for this tutorial. I followed your instructions for my blog on blogger. Everything worked, except that the Pin It icon is not showing, instead it is just a red x. It does work when you click on it but the actual icon is not appearing. I uploaded the icon to my flickr account.
Thank you sooooo much for this! I’ve been trying to figure out for months and this is the only tutorial that I could get to work. I found you through a google seach…Thanks! Yo
THANK YOU-THANK YOU-THANK YOU! I know it’s weird to say thank you 3 times but I really am excited to find an “easy” way to add a Pin-It button! I knew after I Googled “how to add a Pin-It button to my blog” and your tutorial showed up that I would have NO PROBLEM adding it. I also used your tutorial on how to add a signature ages ago.
I really appreciate all the helpful tricks and hints you’ve given me.
Thanks, I’ve been trying to figure this out for a week.
Thank you for this tutorial, it worked just fine! Love your blog :)
I love canon, I still get so much use out of my 1d classic
I AM SO HAPPY! Thank you a million times over for such an awesome PIN THIS feature! Love it!
Thank you so much for a great tutorial!
Thanks so much for this tutorial! It worked for me and I’m horrible at code stuff :)
Hi Amanda,
I got the pin it to appear on my site http://www.mypricelessfishers.com but I wasn’t able to get it to link to pinterest???
Any ideas?
Thanks for this tutorial. I use blogger and although I got a button to appear on my posts, the button has a red x and it says pin it next to the x. I cant get the pretty version of this button to show up. Could there be a broken link somewhere?? Please help. Thanks.
Thank you for this post. Can you please tell me how to add an ” Ask me” box to my blog on blogger?
Thanks!
Thank you so much for posting this! This is the easiest tutorial I’ve come across and it actually worked!
lindseyduffin.blogspot.com
GGGGGGGGGGGGGGGreat!!! I have been looking to add Pin it button on my blog but was having a hard time figuring it out. Who knew it was this simple?
Thanks for the helpful post.
Thank you so much for this tutorial! I featured your tutorials on my most recent post in appreciation!
Thank you for so many great tutorials! I managed to get the button to work but none of my images were pinable. I had to change a setting in Flickr in order to allow them to be pinned. Now I’m good to go! Thank you again!!!
I really like your writing style, superb info , thanks for posting : D.
Hello Amanda!
I have used and LOVED your tutorials and fonts for years. You are the reason my adoption blog looks so fabulous! You and I have had many late nights together.
I help my mom with her cooking blog and am trying to add a Pinit button to her posts. I have been able to add the button without any problem (great tutorial once again), but it pins to her home page, not an individual post. When you click the ‘pinit’ button a whole page of various photos (all from her blog) show up, and you can choose which one to pin – but they all go to the homepage.
Any idea how I can remedy this?
Thanks in advance for your advice and expertise!
The cooking blog: http://cgharris.blogspot.com/