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