Add a Custom Pinterest Button to your Website (Part 2)
When I started out searching for a global solution with a “one and done” approach to placing Pinterest’s “pin it” button on a page and wrote about it in this post, I didn’t quite expect the sheer volume of responses from users out there searching for the same thing. I was even more pleasantly surprised when one of our readers took the time to make this even better and provided a write-up on what he discovered.
Like many developers, Cameron wanted to give his visitors the ability to pin a variety images from his site to their Pinterest boards. For a little background re-cap, on the Pinterest site, when you enter a URL to pin, it collects all the images from the webpage and allows you to choose which one you want to pin. Pinterest also provides a very clever bookmarklet code that you can add to your browser to do the same thing from whatever webpage you’re currently on.
But if you use Pinterest’s official code to add a “pin it” button to your webpage, you have no such ability—you have to pre-select the image for the user to pin. The code looks something like this:
<a href="http://pinterest.com/pin/create/button/?url=yourpageurl.html&media=yourimgurl.html&description=yourdescriptiontext" target="_blank" count-layout="none"><img border="0" src="pin-it-button.png" title="Pin It"></a>
This seems unintuitive and rather limiting. Lots of other developers have been frustrated by this too, and have discovered a solution: call the Pinterest bookmarklet.js code from your website, which seems to work great.
The Pinterest team was contacted to ask if they had a better solution. You would think they might have a variation on their bookmarklet.js code for use on individual websites. And since the bookmarklet code resides on their servers, and that’s where everybody’s calling it from, seems like they would want to provide a better solution to reduce needless traffic on their servers. Pinterest failed to respond.
Cameron was able to go through the bookmarklet.js code and tried to make it more flexible and efficient. While not fully understanding everything Pinterest was trying to do, here is a variation on their code that will hopefully be a little simpler to use and more efficient.
First it was converted from a self-executing anonymous function to a function named selectPinImage(). Once the script is loaded, call this function whenever the “pin it” button is pressed.
The script can be loaded in a regular <script> tag, then the selectPinImage() can be called:
Or the script can be loaded dynamically when the pin it button is pressed. Here’s an xample with JQuery:
Either way, the script file should cache after it’s first loaded.
The revised version of the script seems to work fine in IE 7 and IE8. It’s unclear what the issue was preventing the original version from working in those browsers.
For the description for the pinned image, the original version of the script grabs any text that the user has selected on the page, the alt or title attributes of each image, or a prefined ‘pinDesc’ value (in that order). The ability has been added to specify text to be dropped in before or after the pin description. (For example, you could append the HTML page title.) You can specify it like this:
selectPinImage('text to add before the pin description','text to add after');
selectPinImage('text to add before the description','text to add after',true);
The original version collects pinnable elements from the entire page. Further added was the ability to specify an element within the page and to only gather pinnable elements from that. Example:
selectPinImage('text to add before the description','text to add after',document.getElementById('pageContent'));
Also added is the ability to define which HTML elements to collect for pinning. Defaults to “meta”, “iframe”, “embed”, “object”, “img”, “video”, “a”. But you could limit this list to, say, just “img” tags:
selectPinImage('text to add before the description','text to add after',document.getElementById('pageContent'),['img']);
The original function checked the page for a PINTEREST=NOPIN meta tag, and popped up an error message if it was found and exited. This seemed pointless since you wouldn’t add this to any page from which you didn’t want to pin things from, so it was removed.
The original function excludes any elements with the attribute nopin=”nopin”. This seemed useful, so it was left in.
Whew! So there you have it. Again, a big hearty thanks to Cameron Clark for taking the time to digest the problem and come up with a viable solution!
Happy pinning, and click here to read the first edition of this article.