Pinterest Buttons without Loading External Javascript

These days, it’s all about the performance. There’s no room in the pipeline left for just copy/pasting things like the Pinterest Button (or Twitter, Facebook, Google+, etc.) onto our web pages and leaving it at that.

If you don’t know what I’m talking about, there’s a “Pin It!” button, similar to the little Facebook Like buttons you see all around the web. To get this on your site, you copy some code from Pinterest’s website, which looks like this:

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" /></a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

What this does is adds the button to your site, and in order to do this, it adds two additional resources that are necessary to load with the page, both the PNG file and a Javascript file. Every time you load another image, JS or CSS file, you’re adding more weight to your page, and slowing down it’s performance.

It’s pretty easy to replace this button altogether with your own code:

<a href="http://www.pinterest.com/pin/create/bookmarklet/?url=https%3A%2F%2Fyourwebsite.com%2Ftitle-of-the-pin%2F&media=https%3A%2F%2Fyourwebsite.com%2Fthe-image.jpg&is_video=false&description=Some+additional+text+to+accompany.">Pin This</a>

You could just keep that code around, replacing things like yourwebsite.com with whatever your actual domain is, and so on. Not all that convenient though. Here are a few ways to automatically generate that content:

WordPress

If you’re using WordPress, you can automate a lot of this stuff. For example, lets say you’re using Featured Images and want to add a link to share that featured image anywhere on the page. This is the code you’d need:

<?php $imgurl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
if ($imgurl == '') { $imgurl = get_bloginfo( 'template_url' ).'/path/to/some-default-image.jpg'; } ?>
<a href="http://www.pinterest.com/pin/create/bookmarklet/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo urlencode($imgurl); ?>&is_video=false&description=<?php echo urlencode(get_the_excerpt()); ?>" class="icon-pinterest" target="_blank" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=500'); return false;">Pin</a>

In the first line, we grab the URL to your post’s featured image. If one doesn’t exist, on line 2 we set the image as some default image (note you’ll need to change the path there to an actual default image).

Then we create our link. urlencode(get_permalink($post->ID)) gets the link to the current post. We then output our image’s URL with urlencode($imgurl); and finally, add a little extra text via urlencode(get_the_excerpt());.

You could add this code near where you display the featured image itself, or anywhere on the page as this all needn’t be in the loop.

You’ll also want to add some styling to the link itself. More on that below.

So that’s cool for featured images, but what about the rest of the images in your post?

Automatically Add Pinterest “Pin it!” links to Images in WordPress

This can be done with images whether they’re in a figures (or a div with captions if you’re still using the old model) or not, but we’ll set it up here just to work with images in figures as it’s a little easier to position and make everything really pretty. Here’s what we’re going to end up with:

screenshot of an image with a pinterest button over top
The final product if you follow along with everything below.

Okay so first, let me say that there will be some additional Javascript involved, specifically jQuery. As WordPress loads jQuery automatically, and many plugins do even if you disable it, it’s pretty safe to assume that most WordPress pages are loading jQuery anyway. If you’d like to learn more about making the default jQuery that comes with WordPress even better from a performance perspective, read this.

To do this, open up footer.php and paste in the following:

<?php if (is_singular()) {
<script type="text/javascript">
jQuery(document).ready(function($) {
$('figure').hover(function(){
var pinurl = $(this).children('img').attr('src');
$(this).append( '<a class="append-pinterest icon icon-pinterest" href="http://www.pinterest.com/pin/create/bookmarklet/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media='+pinurl+'&is_video=false&description=<?php echo urlencode(get_the_excerpt()); ?>" class="icon icon-pinterest" target="_blank">Pin</a>');
}, function() {
$(this).children('a.append-pinterest').remove();
});
});
</script>
<?php } ?>

Let’s review it a bit for fun and so we know how things are happening.

Line one there is just some PHP saying “Only run this code on single blog posts, Pages, attachment pages and any singular custom post types. You could alter it to not run on Pages or just get rid of it (and the closing PHP tag then, too) altogether if you want this to happen on every single page of your site.

We then setup our jQuery and find any figure elements, and set a the pinurl variable to whatever the path to the image inside of the figure might be. Next, we add the Pin it! button with the $(this).append(...) function. This is all similar to how we did it for Featured Images above, just swapping out the Featured Image URL stuff for the jQuery / pinurl variable stuff.

Finally, I have this all setup to only show when we hover over the figure, and then to hide the button when we hover back out.

Note that if you’re not using HTML5 support for the caption shortcode in WordPress, you’ll want to replace $('figure').hover(function(){ with:

$('div.wp-caption').hover(function(){

Next up, lets dive into the CSS so we can get it all to look nice and show up at the top right of our figure / image.

figure {position:relative;}
.append-pinterest {background:red; color:white; padding:.25em; border-radius:2px; position:absolute; top:.25em; right:.25em; line-height:1em; display:block; transition:color 250ms, background 250ms;}
.append-pinterest:hover {background:white; color:red; transition:color 250ms, background 250ms;}

This will give you a nice looking red and white button that, when clicked, will open a new tab and allow the user to add the image to one of their boards on Pinterest. You’ll probably also note that this won’t add the Pinterest icon. I’m using icon fonts from Icomoon, which are being loaded onto the page anyway. If you’re not already using an icon font, or some type of SVG icon system, you’ll either want to inline some SVG code for this or not have the icon, as loading up an image just for this purpose would defeat half of the goal we have of eliminating two additional resources to load. On the other hand, since this code doesn’t actually execute until we hover over an image, the image wouldn’t be loading until well after the page had completely rendered anyway.

Up Next: How to Choose a Web Designer