rossharper.net

Adding a Pinterest button (and others) to a WordPress Blog

Pinterest_Logo

Pinterest seems to have taken off hugely recently and has become the social network du jour. I had a dabble with it when I first got an invite and “pinned” some of my own photos there and some other links I found interesting. However, it never really captivated me and I have largely ignored it since. While I, and many of my peers, may not have taken to this new way to share, others have. Lots of others have. It seems to have become very popular amongst the female demographic in particular. I already had added support to share links to my blog posts via Twitter, Facebook, and Google+, so I decided to add a Pinterest “Pin-it” button too.

ShareBar

It’s a relatively simple thing to do.

Plugin vs. Rolling Your Own

I should have called this Adding a Pinterest Button to a WordPress Blog – The Quick & Dirty Way. When I first set up the blog, I knew I wanted to add sharing support. I briefly looked at a few off-the-shelf WordPress plugins, but none of them fitted what I wanted exactly. So, I just baked my own sharing buttons into my custom WordPress theme. With hindsight, I should have developed this as a plugin, but I was new to WordPress at the time, so I didn’t bother. Putting this stuff into a configurable plugin is a todo task for the future. If you’d rather use a plugin, try one of these. If you don’t like them, or, like me, prefer to roll your own, continue reading…

My Existing Sharing Setup

Firstly, I added a new PHP file to my theme that contains the code that generates the sharing buttons: sharing.php

As I wanted to have the sharing buttons at the bottom of each post in the main view, and also at the bottom of the post on the single post view, I needed to add them to the loop.

For my theme, I have loop templates for the single and index pages (loop-single.php and loop.php), within which I include the sharing.php script. I have a feature on my blog called the “postfeaturebox”, which sits below the main content of the post, so I added the sharing script here:

The sharing.php script contains the markup and PHP code for defining the sharing buttons:

Now, these don’t all work on their own. In addition we need to add some scripts from the sites in question that load with our page, find the buttons, and perform some magic on them to make them active. These are added in my theme’s functions.php script.

Also, I’ve done some tweaking to the CSS classes for the buttons in order to position them the way I want:

Adding the Pin It Button

Adding the Pinterest “Pin it” button is much the same. As a starting point, I used the instructions on

Pinterest’s Goodies page for adding a “Pin it” button. From there, I needed to customise the code so that each button was specific to the post in question; I needed to add: * The permalink URL for the post * The default description, which would be the post title * The URL for the featured image, to use as the pinned image Getting the permalink and title are straightforward, via calls to the_permalink() and the_title(), respectively.

Getting the featured image is a little more complex, so I created a new function for it in my functions.php:

This checks if the post has an image via has_post_thumbnail(). If it does, it retrieves it via get_post_thumbnail_id( $post->ID ) and wp_get_attachment_image_src( $thumb_id, 'full', false );. The image src is returned as an array, so we get the actual URL from the array by getting the first item.

Notice that I have chosen to get full-size images. You may wish to use a different size. Just in case the post does not have any images in it, the header image from the theme can be returned using a call to header_image(). Notice that I have commented this out because my current theme doesn’t use header images yet, the banner is hardcoded in my theme instead. If you have a hardcoded image you want to use, you can modify this code.

Finally, we can write the markup for the actual button itself, in sharing.php:

Again, we need to add a script in functions.php. Here it is with the Pinterest script added:

And, do some CSS positioning:

Et, Voila!

That should be it. The posts should now include a Pinterest “Pin it” button along with the other sharing buttons. When I click on the button, it brings up Pinterest’s pinning dialog, with the appropriate details filled out from my post.

Pinning

Other resources & notes

Some more handy resources:

UPDATE

You may have noticed that I have since removed the Facebook and Google+ sharing buttons. My main reason for this was because the formatting had gone wrong on them, but also for performance reasons — there are just to many scripts running on each page. I’ll probably remove Pinterest soon and just leave Twitter.