Announcement
- Announcing: Custom Login PRO – Pro version of Custom Login by yours truly.
- Announcing: Frosty Themes ☃ – Custom built WordPress themes by yours truly.
- Photographer? Checkout Photography Blog Sites WordPress portfolio made easy
- I use Dropbox everyday!
- This site is faster thanks to MAX CDN.
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><a class="pinterest.com/pin/create/button/" count-layout="horizontal">Pin It<script type="text/javascript" src="/img/spacer.gif"> </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 class="pinterest.com/pin/create/button/?url=' . $url . '&media=' . $image . '" count-layout="horizontal">Pin It</a><script type="text/javascript" src="/img/spacer.gif"> </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></li>'); $(pinterest).delay(1000).appendTo('li.share-pinterest').show(); } }
4 Responses
Have you seen en.support.wordpress.com/sharing/#adding-your-own-service ? It requires that the sharing service accept parameters via the URL though so it may not work in this case.
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.
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.