Updated: Add Pinterest pin to Jetpack with jQuery

See my update below

My girlfriend is all about Pinterest, and last week I added a link and a favicon in Jetpacks sharedaddy module. Well it didn’t work so well, and didn’t stand up to the Twitter and Facebook buttons she has.

Another issue was Jetpack doesn’t have a shortcode/regex to get the featured image and any image for that matter, so the Pinterest button never quite worked.

Tonight I tried out a few things and came up with a quick fix with jQuery. Using this code I was able to load the pin button next to all the others, so enjoy.

Hard coded or in a js file

jQuery(document).ready(
	function($) {

		var sharedaddy = $('.sharing');
		if ( sharedaddy.length > 0 ) {
			$('li.share-end').before('<li class="share-regular"><a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="horizontal">Pin It<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></li>');
		}

	}
);

That’s it!

Function in WordPress (theme or core plugin)

	add_action( 'wp_enqueue_scripts', 'frosty_enqueue_scripts' );
}

function frosty_enqueue_scripts() {
	wp_register_script( 'pinterest', trailingslashit( THEME_URI ) . 'js/pinterest.js', array( 'jquery' ), null, true );
	wp_enqueue_script( 'pinterest' );
}

Get your Pinterest goodies here.

After some real play time with the method above I found that Pinterest didn’t grab the image from the site, so I updated the some functions and changed how I went about outputting the pin button.

First off I’m no longer adding Pinterest via jQuery, but outputting the script and HTML into a hook in a theme and then moving it to the location I choose.

Example:

function jeana_pinterest_button() {
    global $post;

    $url = urlencode( get_permalink( $post->ID ) );

    if ( function_exists( 'get_the_image' ) ) {
	$image = get_the_image( array( 'size' => 'large', 'link_to_post' => false, 'image_scan' => true, 'format' => 'array', 'echo' => false ) );
	$image = urlencode( $image['src'] );
    } else {
        $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
	$image = urlencode( $image[0] );
    }

    $html = '<div id="pinterest-wrapper" style="display:none"><a href="http://pinterest.com/pin/create/button/?url=' . $url . '&media=' . $image . '" class="pin-it-button" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>';
    print $html;
}

I am then hooking the above function into a hook built into the theme (I am using Hybrid Core) I am using, you may want to use wp_footer or a hook that you are more familiar with.

add_filter( "{$prefix}_after_loop", 'jeana_pinterest_button' );

The new Pinterest button should be working now, thought I’d still like to see it next to all the other share buttons, so I’ve hidden the pinterest-wrapper and will use jQuery to move and show it:

/* Pinterest */
var sharedaddy = $('.sharing');
if ( sharedaddy.length > 0 ) {
	var pinterest = $('div#pinterest-wrapper');
	if ( pinterest.length > 0 ) {
		$('li.share-end').before('<li class="share-pinterest share-regular"></li>');
		$(pinterest).delay(1000).appendTo('li.share-pinterest').show();
	}
}