Add a Custom Pinterest Button to your Website

Jeremy Mansfield

April 27, 2012

If you’ve not already been overtaken by the social rage of 2012 that is fondly called Pinterest, I’m sure one (if not all) of your clients have. Well, I was working on a site recently where our client jumped on the pinboard and wanted to globally add in the Pinterest “Pin It button for websites” in the footer on all pages of their site. Sounds easy enough, right? Well, not so fast.

Like other social sharing platforms such as Facebook, Twitter and Google+, Pinterest tried to provide a way to easily integrate their “Pin it” button onto each page of a website.

However, their method of doing so is quite prohibitive to a global approach because it only works if you manually set the url of the page the pin is on and the url of the image to be pinned. As of this writing, they do not yet have a dynamic approach like Facebook to default to the current page for sharing only that page’s content.

What I really needed was an alternative solution that would crawl for images on the current page and let the visitor select the preferred one before “pinning it” to their board, similar to the Pin It button you can install on your browsers bookmark bar.

Alternative Solution

After doing a little googlin’, I found a great trick by Ari Krzyzek that provided the magical solution for the Pin it button where I didn’t have to worry about specifying page URLs or image URLs. This is a derivative of the Pin it bookmarklet and it crawls for images on the page where the button resides, therefore detecting the page URL automatically. Here the user will be able to select which image is pinned and they can specify their own description with the pin too. There are, however, two caveats to be aware of. First, this is only compatible with IE9+, Chrome, FireFox and Safari. Secondly, it’s not capable of showing the bubble pin count.

Steps to Success

All you simply need to do is add the provided Pin It button code shown below wherever you want the button to display on your web page. No further customizations are needed unless you want to change the button appearance.

For the example above, I am using the Pin it button hosted on our own website.

You’ll need to be sure to replace the current button image URL with your own Pin it button image URL. You can also have the freedom to create your own custom Pin it image and stylize it with css.

Happy Pinning!

76 Comments

PJ

May 10, 2012

T H A N K Y O U ! ! !!

Finally, a code that really works for a dynamic page! This is OUTSTANDING!

One question: Is there a way to add a description?

Jeremy Mansfield

May 10, 2012

Hi PJ, unfortunately, I do not know of a way at this time. This is pretty limited, but at least it works dynamically on any site. The only caveat, again, is that you don’t have the “count” bubble to let you know how many times something has been pinned.

Tiffany Lampe

May 22, 2012

Thank you, Jeremy!
In my research, hoping that there had to be a more clear cut way , I found your site. I implemented it into our site!! All I can say is thanks so much!!

Hi Ben, thank you for bringing this to my attention. Unfortunately, it doesn’t seem to work in IE8 or IE7 when running directly from those browsers. It will, however, work in IE9 and when running emulator for IE8 and IE7.

Philip

May 25, 2012

Hey Jeremy,

This is great stuff! Do you know if there’s a way to use Pinterest’s vertical pin it counter? I thought I could add count-layout=”vertical” always-show-count=”1″ to your code like this:

Unfortunately it’s not showing the vertical counter.

Any ideas?

Jeremy Mansfield

May 25, 2012

Hi Philip,

Unfortunately, the counters do not work with this implementation, as it’s taken from the from the Pin It Button for Bookmarks. You’d have to use what Pinterest directly supplies from their website.

Philip

May 25, 2012

Gotcha…Thx!

Todd

June 7, 2012

THANK YOU…. so much. It works great! Even pulls the description from my title or alt attributes… this is perfect. I owe you a beer, man. Let me know the next time you need a royalty free stock image or two, and I’ll hook a brother up. Or a beer haha

Thanks to a user who wrote in, we’ll be updating this post shortly with a follow up and improved code. Stay tuned!

Todd

June 22, 2012

Good stuff Jeremy, keep us posted.

Tanya

July 3, 2012

Thank you! This worked perfectly.

Dasha

July 9, 2012

I don’t want the text to be grabbed from image alt tags, I’d like to specify it myself. Is that possible?

Jeremy Mansfield

July 9, 2012

As of right now, we do not have a workaround for what you are specifying. We are, however, working on a follow up post with updated code sent to us by someone who wrote in to us about this solution. We look forward to alerting everyone as to when that new post is ready in the next week or two!

jlapitan

July 13, 2012

can’t replace the default pinterest button, when i tried replacing it, the button switch back to the original pinterest image.

@jlapitan, unfortunately, I can’t really comment on functionality within WordPress. However, we do have an updated write up on this method we are going to be releasing here shortly that might be of help to you.

Southerncentralrain

July 26, 2012

Very interested in the update. When will this be available? Thanks.

James Briano

July 27, 2012

Thank you.

karthik

July 28, 2012

Hi Jeremy,
Thank a lot!! it works very well.. I need one more thin ie.,how to pass custom url. Actually it assing current page URL for img, but i need to modify that url, how can i change?

Jeremy Mansfield

July 30, 2012

@karthik Currently, I’m not aware of a way to do so, but will surely let you know if I find a way.

Vivianne

July 31, 2012

Great job – it works!!!! I had contacted pinterest before to see if they could provide the same code – have not heard back from them. Your code is great. Thanks.

Phil

August 13, 2012

GENIUS! Thanks a lot, saved me a lot of time!

Philip

August 20, 2012

Brilliant! Thank you, one thing though, once i click the pin buttom it automatically takes me back to my homepage instead of staying on the product page I was on before pushing the pin it buttom. Is this possible to code in to your code and if so how? Thank you.

Sharissa

August 23, 2012

Thank you so much! You have no idea.I have been searching for a while to find a button that works dynamically! You are incredible! Can’t thank you enough! I do the bookstore website for the USS Arizona Memorial and my goal is to get the word out about who we are and so forth so this button will really help. Thanks again.

Jeremy Mansfield

August 24, 2012

Glad it could be of help. My apologies to everyone else for being so behind on posting the follow up article.

Laura

August 29, 2012

I love youuuu! God, I’ve been searching for so long to finally find a functional code (since java and I just don’t really get along well…) and now finally it works ♥

Michael

September 9, 2012

awesome!! Thank you, Jeremy.. Like all the vistors above, this was just what I was looking for =]

Deepak

September 19, 2012

Thank you so much!!! Really help full!!!

ladybugn

September 22, 2012

You are my new best friend. When I tested the code, it took a clear of my cache to remove the link to your hosted button, sorry. My own button is happily doing it’s thing now!

Anar Davis

October 8, 2012

Thank you for this! Helped so much. I am trying to figure out how to minimize the js and use php to do the same with a jquery overlay. Then we should be able to add description and all kind of nice things 🙂 Thanks again, it’s awesome to have something working.

Erin Parker

October 15, 2012

Thank you so much for this! Works perfectly!

Holly Charles

October 22, 2012

Thanks for this! Works perfectly.

James Green

October 23, 2012

Been trying to find this solution for ages!!! Thanks! You can see them in action on my website 🙂

Angela

October 26, 2012

Thank you, one thing though, I am also having the same kinda hiccup that Philip is having: after clicking the pin button and clicking an image to pin it will automatically take you back to the homepage instead of staying on the product page. What can I do to fix this? Thank you.

Jeremy Mansfield

October 31, 2012

Hi Angela, I just did a test here on the blog, and successfully posted to Pinterest in a new window, while leaving the current page as is. What browser are you using and what operating system?

Davor

November 1, 2012

Thanks, work for me perfect!

HK

November 6, 2012

Hi Jeremy,

I want to add custom pin it button on multiple images on one page only. What do I do so that I get pinned to image that I click.

Thanks in advance,
HK

Johannes

November 16, 2012

Might it be that the script is not working anymore?

Jeremy Mansfield

November 16, 2012

Hi Johannes, it’s currently working fine for me on this page where it’s demo’ed.

Nancy

November 19, 2012

Thank you so much! This helps A LOT!!

Matt

November 20, 2012

It appears that Pinterest may be overriding the image you specify. It’s not working properly, and the button on this blog post of yours shows a default Pin It button now.

Jeremy Mansfield

November 20, 2012

Hi Matt, I’m not exactly sure of what people are seeing. I just clicked on the pin button on this page and posted something to our Pinterest page with no issues. I also see the same button from this original post date. Feel free to email me a screen grab at jmansfield@brandaiddesignco.com

Matt

November 20, 2012

It’s not that the button doesn’t work anymore. The button works fine. It does not, however, pull in a custom image.

Hot Chocolates – Clayton

November 22, 2012

Hi Jeremy,

I’ve been looking for a solution for this for the last 3 hours as my “Pin” button stopped working(for some reason) on my Blogger site and was not pinning anything… just a blank image appeared!! No idea what changed as I had done nothing…

Anyway… I was looking for a counter bubble solution (as worked before) but none seemed to be working properly (blank image pins) and found your piece of code… genius! Thanks.. I love how it allows multiple pics to pin rather than just one. Makes life so much easier. Just a shame no bubble count can be worked in as it’s always nice to see 🙂

Anyways… thanks for not ruining my whole day and wasting more hours on the web 🙂

Cheers – Clayton

Steve

November 27, 2012

Hey Jeremy, this is fantastic. Exactly what I was looking for.

The only thing I haven’t been able to do is keep the pin it mouse over from happening on certain images (i.e. an image on an about page and not a post).

Any idea on how that might be done?

Thanks again!

Rob

November 29, 2012

Hi, this works great! Thank you so much. Ridiculous Pinterest themselves don’t provide code like this.

christian louboutin outlet

December 6, 2012

When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get three e-mails with the same comment.
Is there any way you can remove me from that service?
Thanks!

Custom water bottle

December 14, 2012

I have been hearing a lot about Pinterest lately but was not clear on to what it actually does. You have provided the much needed information. Thanks!

アグ激安

December 23, 2012

Hello! I just wish to offer you a huge thumbs up for the excellent information you
have right here on this post. I will be coming back to
your site for more soon.

http://digitest.no/

December 28, 2012

Hello! Someone in my Myspace group shared this site with us so I came to check it
out. I’m definitely loving the information. I’m book-marking and
will be tweeting this to my followers! Outstanding blog and
brilliant design.

louis vuitton outlet

December 28, 2012

Hi, just wanted to tell you, I loved this post. It was practical. Keep on posting!

Jeremy Mansfield

January 2, 2013

Glad to know it was helpful. My apologies on not providing the follow up article quick enough as a response to the original post!

Jeremy Mansfield

January 2, 2013

Thanks, and glad to know it was helpful. It was a solution we found in a pinch to solve one of our problems as well. Look forward to providing more.

Jeremy Mansfield

January 2, 2013

Thanks, and glad I could be of help.

Julien Bouvier

January 3, 2013

Great, but i just have one question.

What code must i add to change the size of the image to:

height: 34px
width: 120px

Thanks in advance.

Christine

January 4, 2013

This is great. Thanks so much! I’ve been searching for a while for a code like this.

trish

January 7, 2013

This is great. Thank you. One question, however, is there a way to use a custom button AND specify the url you want to send to pinterest?

Jeremy Mansfield

January 7, 2013

I’ve not actually tried, so let me know how it goes! 🙂

Jeremy Mansfield

January 7, 2013

Hi Julien, not sure I understand the question. If you’re referring to the “pin it” button, you can use whatever image you’d like. You’ll need to create your own and then manipulate in the html code the width and size of the image.

Hi Samantha. I just tried it on your link and it worked fine for me. Not sure why it would be messing up for you.

Kevin

January 10, 2013

Clever fellow. I implemented a button in Perl for an online shopping cart that works well. But there I have control over all the variables — pin title, selected image, conditional button suppression, etc.

This appears to be a nice interim solution for blog pages. Pinterest indicates they are working on it with no ETA. Thanks. I’ll give it a try.