Tuesday, May 10, 2011

Add a Pinterest Pin Button to Your Blog

Earlier today Pinterest posted about their new buttons. This included a bit of code to create a PinIt button that will initiate a pin for a specific image. That got me thinking.... how great would it be to have a button that I could put on my blog that would behave just like the bookmarklet and initiate a pin where the user can still pick what image they are interested in pinning? This would be great for encouraging others to pin your creations, and help spread the word about your blog.

Now, there may already be an easier way to do this. I am certainly no expert at Pinterest (or Blogger for that matter). But here is the little bit of code I used in Blogger to embed the happy little Pinterest button you an see in the lower right of this post. Fell free to swipe this, or to point out any existing official code from Pinterest itself to do this.

First, you need to be in "Edit HTML" mode to edit the HTML of your blog's template directly. I suggest backing up your template before making any changes. You may need to check "Expand Widget Templates" depending on where you put the button. 
Add this piece of Javascript right before the </head> tag:

<script type='text/javascript'>
function pinit() {
    var e= document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39;+Math.random()*99999999);
    document.body.appendChild(e);
};
</script>

Next, add this line where you want the button to appear on your blog. I added mine to the post footer.

<a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' target='_blank'/>

Lastly, add this to the CSS to make your button pretty. You may also want to modify or add to this CSS to get the button positioned just how you like it where you decide to put it. UPDATE: This code goes at the end of the CSS section. If you're not sure what part that is, try searching for '/* Footer' without the quotes. Pasting it right after the block of code it is a part of should work fine. If you don't have a Footer section, try search for '/* Content' instead. The new code being added is in bold below.


/* Footer
----------------------------------------------- */

.pin_it_button {
    overflow: visible;
    width: 51px;
    height: 26px;
    margin-right: 1px;
    font: normal normal normal 11px/normal Arial, sans-serif;
    background-color: transparent !important;
    background-image: url("http://assets.pinterest.com/images/pinitbutton_sprite.png") !important;
    color: #CD1F1F !important;
    background-position: 0px 0px !important;
    background-repeat: no-repeat no-repeat !important;
    cursor: pointer;
}


.pin_it_button:hover {
    background-position: 0px -27px !important;
}

It's by no means perfect, and is just the result of me messing around for a little bit, but I hope that this is useful to someone.

UPDATE: I've had some inquiries on where to insert the button code to get it to look exactly like mine. I will try to give enough detail to mimic mine below, but all the code you need to have for the button to work is above. This is strictly to get your footer layout to mimic my own.


Just to be clear, I'm about to describe where to put the 2nd bit of code from above.


Do a search for '<!-- quickedit pencil -->' without the quotes. You should see a bit of code that looks like below:


  <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>


We are going to insert some code in between the second and third lines of this section. You should change the above block to look like this:


<!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span>


      <span class='post-icons' style='float: right;'>
          <a class='goog-inline-block share-button pin_it_button' expr:onclick='&quot;pinit(); return false;&quot;' target='_blank'/>
      </span> 
      
      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div> </div>

The new code is in bold, the rest of the difference is just spacing to make it easier to read.


I hope this helps. If you have any questions, don't hesitate to leave a comment - they're emailed straight to me. :)

** UPDATE 6/11/12 - Due to the high volume of traffic to this post, I can no longer help troubleshoot each person's individual issues attempting to add this button - each problem takes a long time to troubleshoot, and I just can't afford to take that much time away from my family any longer. It has worked for 100s of people - these instructions do work. If you are having issues, please double and triple check you followed each step precisely. One common gotchya is extra characters from people copy-and-pasting straight from my blog - so if it's not working you may also want to try typing in each section of code yourself. Also check for any typos.

<3 Kelsey

248 comments:

  1. Hi Kelsey - thanks for this code!

    I haven't been able to make it work yet...could you tell me exactly where to place it in the post footer and CSS? (It was easy to place the first piece of code as I had the head tag to search for...but I am lost as to where to place the next two pieces of code.)

    I'd like my PinIt button to appear where your does, so I should be able to use the same placement.

    Thanks!

    ReplyDelete
  2. Hi Kelsey - thanks for this code!

    I haven't been able to make it work yet...could you tell me exactly where to place it in the post footer and CSS? (It was easy to place the first piece of code as I had the head tag to search for...but I am lost as to where to place the next two pieces of code.)

    I'd like my PinIt button to appear where your does, so I should be able to use the same placement.

    Thanks!

    ReplyDelete
  3. Kelsey this is genius - thank you so much!
    I've put it on my blog but because I have magazine style, I'd like ppl to be able to pin it from the homepage - the URL that is used for the individual post - currently it just through as the homepage unless you open up the post IYKWIM?

    ReplyDelete
  4. Liss,

    Yes, I know what you mean, and I agree, that would be ideal, I just haven't been able to take the time to figure out how to do it yet. I'm betting I can get it to work with some javascript, but it'll take me some time messing around with it, and will be more complex than just calling Pinterest's hosted script. I'll be sure to make another post when I get around to it. :)

    Kelsey

    ReplyDelete
  5. Thank you so much! I tried doing it using Pinterest own code but that just came back with errors. I have now added the button all lined up with my add this buttons at the bottom of my posts and it looks great.

    ReplyDelete
  6. this is amazing! thanks for sharing!! I'm definitely going to pass your blog along :)

    ReplyDelete
  7. Testing replying to my own comment. Please ignore.

    ReplyDelete
  8. A bit more testing.

    ReplyDelete
  9. Testing replying to my own comment, please ignore.

    ReplyDelete
  10. I sure hope this isn't spamming anyone, just trying to figure some stuff out with my commenting system.

    ReplyDelete
  11. For those also asking this question - I updated the post above to include the specifics.

    ReplyDelete
  12. I'm glad you liked it, and thanks for passing me along! ^_^

    Kelsey

    ReplyDelete
  13. Hi Marianne,

    Glad I was able to help. I think the reason the code straight from Pinterest
    wasn't working is that you have to fill out some bits in the sample code
    that link the button they created to a specific image to be pinned. At the
    time I wrote this post, I couldn't find any code from Pinterest itself for a
    generic button that acts the same as the bookmarklet and lets you pin any
    image on the page. I didn't want to have to specify what image to pin every
    post, and also wanted to allow my users to select which image in a post they
    like best to pin anyways, so this works better for me. :)

    Kelsey

    ReplyDelete
  14. Hi Kelsey,

    Thanks for this post!

    Are you still using this code for your button? I'm trying to add a PinIt button to our site but have been unsuccessful so far. I tried using their default code from their "Goodies" page but it only displayed the picture of the button that didn't do anything.

    Then I tried implementing your code samples from above, but nothing displayed. Just to make sure I put it in the right place, I then put it into a div tag with a border... The bordered box shows up but not the button and there appears to be no link...

    We're on a self hosted Wordpress site so I suppose that cold make a difference...

    Are you still using this code?

    Michael

    ReplyDelete
  15. I am still using this code, but this code is specific to the Blogger
    platform.

    I am sure it could be adapted to be used on Wordpress, but I unfortunately
    have no experience with Wordpress to provide any guidance.

    I would start by trying to understand how their button works when added
    properly (where you have to specify a specific image for it to be associated
    with), then understanding how their bookmarlet works, and try to modify
    their button to call the bookmarklet javascript instead of the javascript
    that comes with their default Goodie. You can look at what I have, but mine
    has all been escaped and set up to work in the Blogger templates, so it's
    not a perfect match to what you need.

    Kelsey

    ReplyDelete
  16. Hi Kelsey...thank you so much for this post!! I have it all working great..however the image is the image from google mail??? I have not idea what I did wrong. I even went and changed the background image to one that I'm hosting...and still hasn't changed. Please help ;) Thank you!

    ReplyDelete
  17. Nevermind...figured it out! Silly me didn't put it in the right space after the */ thank you again!

    ReplyDelete
  18. Glad my experience could be of use. :)

    Thanks for stopping by!

    Kelsey

    ReplyDelete
  19. You are awesome!! Thank you!

    I just got Pinterest yesterday, do you have any idea how to search to find your blog content/pictures on Pinterest? I'm curious as to how many of my recipes are getting pinned.

    ReplyDelete
  20. I do in fact. :) You can do so from a special url. Just replace my blog's url with yours in the link below:

    http://pinterest.com/source/kelseyprantis.blogspot.com/

    The down side is there seems to be some kind of bug so it's not showing all of mine like it used to. Not sure if it extends to everyone or is just me, but I am sure they'll get around to fixing that either way. :)

    Kelsey

    ReplyDelete
  21. Kelsey,
    I don't know you, but I love you. I have zero experience with HTML or editing my template, but you explained that perfectly. I have been searching for a button so that my readers could pin my posts if they wanted and couldn't find anything. Then I found your tutorial. Worked like a charm. Thank you so very much.

    ReplyDelete
  22. So glad I could help! ^_^

    <3 Kelsey

    ReplyDelete
  23. I'm with Heather, dude, I love you, Kelsey! Works great!
    THANKS!

    ReplyDelete
  24. These were fantastic instructions! Thank you so much!! YOU ROCK!

    ReplyDelete
  25. So glad I could help! ^_^

    Kelsey

    ReplyDelete
  26. thanks for the great instructions!

    ReplyDelete
  27. The text around the code in my blog post describes where to put the code. Is there a particular piece of the code that you are struggling to figure out where it belongs? If you are more specific, perhaps I can provide additional direction. :)

    Kelsey

    ReplyDelete
  28. Yay Kelsey!!! You made AMAZING instructions! I got it running on both my blogs! Rock on lady!

    ReplyDelete
  29. After trial and error, I reread your perfect instructions and realized I didn't do it right. So I tried again and it worked! Thank you so much for taking the time to post this -- it's extremely helpful!

    ReplyDelete
  30. Very clever Kelsey! Have just shared a link to this post with my Twitter followers and will add a link to my post (which has a link on how to do it for WordPress) too! Cheers to HiLLjo (two comments below) for alerting me to this!

    ReplyDelete
  31. yes, thank you! thats how I found this blog :-)

    ReplyDelete
  32. Thanks - also found this through the blog stylist (via google)

    ReplyDelete
  33. OMG! You are brilliant! Thank you for posting this and taking the time to school the rest of us. I am tweeting it and google +1 it! Thanks so much!

    ReplyDelete
  34. Thanks so much for sharing! ^_^

    Kelsey

    ReplyDelete
  35. Tina Ihas Sugar Shack QuiltingSeptember 20, 2011 at 11:08 PM

    Spectacular! Thank you!

    ReplyDelete
  36. Thank You!!
    www.untrucparjour.blogspot.com

    ReplyDelete
  37. Oh my goodness! A million thanks to you! This is perfect!

    ReplyDelete
  38. Excellent. Great instructions and results. Thanks a lot. Also great header.
    DrDan
    www.101cookingfortwo.com

    ReplyDelete
  39. Hmm, I have something weird happen. I have a custom template, so no footer section for the CSS. I did have a Content section, though, so I put the css code there. Everything works, except...instead of the pinterest image (button), I have a repeat image of my other share buttons o__O. I verified the url for the pin it button and it seems correct.

    ReplyDelete
  40. THANK YOU!!!! It took a little fiddling, but after I read really Thoroughly and made sure i was in the NEW interface, it worked. thanks for this wonderful tutorial.

    www.AYoungWivesTale.com

    ReplyDelete
  41. Hmm, do you have a link where I can check it out?

    Kelsey

    ReplyDelete
  42. It's the link in my message. I left it showing the wrong image, so you could see. I'm sure it's just the CSS code being in the wrong place, but I can't figure out which :P
    Thanks so much for your help

    ReplyDelete
  43. Ah sorry, for some reason the link wasn't in the email my comment system sent to me. Looking at it now.

    ReplyDelete
  44. Hmm, when I look at the source for your page, I see some extra characters around the css in the .pin_it_button css class.   to be specific. Could you try removing all whitespace (spaces, newlines, etc) between the lines of css code for that one css class?

    ReplyDelete
  45. I had noticed them too and removed them (several times!), but they keep coming back. The   codes are non-breaking spaces. I didn't think they should make any difference, but who knows--I'll try removing them again.

    ReplyDelete
  46. Yay, it's working. I found the offending space at the beginning of the url for the pin image! I had to check the source code to find it, because it looks like a normal space in edit.
    Thanks for making me look again! :D

    ReplyDelete
  47. Glad I could help. :D

    (Also, doh! I meant to mention that one too....oops....)

    Kelsey

    ReplyDelete
  48. LIke many others have said, THANK YOU SO MUCH! It was so easy to follow, and I quickly tired of using the Pinterest code and having to add my image url, and filling in the "blanks" to apply to my blog post. Thank you so much!

    ReplyDelete
  49. Glad this is working better for ya! :D

    Kelsey

    ReplyDelete
  50. THANK YOU SO MUCH!!!!

    ReplyDelete
  51. Thank you!! I've just added a Pin It button using your excellent instructions. :)

    ReplyDelete
  52. I can't seem to find the anywhere. i am so dizzy from looking through it all so many times. what happens if i don't have tat for some reason. I'm afraid to push save, LOL!

    ReplyDelete
  53. It is the quickedit pencil.... My kids used the laptop before me and the keys are sticking...nice! Sorry!

    ReplyDelete
  54. I'm a little confused what you are trying to ask. Mind rephrasing it?

    ReplyDelete
  55. Perfect! Thank you!

    ReplyDelete
  56. Well, I followed all of your instructions and I seem to be the only one that can't get it to work. I went back over it several times to no avail. Then I thought maybe it was the second part...the < !-- quickedit pencil--> I can't find it anywhere in the HTML. I'm not that savvy in this area, but this is a lot more difficult than I thought. But, I must be doing something wrong.

    ReplyDelete
  57. Finally figured it out! Thank you for the help!

    ReplyDelete
  58. Glad you were able to figure it out! Mind if I ask what was wrong? Perhaps it might help someone else in the future...

    Kelsey

    ReplyDelete
  59. Thanks !! Thanks !! This works as expected !! Perfect
    Lili

    ReplyDelete
  60. Possibly. I've never made anything post only, and figured while I'd prefer the links be made from the posts, any link to my blog is better than no link if they are only hitting the main url. I imagine techniques used to make other items post only may be extended to this, but I have no idea how. :/
    Kelsey

    ReplyDelete
  61. Thank you Kelsey. It worked for me!! Great tutorial. ✿◠‿◠

    Kelly

    ReplyDelete
  62. thanks so much for this!!!

    ReplyDelete
  63. Kelsey,
    Great idea and so nice of you to create it. I can't see mine after I follow your directions. It won't show in the preview nor on any new posts. Can you advise me as to what I may be doing incorrectly? It would be greatly appreciated!

    ReplyDelete
  64. I'm not sure without more information. Do you have a link to the blog you've tried to add it to so I can take a look?

    It's working for others, so is it possible there was a mistake in following the directions somewhere?

    Kelsey

    ReplyDelete
  65. Thanks so much for posting this! I put it on my blog following all your directions, including the update at the bottom and it worked great!

    ReplyDelete
  66. ALRIIIIIIIIIGHT!! Woo-Hoo!! You ROCK girlfriend!! TY!!!! I love Pin it and wanted a way to promote my cards. This is perfect!

    ReplyDelete
  67. Thank you so much! Worked perfectly!

    ReplyDelete
  68. Great info, but not working for me. I have followed all the directions and tried three times. Bummer.

    ReplyDelete
  69. Do you have a link I could look at to try to help troubleshoot?

    Kelsey

    ReplyDelete
  70. I'm so sorry, my comment got all messed up because I was trying to add in the HTML that had confused me! Ugh... I hope it still makes sense and can help someone!

    ReplyDelete
  71. Hi Kelsey,
    I tried to follow and install the codes above, but I ended up with a "M" button instead of the actual "Pin it" button. When I click on this "M" button, the page opens with any images I have on my blog, plus my header sidebar tags?? Any thoughts???

    ReplyDelete
  72. Do you have a link where you have done this so I could check this out?
    Kelsey

    ReplyDelete
  73. thank you for creating this post! i got it to work on my blogger blog too!!

    ReplyDelete
  74. So, I'm having a terrible time doing this! After an hour I still cannot get it to work. I think I may be copying/pasting the codes in the wrong places. Is there anyway you can help??? I would truly appreciate it!

    ReplyDelete
  75. i seriously have zero skills with the computer but i figured it out!! thanks so much!

    ReplyDelete
  76. Thanks! I have no skills in this...followed directions, button is showing up but does nothing when clicked
    http://eatlittleeatbig.blogspot.com/2011/12/recipe-for-blue-cheese-pistachio-and.html

    ReplyDelete
  77. Thank you!! I followed your directions for the latest update and added the 'Pin it' after /* Content because I couldn't locate /* Footer and it worked beautifully.

    ReplyDelete
  78. Thank you! This is awesome! I was able to do this successfully following your excellent directions, too!

    ReplyDelete
  79. excellent, your steps are perfect. Check my site here...
    http://www.coolshityoucanbuy.com/

    ReplyDelete
  80. Kelsey...thank you for all the details! I had some issue as I am not adept at this at all...but I hung in there. Your additional directions helped me put the button on my blog! Thank you!!!!!

    ReplyDelete
  81. mine is showing up as a white box with an M in it, not the Pin it button. can you take a look and offer any help?
    http://www.momvstheboys.com/

    ReplyDelete
  82. could you take a look and see if you could tell me where I should move the code to so the pin it button is more in line with my other social media icons? pretty please? http://www.momvstheboys.com/

    ReplyDelete
  83. soooooooooo epic awesome lol.. i cant wait:

    http://pornterest.net/

    ReplyDelete
  84. great directions, thanks!

    ReplyDelete
  85. Thank you for sharing Kelsey... worked a treat!

    ReplyDelete
  86. Hi Kelsey! I think I followed the directions like you said, but for some reason the Pin It button doesn't do anything when I click on it. It does appear in my blog, though. Any thoughts?

    My blog address: http://acquiringallskills.blogspot.com

    ReplyDelete
  87. happywhimsicalheartsDecember 25, 2011 at 3:41 AM

    Thanks so much for this! Worked a treat ;-)

    ReplyDelete
  88. Took me a couple of tries but I've FINALLY got it!! Thank you!

    ReplyDelete
  89. Thank you so much! So rewarding...I did it!

    ReplyDelete
  90. Thanks so much!!! I was able to add them! feel free to check them out www.KristiesFotos.blogspot.com

    ReplyDelete
  91. Hey Kelsey! Can you email me at candcnails @ gmail . com

    ReplyDelete
  92. Thank you for this great explanation! I have never worked in html code before, but you made this so easy and I was able to add the button to my blog: zoohouseblog.blogspot.com. Thank you!!!

    ReplyDelete
  93. Thanks so much! Worked like a dream!

    ReplyDelete
  94. AWESOME. Thank you so much for sharing this!

    ReplyDelete
  95. Thanks for doing this Kelsey. I"m following you now. Hope you'll come by and follow on mine too.

    Coleen, an American in Ukraine
    www.vintageterrace2.blogspot.com

    ReplyDelete
  96. Thank you Kelsey! SO much easier than adding the code to every post!! Can I buy you a cup of coffee or a Diet Coke??? :-)
    www.onegoodthingbyjillee.com

    ReplyDelete
  97. awesome! thank you so much for this tutorial. it was a breeze!

    ReplyDelete
  98. thanks so much for sharing! it worked!

    ReplyDelete
  99. You are ABSOLUTELY BRILLIANT! Thank you so much for showing how to add this button, directions were spot on and easy to follow!

    ReplyDelete
  100. Hi there, thanks for the tutorial! I'm trying this, but can't find the quickedit pencil text to insert the second bit of code by. Any ideas why it wouldn't be in my blog html? Thanks!!!

    ReplyDelete
  101. Make sure the box that says "Expand Widget Templates" is checked. Otherwise you won't see it.

    ReplyDelete
  102. YEAH!!! I got it to work. I had to have my programmer husband help me, but I did most of it myself. Thank you so much, Kelsey. Oh, and for you non-programmers out there...to search use "Control F." Just learned that today!

    ReplyDelete
  103. Awesomeness...thank you so much!

    ReplyDelete
  104. Thank you so much! Your instructions worked perfectly.

    ReplyDelete
  105. Thank you so much for this tutorial, it worked great!

    ReplyDelete
  106. Thank you! This is fabulous info! I got it to work and I'm thrilled. Any chance you could tell us how to get the button to appear at the top of each post rather than at the bottom? Many thanks in advance.

    ReplyDelete
  107. eeks! i can't even find where "head" is! ? sooo not html literate! please help! thanks

    ReplyDelete
  108. Thank you! I got it working. I did have to go to the old blogger interface to find where to edit the html. But once I did that, it worked. Thanks!

    ReplyDelete
  109. I followed your directions (hopefully) but I don't get a Pin it button. I get a little red M. Any idea what I did wrong? http://confessionsofanover-workedmom.com

    ReplyDelete
  110. THANK YOU!! We love our Pin It button on our blog! Just like Ellen I got a little red M when I first applied it, but I did it all again (do all of the code) and then it worked! Thanks for sharing your talents!
    http://www.mnsaid.blogspot.com

    ReplyDelete
  111. mine doesn't either so I hope there is an answer soon.

    ReplyDelete
  112. Wow, it worked like a charm. I haven't done any html in years and was able to follow your instructions. Thanks much!

    ReplyDelete
  113. This is excellent! Thank you so much!

    ReplyDelete
  114. Thank you so much for this!!!!

    ReplyDelete
  115. Thank you - that was perfect! I wasn't finding the quickedit pencil piece until I read through the comments and expanded the widget code... after that it was perfect! Thanks!

    ReplyDelete
  116. I cannot believe I actually did something techy on my own! Thank you so much for your very clear and helpful instructions! This made my day!!!

    ReplyDelete
  117. Hi, Can I add this as a Gadget in my Blogger sidebar? If so, which portion of the html would I use? (I'm a little nervous about changing my template.) Thanks! Jewels

    ReplyDelete
  118. KarenbellessapetersenJanuary 24, 2012 at 9:19 PM

    Hi, I am having the problem of nothing happening when I click on it. Can you help? Thanks! Karen
    karenbellessapetersen@gmail.com

    ReplyDelete
  119. Gaby,

    Thanks for posting this help to others. I edited your post above so hopefully now everyone can see the html you were trying to explain rather than having that html rendered in the comment. :)

    Hope the button is still working out!

    <3 Kelsey

    ReplyDelete
  120. Class2classy,

    Where exactly it goes could depend a bit on how your footer already looks. For me I put it right before this line in my template:

    <div class='post-share-buttons'>

    Hope that helps?

    Kelsey

    ReplyDelete
  121. I may be able to help - can you provide a link to the page where you tried and couldn't get it to work so I can take a look? Or, short of that, copy and paste what is in your template designer and email it to me at krw1243@gmail.com?

    ReplyDelete
  122. Hi Susie,

    I took a look at the link, and when I look at the html for your page, I don't see the following code, which needs to go right before </head>

    <script type='text/javascript'>
    function pinit() {
    var e= 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);
    };
    </script>

    Try adding that and then see if it works. If not, then I will take another look with it added.

    Kelsey

    ReplyDelete
  123. Looks like you figured this part out. Sorry I wasn't able to help you quicker! Things have been crazy with the holidays and family visiting and getting ready to move out of state. :)

    Kelsey

    ReplyDelete
  124. If you want it to move up next to your Google +1 button, you just need to put it right after that in the html, so right after this code:

    <div id="___plusone_0" style="height: 20px; width: 90px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><iframe allowtransparency="true" frameborder="0" hspace="0" id="I1_1327515721619" marginheight="0" marginwidth="0" name="I1_1327515721619" scrolling="no" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Fwww.momvstheboys.com%2F2012%2F01%2Fwordless-wednesday-mcds-linky.html&size=medium&count=true&annotation=&hl=en-US&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3D4gjhn8l2tEI.en.%2Fsv%3D1%2Fam%3D!B1ibRDb03dOIZCLhng%2Fd%3D1%2F#id=I1_1327515721619&parent=http%3A%2F%2Fwww.momvstheboys.com&rpctoken=732170148&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" style="width: 90px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 20px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="-1" vspace="0" width="100%" title="+1"></iframe></div>

    You also may need to take this part out of the button if you don't want it to align to the right of your post:

    style="float: right;"

    Please let me know if you have any more questions!

    Kelsey

    ReplyDelete
  125. Looks like you got it to work because I just went to your site and your pinit button is working great. Sorry I couldn't be of help sooner!

    ReplyDelete
  126. Hi Kelli,

    If you are still having a problem, I would be happy to take a look if you can provide me with a link to your site.

    Kelsey

    ReplyDelete
  127. How can I help you Carrie?

    Kelsey

    ReplyDelete
  128. Jill,

    Thanks for the offer, but I just gave up soda and coffee makes me sick. :D But I am glad I could help! :)

    Yup, that float attribute tells the browser where you want the button to line up on the page. I like mine on the right, but people can use center to put it in the middle, or left to push it to the very left, or leave the float out altogether and it will just flow with the other elements around it. :)

    Kelsey

    ReplyDelete
  129. My first suggestion is exactly what leslie said, make sure the "Expand Widget Templates" checkbox is checked. If it still isn't there, then it may be your template layout is different than the standard one. If it still isn't there, try sending me a link to your blog and I can take a look and see if I can figure out where it should go.

    Kelsey

    ReplyDelete
  130. Sure, I can help you figure out how to put it at the top. If you provide me with a link to the blog you are trying to add it to I can try to provide details on how you should change your code.

    Kelsey

    ReplyDelete
  131. You can search for elements in your HTML by using Control-F. However, if you are not very HTML literate, I would suggest having someone help you out who is since you could easily mess up your blog if you don't have some idea of what you are doing. Or, at least, be sure to back up the template before making any changes so you can restore it if necessary.

    ReplyDelete
  132. Looks like you found a way to get the pinit button to work - I see a functioning one on your site. Sorry I wasn't able to help sooner!

    ReplyDelete
  133. I'd be happy to try to help. Can you give me a link to the page you are trying to add it to so I can take a look and see if I can figure out what isn't right?

    ReplyDelete
  134. Hi Jewels,

    I don't see any reason why this shouldn't work in your sidebar. I think you should be able to follow the directions exactly as above, EXCEPT for the last step - instead of putting the following code after the <-- quickedit pencil --> code, you should put something like this in a new Gadget for the sidebar:

    <span class='post-icons'>
    <a class='goog-inline-block share-button pin_it_button' expr:onclick='"pinit(); return false;"' target='_blank'/>
    </span>

    I recommend backing up your template before making any changes. That way if you make a mistake, you can always revert back to the way you had it before.

    Kelsey

    ReplyDelete
  135. Thanks so much, Kelsey. I really appreciate it! My blog is www.PagodaRoad.com

    ReplyDelete
  136. I too was able to get the button under my picture in my post but when I click on it there aren't any pictures. If you have time to check mine I would be blessed http://paperblessings.blogspot.com.

    Thanks much!

    ReplyDelete
  137. Thank you so much for this! I looked for two days for a tutorial on how to do this without having to add a button for each post!! Great tutorial!

    ReplyDelete
  138. Thank you for posting this! Your directions were wonderful!

    ReplyDelete
  139. I tried for hours to add pinterest to my blog and then I stumbled on your blog and your instructions worked. Thank you so much!

    ReplyDelete
  140. Hi Kelsey,

    I'm having a problem inserting the code into my quickedit pencil area. No matter how I do it, it makes the area look strange after. I'm using Blogger with a custom template.

    I'm not sure where to go from here? Would you be able to help?

    Thanks in advance,
    Lisa

    ReplyDelete
  141. Thanks so much, Kelsey - this worked like a dream! :D

    ReplyDelete
  142. Thank you so much! This is amazing and useful and your instructions were super clear.

    ReplyDelete
  143. Thanks so much!! I had the problem with the "Red M" as well (It's actually the Gmail symbol). I saw that someone said to re input the code, and when I checked, I saw that the first and third sections had mysteriously vanished, so I put them back and it was fine. THANKS!

    ReplyDelete
  144. Brilliant, works a charm. Thank you so much. Pin it button proudly showing on my site, hoorah!

    ReplyDelete
  145. Kelsey! Commence Happy Dance! You are the best... Thank you for taking your time to hold our hands and walk us through this process. I've been addicted (happily, I might add) to Pinterest and have wanted to add a "Pin It" button to the ends of my posts. Imagine my glee at finding this post and having it work so flawlessly. I'd love to send a proper "Thank you!" in the mail! Yours, Sara

    ReplyDelete
  146. Kelsey, this is an awesome tutorial! Thanks. If you don't mind, would you help me figure out how to switch mine to the top of my posts as well? Thank you so very much!

    ReplyDelete
  147. Hey girl, I figured it out. Thank you so much for this. I really appreciate the help!

    ReplyDelete
  148. Oh my gosh I am so lost. It sound brilliant but I am novice to all this HTML code. AHHH.

    ReplyDelete
  149. thank you for this! I will admit I needed help from my comp sci husband for the placement, but the coding was excellent and made my site pin-ready!

    ReplyDelete
  150. I got so excited when I saw this post but it's not working for me. First I was getting the red M, now nothing shows up in the preview :(. My blog is sohappilycrafty.blogspot.com. Any help would be appreciated!!

    ReplyDelete
  151. Never mind - I fixed it!! :)

    ReplyDelete
  152. How did you get it to show the "pin-it" button and not the M?

    ReplyDelete
  153. It works...except the icon is an M...I'm not sure how to fix this. :-/

    ReplyDelete
  154. Where in the code is the post footer? I can't find it - the only ones I think could be the post footer don't work.

    ReplyDelete
  155. This worked great for me! I'm a new blogger, still learning code and I was able to get this to work on my second attempt. Thank you so much!

    ReplyDelete
  156. I'm surprised I got this far. I have a pin there but it's red. Was confused on the lastly add this to the CSS, wasn't sure on where to add that. My link to my blog is http://eightymillionsblog.blogspot.com/

    Thanks:)

    ReplyDelete
  157. Hello,
    I don't have a blog... Is there any way I can put a Pinterest button somewhere so I can pin stuff I find on the internet?\
    Thanks,
    tatnquilt@yahoo.com

    ReplyDelete
  158. Hi, thanks for this. I am going to give it another try...first go round didn't result in any success. Why oh why didn't I pay more attention in those computer coding classes in college??? My brain is mush. I appreciate your post and hope to make it work on my site too. Thanks!!!

    ReplyDelete
  159. I meant to say it's the red M. Your update on where to add the second part was most helpful, so perhaps an update on where to add the CSS will do wonders:) Thank you so much........

    ReplyDelete
  160. Sorry for all the notes. I tried to copy/paste the CSS code under the template designer-advanced-add CSS code here....didn't make the button look pretty.....

    ReplyDelete
  161. Just came back to this post to see if anyone can help on mine and thought this link might help you.....good luck:)

    http://pinterest.com/about/goodies/

    ReplyDelete
  162. The power of prayer & chocolate:) I got it. I left out that last } for the CSS option and IT WORKED! I'm so excited that I have done this on my own. Your post was recommended by Stitch Labs on Twitter...heading on over to "thank them".....I "thank you" also:) From you newest follower of your blog.....jennifer

    ReplyDelete
  163. Hi, I dont see any pictures in mine http://designsbyshay.blogspot.com

    ReplyDelete
  164. Ok now I have the correct button but nothing happens when I click on it...any assistance would be greatly appreciated... thanks much

    ReplyDelete
  165. Thank you Kelsey! I had to work at it a bit too, but I've got it to work, more or less. I wonder if you would mind taking a look at our blog though, as I've been trying to figure out why the sharing buttons aren't lined up - the +1 button is vertically aligned with the Pin it button, and the other 4 are lined up with each other, but the 2 groups are not in line with each other. Thanks!
    glimpse-reviews.blogspot.com

    ReplyDelete
  166. Hi Kelsey,

    I've added the button - thanks for a great tutorial! However, it's in the footer and I want it next to my G+ and FB Recommend button. Can you provide some guidance as to which part of the code I'd move (and where I'd move it to!) in order for them all to be next to each other?

    Much appreciated! http://www.fabfrugalmama.com

    ReplyDelete
  167. Thank you!! I just added the button, thanks for the great tutorial :) www.TypeAPetite.com

    ReplyDelete
  168. Awesome! You rule! With a little work, I made this happen. Thank you so much for sharing. :)

    ReplyDelete
  169. Awesome, thank you!!! these are great instructions, the update on the 2nd part cinched it for me. :)

    ReplyDelete
  170. Thank you for the directions! Love that button :)

    ReplyDelete
  171. Thank You! Your post was very useful & the button is so pretty.

    ReplyDelete
  172. Hi, I am in two minds as to whether to try and add this, because I keep hearing scary things about Pinterest and it's copyright. I very nearly blocked it.

    But, if I do decide to add the button, is it worth it if I don't have much in the way of pictures on my blog. The only pictures I tend to have are from stock photo site Kozzi, and the odd (fairly basic) photo of my own. If I don't have pin-able pictures, will it be worth adding to my blog? Does Pinterest enable people to pin content as well as piccies?

    Thanks,

    yummymummyreally.blogspot.com

    ReplyDelete
  173. Hi there Mary,

    I apologize for taking so long to get back to you - things have been crazy getting ready to move out of state. I went to your site, but didn't see the button at all, so I am guessing you removed it. The only thing I could think of without seeing it is that the page you were clicking it on didn't have big enough pictures for pinterest to pick up as being large enough to pin.

    I'd be happy to help more if you can describe more what was happening.
    Kelsey

    ReplyDelete
  174. Hi Lisa,

    Since you have a custom template, that template is probably affecting how the button is positioned. If you can provide me with a link to your site and a description of how you want it to look, I may be able to help.

    Kelsey

    ReplyDelete
  175. Hi Suzann,

    If you just want to pin things you find on the internet, you can follow the directions here: http://pinterest.com/about/goodies/

    Kelsey

    ReplyDelete
  176. Hi there,

    Pinterest is really all about pinning and sharing pictures, and doesn't enable you to pin content. I would say it is not really worth it if your blog is not very photo-centric.

    Kelsey

    ReplyDelete

Comments for Kelsey Creates