Updated: Add Pinterest pin to Jetpack with jQuery

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 Pinterest pin button next to all the other share buttons built into Jetpacks sharedaddy module.

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.

Update

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();
	}
}
Default image
Austin
πŸ’πŸ½β€β™‚οΈ Husband to Jeana. ⚾️ Dodgers obsessed. πŸ† World Series Champs. πŸ’» Lead Software Engineer @ Beachbody. πŸŒπŸΌβ€β™‚οΈScratch golfer. 🌱 Hydroponic Gardner. 🍿 Plex nerd. πŸš™ '15 WRX & '66 Corvette C2. 🐢 Missing my love Keiki; RIP 😒. Follow me on Twitter @TheFrosty & Instagram @TheFrosty.
Articles: 0

9 Comments

    • Yeah, it requires some javascript and a class to the anchor. I tried to get it to work that way, but just wasn’t clean. So, loading it with javascript is the almost next best thing at present time.

  1. What file do I add the code to? (sorry…i’m new at this WordPress thing)

    Do I place the last snippet of code you have on this page somewhere in this php file? ( jetpack/jetpack.php )

    Or, do I need to add more code somewhere? Thanks for your help

    • Best to build a plugin for your site, if you can’t figure that out add it to your current theme’s functions.php file. You’ll have to add the javascript to the appropriate file as well.

  2. I so wish that I understood everything you did here. But I don’t….

    All i know is that you figured out a way to add Pinterest to Jetpack. Yay! I can’t figure it out myself. As you said, the logos look awful – if they appear at all.

    I’m about as far from a developer as you can get.

    Could you please guide me?

    Thanks!
    Paula

  3. Hi!. Can you make a link or an url that i can put into “add a new service” of Sharing Settings of Jetpack Plugin? Sorry for my english, I’m an italian blogger :/

Leave a Reply

%d bloggers like this: