Pin It If you have a blog, you probably have social media buttons attached to your post so that your readers can “Like,” “Retweet,” “Digg,” etc your posts. If you’re a photographer, though, you’ve probably also found yourself wishing that you could add a Pinterest “Pin it” button to your blog. There are a couple of great options on the Pinterest Goodies page including 1) “Follow me on Pinterest” button This is a basic button that links to your Pinterest pinboards. To set it up, just log in to your Pinterest account, then click on the button on the Pinterest Goodies page to autogenerate your custom code). 2) Image/Product Specific Pin button This one is great for those selling products, posting single images infrequently, or if you want to just make one especially notable images available for pinning here and there. To auto-generate your custom image-specific code, go to the Pinterest Goodies page and provide your website URL, selected image URL, and a description of the image (if you want to pre-populate that field for the pinner). We used this for the image above.
… but what if you want a universal Pin It code for all of your posts?
One request that we have heard made regularly from our photographer colleagues is a way to add a “Pin It” button similar to the “Like” or “Retweet” buttons that will appear in every blog post — without having to generate new image-specific code every time. When we set up our new CMpro Daily Project, we realized that it was time to figure it out — and we want to share that code with you. Simply copy and paste the code (in orange) below in one of several places:
- In the HTML at the end of every blog post (right in the body of the post in HTML View)
- Inside the loop of your post template file (typically single.php, single-post.php, single-photo.php, or something similar)
- Using an action hook — depending on how much of a geek you are, this may be a bit much, but many WordPress themes come with features that make the addition of hooks a simple cut-and-paste.
* Want to use a different Pinterest image or prefer to design your own button graphic? Just replace “http://www.theclickcommunity.com/cmprodaily/wp-content/uploads/2011/09/pinit.jpg” with the URL of your own image.
We’ll see you — and your images!! — over on Pinterest!
Have you found or developed something that worked better? Tweaked the code to make it even more awesome? Tell us about it! And if you liked this article, be sure to Like it, Retweet it, and – of course! – pin the banner below!
Awesome, i've been trying to work this out for a while but with no luck! Thank you!
Also, FYI I copied and pasted from but couldn't get it to work originally, I had to go back into the code and retype all of the " and ' in the code to get it to show.
Thanks! Yep, the clipboard is copying the formatting and reversing quote marks and apostrophes. We'll post unformatted code shortly!
The code has been reposted without formatting – should work for everyone now!
It sucks that I have to add it to every post manually (wish I could add it to the template of my blog, but tried and it didn't work, probably bc I'm on Blogger?!?!). But I love this idea though. Thanks ladies!
Hey Vivian! Maybe something like this would work? http://isabellasnow.hubpages.com/hub/How-to-Inser…
awesome! thanks for sharing.
I'm actually in the process of having a plug-in developed for WordPress that will make this easier and will allow you to specify the image & description right below where your post editor is. I'll let you know when it's done. 🙂
Jamie, we'd love to know when it's ready!!! Please keep us updated!
Thanks for this! Worked perfectly!
This is such a great addition to my stamping blog! Thanks so much for taking the time to create/share it!
Thank you so much for this brilliant tid-bit of information and help! This button is a fantastic addition to any blog.
Thanks for this! It worked for me!
that's pretty nifty. i'll have to do this for my photo blog posts 😀
Tried it fo my wordpress blog and it did successfully post the button, but then when I click on the button it doesn't link to Pinterest, it went to an al white+text (CSS?) page…Did I miss something?
Thanks!
I had the same problem as Justina. Does this only work on self hosted blogs like WordPress.org or will it work on wordpress.com? If so, I wonder what I'm doing wrong.
This has stopped working for me 🙁
I followed the link you gave to Vivian after her comment
http://isabellasnow.hubpages.com/hub/How-to-Inser…
It worked! I used your html code and put it under post template! It only works on posts I create from here on out, but my blog is fairly new and I haven't been able to get any other things to work – so I'll take it! Thanks for sharing!
I just found this answer for Blogger users and it worked for me. Yay.
Try selectign the html/javascript gadget from the basic menu instead of the add your own. (I've never noticed the add your own gadget link before.) The http:// is necessary, but make sure it doesn't appear twice. It won't in that gadget.
This is great! Found it through JulieAnnArt! I was wondering if you had (well.. actually I looked and you don't, so I guess I'm wondering if you could do) a StumbleUpon Link one? So it makes it easier for people to "I like it!" on StumbleUpon?
Love the site! I'm not photographer, but I hope to one day be at least an amateur.
Added your code snippet to my Blogger signature, and it works perfectly – thank you so much!!!
This is great! TFS…I have a q. 😉 If you have a blog posts with say 5 pics, and you put a pin button at the bottom of the post, when you click it, do you have another page pop up with the option of choosing one or all five, or does it just pin the last pic it is under?
thanks! This was just what I was looking for.
After reading tons I finally discovered your post with the code. Added it to my Blogger settings and voila! it is working. Thanks for pulling this together.
Really great idea – but same problem for me as Justine and Brenda. I get the 'pin it' button but it doesn't actually go through to Pinterest. I'm self-hosted wordpress. If you have a fix I would love to know – and will spread the word! Thanks 🙂
Thank you! Works great!
Hey, I used this on a site, and it works perfectly in IE, Safari, and Chrome – but on Firefox it opens a new tab and says "Sorry, we can't see any big images or videos on this page" – anyone else having this issue? I can't seem to find it anywhere, and I don't know what to do about it. It's like it is opening a new empty tab and trying to pin THAT.
Same as above for mine, nothing in firefox.
Thank you! I've been looking for just 1 single Pinterest button to add to my blog instead of adding it to each and every single post (which is just too much work to go back and add to all my older posts) and this works great!
can you add this on a website? just wondering as I am trying to and it's not working for me.
Thank you SO much – this worked perfectly!
Thanks, finally found the code that works in blogger.
There's a minor problem about the count…the number didn't show up.
Is there a way that it can be fixed?
Thanks,
Angie
Just discovered another problem…after I installed it, the sidebar went wrong..it went under the post.
Hello,
Thanks for sharing this code. I added to my blog, but when I click on the Pin it Button, images such as the ones I created for my Nav Bar under my header are being Pinned as well. Any thoughts???
I'm not super tech-y, but I can't get it to work. I'm using it on wordpress, and when I click on the button in a published post on my blog, I get a pop-up asking if I want to open or save "pinmarklet.js" as though it were a document or file instead of a link. If I select to open it, it gives a runtime error saying "line 4 char 105 'document' is undefined."
Anyone know what I've done wrong or what I can change to fix it?
Thanks 🙂
Worked like a charm! Thank you!
Having problems with this on blogspot….pin button shows up on my blog and allows me to click the image I wanted posted to pin from that page but when it "successfully" pins to my pinterest board there's no image…only the description and my blogpage url. What am I doing wrong?
hello! great post! i have one question though. i'd like to be able to automatically add an attribute that fills in the description for the user with the title of the post. (I'm using this in my loop on the single post page in WordPress). I tried this by adding this after the src attribute:
e.setAttribute('description','');
it didn't work… it was just kind of a guess. i thought it might work. any idea how to get this to work?
thank you!
oops, the php was stripped out, so here's that code but replacing the real php tags with capitalized text…
e.setAttribute('description',' PHPSTART echo the_title(); PHPEND');
thanks!
Thank you so much for this! I have been wondering how to do this myself and it was giving me a headache!
Thanks so much from a Pinning Blogger!
Best wishes,
Natasha.
I have tried to figure this out, but failed. I was hoping that someone smarter than me would figure it out. Thanks!
It totally worked for my blogger blog! It's awesome!
Thank you soooo much for offering this code!!
Thank you for sharing. I've shared this post on my blog and linked it back here!
I have wordpress/prophoto and I can't figure out where to put this-I have looked into my editor and everything-still nothing. Prophoto has one that I can put the Pin It at the end of the post but I want to do each image 😉 Anyone installed it and it worked for them on wordpress/prophoto? If so please share with me!
THANK YOU!!!! I've been adding a button manually to each of my blog posts for some time now, but it has been glitchy, so I wanted to find an automatic button. I've tried many people's tutorials, but yours was the only one that worked the way I wanted it to. Oh, I am on blogger and I just put the code under settings>posts>post template . I'm a happy girl tonight. Thanks again.
Thanks so much for your clear explanation and code that actually works. You were the 4th source I tried today and the only one that worked. I spent several hours on this today and am grateful for your assistance.
Thank you so much for sharing this info it really saved me a lot of time. I'm going to share this and link back to your website!
I went through like three different blogs that tracked me back to you and this! lol Thanks so much for sharring how to do it. Easy Peasy! 😉
LOL, got this from Pintrest. Thanks!!! 🙂
I actually desired to compose a small note to thank for you for some of the pleasant secrets you happen to be showing on this webpage.
Hi, and thank you for this how-to!
Question… will changing "aligncenter" to "alignleft" do what I hope it will do? 🙂
Thanks!
Worked like a charm! I used Option 1: paste into html view of each post. I inserted the code after each photo's code so the pin it button appears directly under each photo. Thank you so much–yours is the easiest tutorial for this I've seen!
Лучший скейт-портал в Украине и странах СНГ !
Thank you for your tutorial! I'm just not very tech savey and I'm wondering if you have an option that will make the button appear at the end of each post without me having to enter it every time? Thanks so much for your help!
Emily
The tutorial I would like to find (again) is the one that 'fixes' all your pictures automatically so when you run your cursor over it, the frame around your picture appears and you have 'pin it' or others can 'pin it' at any time. I remember reading these instructions, but guess I didn't save them,,,,,,,,, can't find them. Help please??? Thanks, Carol cinez123@aol.com
The tutorial I would like to find (again) is the one that ‘fixes’ all your pictures automatically so when you run your cursor over it, the frame around your picture appears and you have ‘pin it’ or others can ‘pin it’ at any time. I remember reading these instructions, but guess I didn’t save them,,,,,,,,, can’t find them. Help please??? Thanks, Carol cinez123@aol.com
Thank you for sharing, i will check here more often .
Getting followers pretty much always equates to credibility. I feel like in current times that many celebrities are judged by how many follower they have. It's kind of wrong, but true. Whether it be pinterest, twitter, or anything really.
I manage social media for a small business and I found a pretty unique website that "sells" followers. There are many websites that do this (surprisingly!) but this particular one has targeted followers too: http://www.mysocialanswer.com
PS- Just don't tell your boss you bought the followers 🙂
Awesome! I used this on my drupal site. Hardcoded for the moment, but hopefully it gets made into a module or incorporated into another.
Thanks so much for this information. My old buttons stopped working and I had tried everything to get around the individual pin button. This was just what I needed.
Should add, I used mine in a hook, just replacing my styled div tag with the generic one.
Thanks so much. I've added this to my blogger account and I was wondering how you got the "Count" function to appear. I've been trying to find a way to get a count of my photo pins and re-pins on Pintreset and am not finding what I want. I know I can "Source" from my blog, but I want a count of each photo posted. I know you can, I just don't know how.
Thanks so much.
oh my gosh, this is awesome, I was referred from seven thirty three. I've been wanting to add a pin it button to my posts but did not want to edit my template because I'm a sissy and have never done that. This was so easy. thanks, Kathy p,s, what are trackbacks, pingbacks. You can tell I know nothing!
this WORKS!!!!!! Thanks so much for sharing. I have spent most of my sunday morning trying to figure out how to get all of my pics to show up with a pin it button in my blog margin. this works and now my readers can pin from all of my uploaded images vs. just the one in the post!
Just read this, and tried it out on my blog-works perfectly!! Thanks SO much!!
Meegan
What Meegan Makes
Really? Exactly what could these people be imagining? This is unbelievablehttp://www.heraldtribune.com/article/20051019/NEWS/510190303!
Someone necessarily assist to make significantly articles I might state. That is the very first time I frequented your website page and to this point? I surprised with the research you made to make this actual submit incredible. Fantastic activity!
Yes! Thank you so much! The html code pinterest generated for me wasn't picking up any of my photos and it was very frustrating–you fixed my problem! Thanks so much!
Awesome tips Thanks For Sharing
i love it….:D
Aw, this was an incredibly good post. Taking the time and actual effort to create a very good article… but what can I say… I procrastinate a lot and don’t manage to get anything done.
Thank you, thank you, thank you!!!!
You saved me a bunch of time. I was trying to follow PInterest’s goodie tutorial but I could not figure it out!!! I finally just googled it and your blog came up!!!
Thank you for this! You’ve made it so EASY! I could kiss you 🙂
how it appear on the center or bottom image, not on out side image with big pinterest button? thanks for advice
where is the orange code?
i do not see it
I really like it when individuals come together and share thoughts.
Great blog, keep it up!
works very well. thanks for that supporting
Hello my good friend! I want to say that this put up is remarkable, great penned and involve roughly all important infos. I would like to determine much more posts like this .
Thank you. I love you. Will you marry me?
I cherished as significantly as you will collect carried out right here. The sketch is enticing, your authored topic issue stylish. nonetheless, you command get purchased an impatience around that you would like be delivering the next. unwell unquestionably come extra formerly all over again considering that exactly the exact same nearly a lot generally inside event you shield this hike.
I added this code a while back, and I’d love to remove it and install the hovering Pin It button instead, but I can’t for the life of me figure out where the code is to delete it! Do you have any suggestions? Thank you SO much!
Hmm is anyone else having problems with the pictures on this blog loading?
I’m trying to determine if its a problem on my end or if it’s the blog.
Any feedback would be greatly appreciated.
Feel free to visit my homepage … seo rankings (Franziska)
Hi Franziska! Double check that you aren’t accessing a secure (HTTPS) version of the URL; we’re having some issues with images for those trying to access the HTTPS version of the page. 🙂
I will immediately clutch your rss feed as I can not to find your email subscription link or newsletter service.
Do you’ve any? Kindly permit me recognize so that I
could subscribe. Thanks.
Also visit my homepage: get free instagram followers now
Hi,
I was wondering where the pin it html is on this page? I can’t find it- maybe i’m just not looking hard enough…
Its Working but not working in all post…
Hi there! This pin it code has been working great for me for years, until just this week. Any ideas why?
Thanks!
Christine @ My Epicurean Adventures