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.

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img src='http://design.brandaiddesignco.com/insights/PinIt.png'/></a>

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


Ben
May 24, 2012

Thanks, works perfectly!


Ben
May 24, 2012

Hi there

I have installed this button on :

http://www.healtheries.co.nz/healthy-and-gluten-free-recipes/healthy-cookies-and-biscuit-recipes/apricot-and-coconut-muesli-cookies

However my client is using IE8 and gets the following syntax error:

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.3)
Timestamp: Thu, 24 May 2012 23:50:26 UTC

Message: Syntax error
Line: 1
Char: 47
Code: 0
URI: http://www.healtheries.co.nz/healthy-and-gluten-free-recipes/healthy-cookies-and-biscuit-recipes/apricot-and-coconut-muesli-cookies

Any ideas?


Jeremy Mansfield
May 25, 2012

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

To see a sample of how my descriptions are working with it, check out this sample page – the button is near the right: http://arenacreative.com/abstract_g52-creatively_thinking_person_silhouette_p7176.html


Bernike
June 8, 2012

Thanks so much!! Was pulling hair out of head until I found you 🙂


Sharon
June 13, 2012

Just pinned this page to http://pinterest.com/shopprescottaz/need-to-know/ This is excellent and I’ll be adding to my website soon! Thanks so much.


Jeremy
June 22, 2012

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.

I am using something like this on WordPress

ID), ‘large’);
$excerpt = strip_tags(get_the_excerpt());
?>
<a href="http://pinterest.com/pin/create/button/?url=&media=&description=” class=”pin-it-button” >


Kalpit
July 18, 2012

We have a saviour here!

Thanks man. I was freaked out when the “usual” way didn’t work.

plus, It’s awesome!

Kudos to you.


Jeremy Mansfield
July 19, 2012

@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.


Samantha
January 7, 2013

Appears to not be working any longer; it was earlier today, however. Button doesn’t work on your site or on mine: http://www.thelenideas.com/testing/work/portfolio/catholic-charities/


Jeremy Mansfield
January 7, 2013

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.


Jeremy Mansfield
January 11, 2013

Kevin, check out our latest follow up to this article with hopefully a better solution than the original one provided:
http://design.brandaiddesignco.com/insights/add-a-custom-pinterest-button-to-your-website-part-2/770/


louboutin
January 31, 2013

Great web site. A lot of helpful information here. I am sending it
to several buddies ans also sharing in delicious.
And certainly, thank you to your sweat!


Ivy Tan
February 20, 2013

Dear Jeremy,

I implemented your code in my webpages, example:

http://adspax.com/property-listings?view=property&id=392:pandan-terrace-apartment,-pandan-perdana-k-l-kuala-lumpur

When user click “Pin It” button, the webpage will go to top level page, http://adspax.com/property-listings# and not stay at the original page.

Is there a way to prevent this?

Thanks, Ivy


sunil chhabra
February 26, 2013

Thank you so much for the great help….i had added the button…


http://www.edsdisplays.com.au
March 27, 2013

Thank you for writing this resource within your site.


Hayat Gul
April 26, 2013

Hi Jeremy, I tried to do this on my site but when I try to pin- I get the message, “sorry, there are no pinnable images on your page” I do have the hovering button though.


Purvi
April 28, 2013

thumbs up!!!!…thanks!!


Alan
August 6, 2013

+1 to the thank you pile. This helped me GREATLY!


Lee
September 3, 2013

I’m getting the same error msg as Hayat Gul…”sorry, there are no pinnable images on your page”….help?


Jeremy Mansfield
September 3, 2013

Hi Lee, unfortunately, I won’t be able to troubleshoot this for you. You might want to try out my follow up article that was adapted by a response one of our readers had and a slightly updated method > http://design.brandaiddesignco.com/insights/add-a-custom-pinterest-button-to-your-website-part-2/770/


Work With Us?