January 26, 2012

Add a “Pin It” Button to Your Posts

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.

How to add a Pin It button to your blog

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 &raquo;’); ?>
. 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/



See More Posts About: Blog DesignTutorials

195 Comments






133
Jessica May 19, 2012 at 12:15 pm

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

Reply

134
Valerie May 26, 2012 at 10:08 am

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

Reply

135
Angi @MakingMayhem May 28, 2012 at 12:49 am

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

Reply

136
Shelly May 30, 2012 at 2:53 am

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 :)

Reply

137
Kristen June 6, 2012 at 11:08 am

Thank you so much! This was super helpful.

Reply

138
Melissa Lyons June 22, 2012 at 3:08 pm

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

Reply

139
Kristina @ Love & Zest June 26, 2012 at 12:25 pm

Thank you a zillion times over!!

Reply

140
Amber June 30, 2012 at 12:04 pm

A big THANK YOU for sharing. Works perfectly on my blog! Cheers! :)

Reply

141
Brian Maso July 3, 2012 at 1:10 am

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.

Reply

142
Martha July 5, 2012 at 10:38 am

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.

Reply

143
Martha July 5, 2012 at 10:51 am

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.

Reply

144
Martha July 5, 2012 at 12:08 pm

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!!

145
Michelle at Faith, Trust, & Pixie Dust July 8, 2012 at 5:41 pm

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

Reply

146
Susan July 13, 2012 at 3:10 pm

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

Reply

147
Sue July 17, 2012 at 1:10 pm

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!

Reply

148
HotPinkThread July 19, 2012 at 11:33 am

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!!!!

Reply

149
Deb August 2, 2012 at 12:54 pm

Thank you so much for these great instructions. I followed your step by step and my button is up! You rock!

Reply

150
Marianne August 6, 2012 at 5:05 pm

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!

Reply

151
shannon August 6, 2012 at 10:37 pm

awesome tute! worked like a charm. thanks! :)

Reply

152
Holly August 17, 2012 at 10:13 pm

Thanks so much! Just used this on my blog tonight and it works wonderfully. Thank you!

Reply

153
Candace Stevenson August 18, 2012 at 2:40 pm

Hi! I think the template is different now. Mine doesn’t have a <div class= post footer part anywhere. sos!

Reply

154
amy August 27, 2012 at 5:21 pm

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!

Reply

155
Stephanie September 10, 2012 at 2:37 pm

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

Reply

156
disneypal September 12, 2012 at 5:59 pm

You Rock!! Thanks for this easy tutorial !

Reply

157
Irena September 13, 2012 at 4:10 pm

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!

Reply

158
Amanda September 23, 2012 at 4:00 pm

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

Reply

159
Nychole September 28, 2012 at 12:14 pm

Thank you I have been looking and looking and everything I found was saying something else and it never worked.

Reply

160
Dierdra October 2, 2012 at 9:43 am

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! : )

Reply

161
Chrissy October 17, 2012 at 12:04 pm

This was VERY helpful! Thank you for taking the time to give us the run-down!

Reply

162
DeeDee October 20, 2012 at 6:23 am

Thank you so much! I never could make this work until I found your instructions! YAY! :)

Reply

163
Adrienne November 2, 2012 at 6:12 am

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!!!

Reply

164
PolishPals November 8, 2012 at 4:37 pm

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! :)

Reply

165
Bailey November 17, 2012 at 5:38 pm

OMG, thank you! You are amazing! This was the easiest tutorial to follow EVER!

Reply

166
Sinea Pies November 23, 2012 at 12:08 pm

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?

Reply

167
Amanda December 3, 2012 at 9:26 pm

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.

Reply

168
Vanessa December 20, 2012 at 1:49 pm

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

Reply

169
Valerie December 23, 2012 at 8:53 am

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.

Reply

170
Chef Kendra January 2, 2013 at 9:58 am

Thanks, I’ve been trying to figure this out for a week.

Reply

171
Kathleen@Home Wasn't Built In A Day January 11, 2013 at 1:53 pm

Thank you for this tutorial, it worked just fine! Love your blog :)

Reply

172
Connie Seneca January 12, 2013 at 9:12 am

I love canon, I still get so much use out of my 1d classic

Reply

173
jenny at dapperhouse January 13, 2013 at 12:38 pm

I AM SO HAPPY! Thank you a million times over for such an awesome PIN THIS feature! Love it!

Reply

174
Katie @ Simply Clean Living January 14, 2013 at 1:25 pm

Thank you so much for a great tutorial!

Reply

175
Kathleen@ Home Wasn't Built In A Day January 18, 2013 at 3:03 pm

Thanks so much for this tutorial! It worked for me and I’m horrible at code stuff :)

Reply

176
Tina January 26, 2013 at 4:39 pm

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?

Reply

177
LittleBatsOfCraft January 26, 2013 at 10:59 pm

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.

Reply

178
Dalia February 8, 2013 at 2:02 pm

Thank you for this post. Can you please tell me how to add an ” Ask me” box to my blog on blogger?
Thanks!

Reply

179
lindsey March 1, 2013 at 10:42 am

Thank you so much for posting this! This is the easiest tutorial I’ve come across and it actually worked!

lindseyduffin.blogspot.com

Reply

180
jason March 1, 2013 at 4:31 pm

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.

Reply

181
Cari March 10, 2013 at 5:03 pm

Thank you so much for this tutorial! I featured your tutorials on my most recent post in appreciation!

Reply

182
Kimberly March 27, 2013 at 1:32 pm

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!!!

Reply

183
info April 6, 2013 at 5:14 am

I really like your writing style, superb info , thanks for posting : D.

Reply

184
Candise April 6, 2013 at 9:45 am

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/

Reply

185
Pamela July 4, 2013 at 12:39 pm

Hi Amanda and Kevin.. I’ve been using this code for a while now with no problems.. as of yesterday I was trying to install the button on a clients blog and it would not work, then went to try it on several of my “tester” blogs, same thing.. I even copied the code off of my own blog (because it’s showing and working fine there), and installed that code onto a test blog and nothing.. it will not work. I’m wondering it’s there is something different because of all the new changes to Blogger? Do you have a new code for the new Blogger? Thanks for any help. Pamela

Reply

186
Chelsea ONeal December 10, 2013 at 8:03 pm

I am having trouble with the image being HUGE does anyone know how to fix that???

Reply

187
swasthi January 19, 2014 at 2:21 am

Hi Amanda and Kevin , thanks for this. its working on my blog

Reply

188
Andi January 27, 2014 at 2:49 pm

thank you for your tutorial, I have been looking for 3 days trying to figure this out. I at one time figured it out , but forgot. Pinterest widget board doesn’t explain very well where to post code. I kept finding code that went at the end of post body – which made it at the bottom of page. I really appreciate your help!! I had to resize my pin it button several times. Wish someone would give correct dimensions on making your own pin. Thank you.

Reply

189
Trung Do March 1, 2014 at 7:16 pm

Thank you so much Kevin and Amanda, you save my life <3 i spent many days to find out how to add that button and now i found it on your blog xD You're the best! Thank you again and sorry for my bad English :D

Reply

190
Natalie June 30, 2014 at 7:04 pm

Thank you for this informative, simple and easy-to-follow post. It worked on the first try! Love your site, I’ve bookmarked it! :)

Reply

191
Dimitrije October 4, 2014 at 9:05 am

This is great tutorial, pinterest is great for better SEO ranking. I combine this tutorial not with my Blogger blog instead with my WordPress site. It works :) I rank my wordpress site well with Yoas SEO plugin :)

Reply

Comment Pages: « Previous12

Leave a Comment