Add a Custom Pinterest Button to your Website

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!

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.

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?

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.

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.

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.

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

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!

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

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

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.

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.

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.

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.

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

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

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!

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!

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.

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.

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.

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/

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

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/