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('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>
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='"pinit(); return false;"' 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='"pinit(); return false;"' 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
Hi Kelsey - thanks for this code!
ReplyDeleteI 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!
Hi Kelsey - thanks for this code!
ReplyDeleteI 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!
Kelsey this is genius - thank you so much!
ReplyDeleteI'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?
Liss,
ReplyDeleteYes, 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
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.
ReplyDeletethis is amazing! thanks for sharing!! I'm definitely going to pass your blog along :)
ReplyDeleteTesting replying to my own comment. Please ignore.
ReplyDeleteA bit more testing.
ReplyDeleteTesting replying to my own comment, please ignore.
ReplyDeleteI sure hope this isn't spamming anyone, just trying to figure some stuff out with my commenting system.
ReplyDeleteFor those also asking this question - I updated the post above to include the specifics.
ReplyDeleteI'm glad you liked it, and thanks for passing me along! ^_^
ReplyDeleteKelsey
Hi Marianne,
ReplyDeleteGlad 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
Hi Kelsey,
ReplyDeleteThanks 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
I am still using this code, but this code is specific to the Blogger
ReplyDeleteplatform.
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
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!
ReplyDeleteNevermind...figured it out! Silly me didn't put it in the right space after the */ thank you again!
ReplyDeleteGlad my experience could be of use. :)
ReplyDeleteThanks for stopping by!
Kelsey
You are awesome!! Thank you!
ReplyDeleteI 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.
I do in fact. :) You can do so from a special url. Just replace my blog's url with yours in the link below:
ReplyDeletehttp://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
Kelsey,
ReplyDeleteI 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.
So glad I could help! ^_^
ReplyDelete<3 Kelsey
I'm with Heather, dude, I love you, Kelsey! Works great!
ReplyDeleteTHANKS!
These were fantastic instructions! Thank you so much!! YOU ROCK!
ReplyDeleteSo glad I could help! ^_^
ReplyDeleteKelsey
Thanks!! ^_^
ReplyDelete<3 Kelsey
thanks for the great instructions!
ReplyDeleteYou're welcome!
ReplyDeleteKelsey
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. :)
ReplyDeleteKelsey
Yay Kelsey!!! You made AMAZING instructions! I got it running on both my blogs! Rock on lady!
ReplyDeleteYay! :D
ReplyDeleteKelsey
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!
ReplyDeleteYou're welcome! ^_^
ReplyDeleteKelsey
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!
ReplyDeleteThanks Bree! :D
ReplyDeleteKelsey
yes, thank you! thats how I found this blog :-)
ReplyDeleteThanks - also found this through the blog stylist (via google)
ReplyDeleteWelcome! :)
ReplyDeleteKelsey
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!
ReplyDeleteThanks so much for sharing! ^_^
ReplyDeleteKelsey
Thank you!!! :)
ReplyDeleteWelcome!
ReplyDeleteKelsey
Spectacular! Thank you!
ReplyDeleteThank You!!
ReplyDeletewww.untrucparjour.blogspot.com
Welcome!
ReplyDeleteKelsey
Welcome!
ReplyDeleteKelsey
Oh my goodness! A million thanks to you! This is perfect!
ReplyDeleteExcellent. Great instructions and results. Thanks a lot. Also great header.
ReplyDeleteDrDan
www.101cookingfortwo.com
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.
ReplyDeleteTHANK 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.
ReplyDeletewww.AYoungWivesTale.com
Welcome! :)
ReplyDeleteKelsey
Hmm, do you have a link where I can check it out?
ReplyDeleteKelsey
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
ReplyDeleteThanks so much for your help
Ah sorry, for some reason the link wasn't in the email my comment system sent to me. Looking at it now.
ReplyDeleteHmm, 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?
ReplyDeleteI 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.
ReplyDeleteYay, 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.
ReplyDeleteThanks for making me look again! :D
Glad I could help. :D
ReplyDelete(Also, doh! I meant to mention that one too....oops....)
Kelsey
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!
ReplyDeleteGlad this is working better for ya! :D
ReplyDeleteKelsey
THANK YOU SO MUCH!!!!
ReplyDeleteWelcome! :D
ReplyDeleteThank you!! I've just added a Pin It button using your excellent instructions. :)
ReplyDeleteGlad to help! :D
ReplyDeleteKelsey
thanks so much!
ReplyDeleteI 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!
ReplyDeleteIt is the quickedit pencil.... My kids used the laptop before me and the keys are sticking...nice! Sorry!
ReplyDeleteI'm a little confused what you are trying to ask. Mind rephrasing it?
ReplyDeletePerfect! Thank you!
ReplyDeleteWell, 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.
ReplyDeleteFinally figured it out! Thank you for the help!
ReplyDeleteGlad you were able to figure it out! Mind if I ask what was wrong? Perhaps it might help someone else in the future...
ReplyDeleteKelsey
Welcome! :)
ReplyDeleteKelsey
Thanks !! Thanks !! This works as expected !! Perfect
ReplyDeleteLili
Great! :D
ReplyDeleteKelsey
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. :/
ReplyDeleteKelsey
Thank you Kelsey. It worked for me!! Great tutorial. ✿◠‿◠
ReplyDeleteKelly
thanks so much for this!!!
ReplyDeleteThanks! ^_^
ReplyDeleteKelsey
Welcome!
ReplyDeleteKelsey
Kelsey,
ReplyDeleteGreat 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!
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?
ReplyDeleteIt's working for others, so is it possible there was a mistake in following the directions somewhere?
Kelsey
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!
ReplyDeleteGlad it worked! :D
ReplyDeleteKelsey
ALRIIIIIIIIIGHT!! Woo-Hoo!! You ROCK girlfriend!! TY!!!! I love Pin it and wanted a way to promote my cards. This is perfect!
ReplyDeleteThanks! ^_^
ReplyDeleteKelsey
Thank you so much! Worked perfectly!
ReplyDeleteGreat! ^_^
ReplyDeleteKelsey
Great info, but not working for me. I have followed all the directions and tried three times. Bummer.
ReplyDeleteDo you have a link I could look at to try to help troubleshoot?
ReplyDeleteKelsey
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!
ReplyDeleteHi Kelsey,
ReplyDeleteI 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???
Do you have a link where you have done this so I could check this out?
ReplyDeleteKelsey
thank you for creating this post! i got it to work on my blogger blog too!!
ReplyDeleteSo, 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!
ReplyDeletePerfecto - thank you!!
ReplyDeletei seriously have zero skills with the computer but i figured it out!! thanks so much!
ReplyDeleteThanks! I have no skills in this...followed directions, button is showing up but does nothing when clicked
ReplyDeletehttp://eatlittleeatbig.blogspot.com/2011/12/recipe-for-blue-cheese-pistachio-and.html
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.
ReplyDeleteThank you! This is awesome! I was able to do this successfully following your excellent directions, too!
ReplyDeleteexcellent, your steps are perfect. Check my site here...
ReplyDeletehttp://www.coolshityoucanbuy.com/
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!!!!!
ReplyDeletemine 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?
ReplyDeletehttp://www.momvstheboys.com/
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/
ReplyDeletesoooooooooo epic awesome lol.. i cant wait:
ReplyDeletehttp://pornterest.net/
This worked perfectly! Thanks so much.
ReplyDeletegreat directions, thanks!
ReplyDeleteThank you for sharing Kelsey... worked a treat!
ReplyDeleteHi 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?
ReplyDeleteMy blog address: http://acquiringallskills.blogspot.com
Thanks so much for this! Worked a treat ;-)
ReplyDeleteTook me a couple of tries but I've FINALLY got it!! Thank you!
ReplyDeleteThank you so much! So rewarding...I did it!
ReplyDeleteThanks so much!!! I was able to add them! feel free to check them out www.KristiesFotos.blogspot.com
ReplyDeleteHey Kelsey! Can you email me at candcnails @ gmail . com
ReplyDeleteThank 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!!!
ReplyDeleteThanks so much! Worked like a dream!
ReplyDeleteAWESOME. Thank you so much for sharing this!
ReplyDeleteThanks for doing this Kelsey. I"m following you now. Hope you'll come by and follow on mine too.
ReplyDeleteColeen, an American in Ukraine
www.vintageterrace2.blogspot.com
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??? :-)
ReplyDeletewww.onegoodthingbyjillee.com
awesome! thank you so much for this tutorial. it was a breeze!
ReplyDeletethanks so much for sharing! it worked!
ReplyDeleteYou are ABSOLUTELY BRILLIANT! Thank you so much for showing how to add this button, directions were spot on and easy to follow!
ReplyDeleteHi 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!!!
ReplyDeleteMake sure the box that says "Expand Widget Templates" is checked. Otherwise you won't see it.
ReplyDeleteYEAH!!! 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!
ReplyDeleteAwesomeness...thank you so much!
ReplyDeleteThank you so much! Your instructions worked perfectly.
ReplyDeleteThank you so much for this tutorial, it worked great!
ReplyDeleteThank 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.
ReplyDeleteeeks! i can't even find where "head" is! ? sooo not html literate! please help! thanks
ReplyDeleteThank 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!
ReplyDeleteI 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
ReplyDeleteTHANK 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!
ReplyDeletehttp://www.mnsaid.blogspot.com
mine doesn't either so I hope there is an answer soon.
ReplyDeleteWow, it worked like a charm. I haven't done any html in years and was able to follow your instructions. Thanks much!
ReplyDeleteThis is excellent! Thank you so much!
ReplyDeleteThank you so much for this!!!!
ReplyDeleteThank 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!
ReplyDeleteI 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!!!
ReplyDeleteHi, 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
ReplyDeleteHi, I am having the problem of nothing happening when I click on it. Can you help? Thanks! Karen
ReplyDeletekarenbellessapetersen@gmail.com
Gaby,
ReplyDeleteThanks 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
Class2classy,
ReplyDeleteWhere 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
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?
ReplyDeleteHi Susie,
ReplyDeleteI 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
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. :)
ReplyDeleteKelsey
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:
ReplyDelete<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
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!
ReplyDeleteHi Kelli,
ReplyDeleteIf 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
How can I help you Carrie?
ReplyDeleteKelsey
Jill,
ReplyDeleteThanks 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
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.
ReplyDeleteKelsey
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.
ReplyDeleteKelsey
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.
ReplyDeleteLooks 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!
ReplyDeleteI'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?
ReplyDeleteHi Jewels,
ReplyDeleteI 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
Thanks so much, Kelsey. I really appreciate it! My blog is www.PagodaRoad.com
ReplyDeleteI 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.
ReplyDeleteThanks much!
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!
ReplyDeleteThank you for posting this! Your directions were wonderful!
ReplyDeleteI tried for hours to add pinterest to my blog and then I stumbled on your blog and your instructions worked. Thank you so much!
ReplyDeleteHi Kelsey,
ReplyDeleteI'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
Thanks so much, Kelsey - this worked like a dream! :D
ReplyDeleteThank you so much! This is amazing and useful and your instructions were super clear.
ReplyDeleteThanks 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!
ReplyDeleteBrilliant, works a charm. Thank you so much. Pin it button proudly showing on my site, hoorah!
ReplyDeleteKelsey! 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
ReplyDeleteKelsey, 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!
ReplyDeleteHey girl, I figured it out. Thank you so much for this. I really appreciate the help!
ReplyDeleteOh my gosh I am so lost. It sound brilliant but I am novice to all this HTML code. AHHH.
ReplyDeletethank 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!
ReplyDeleteI 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!!
ReplyDeleteNever mind - I fixed it!! :)
ReplyDeleteHow did you get it to show the "pin-it" button and not the M?
ReplyDeleteIt works...except the icon is an M...I'm not sure how to fix this. :-/
ReplyDeleteThank you!
ReplyDeleteWhere 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.
ReplyDeleteThis 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!
ReplyDeleteI'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/
ReplyDeleteThanks:)
Hello,
ReplyDeleteI 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
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!!!
ReplyDeleteI 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........
ReplyDeleteSorry 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.....
ReplyDeleteJust came back to this post to see if anyone can help on mine and thought this link might help you.....good luck:)
ReplyDeletehttp://pinterest.com/about/goodies/
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
ReplyDeleteHi, I dont see any pictures in mine http://designsbyshay.blogspot.com
ReplyDeleteOk now I have the correct button but nothing happens when I click on it...any assistance would be greatly appreciated... thanks much
ReplyDeleteThank 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!
ReplyDeleteglimpse-reviews.blogspot.com
Hi Kelsey,
ReplyDeleteI'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
Thank you!! I just added the button, thanks for the great tutorial :) www.TypeAPetite.com
ReplyDeleteAwesome! You rule! With a little work, I made this happen. Thank you so much for sharing. :)
ReplyDeleteAwesome, thank you!!! these are great instructions, the update on the 2nd part cinched it for me. :)
ReplyDeleteThank you for the directions! Love that button :)
ReplyDeleteThank You! Your post was very useful & the button is so pretty.
ReplyDeleteHi, 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.
ReplyDeleteBut, 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
Hi there Mary,
ReplyDeleteI 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
Hi Lisa,
ReplyDeleteSince 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
Hi Suzann,
ReplyDeleteIf you just want to pin things you find on the internet, you can follow the directions here: http://pinterest.com/about/goodies/
Kelsey
Hi there,
ReplyDeletePinterest 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