As I’ve said a few times before, I prefer to keep control over the look of the social links that appear on this site. I also prefer to keep control over the source code and have an almost religious fervor against the iframed code bloat most social buttons produce.
So when it came time to add a Pinterest link to the share section, I again went in search of a text-only link. Stack Overflow had a couple of leads which ultimately didn’t work. It was easy enough to get a link to a ‘add pin’ window, but the solutions required that a specific url to an image be added. Pinterest’s ability to scan a page and show all pinnable images was missing.
I eventually came across Jeremy Mansfield’s post: Add a Custom Pinterest Button to your Website (Part 2), which does a great job explaining the crux of the issue, as well as a solid, well thought out solution by Cameron Clark.
I gave Cameron’s solution a try, and can confirm that it did indeed work. I ultimately decided to go the route below for a couple of reasons: 1. I wanted something a bit simpler, that didn’t require another enqueue_script, and 2. This solution shrank the sizes of the images that get pinned and I preferred them at full size.
As you’ll notice on this site, icon-fonts are used instead of text for these links, but you get the idea.
You’ll also notice the Pinterest icon is missing in the share section below. That’s because I conditionally show it only on Image posts. You can see it in action here.