One Mom’s Journey from Fat to Skinny to Confident

BLOGGING THOUGHTS

So You Want a “Pin It” Button on Your WordPress Blog

16 Comments 3280 views

I don’t know if I’m the only one, but getting the Pinterst button to work on my site was a major pain in the…. butt. It took me a few attempts and some troubleshooting, so I thought I’d share my experience to help those having a hard time.

The Code

This is the basic code for a Pin It button from the Pinterest site.

<a href="http://pinterest.com/pin/create/button/?
url=URL&media=IMAGE&description=DESCRIPTION" 
class="pin-it-button" count-layout="none">Pin It</a>
<script type="text/javascript" 
src="http://assets.pinterest.com/js/pinit.js"></script>

We need to replace URL, IMAGE, DESCRIPTION with the link, image link and description of our post.

Description and link are easy using the_permalink() and the_title() functions.

<a href="http://pinterest.com/pin/create/button/?
url=<?php the_permalink() ?>&media=IMAGE&
description=<?php the_title(); ?>" class="pin-it-button" 
count-layout="none">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

That leaves us with IMAGE to worry about.

WordPress introduced the Post Thumbnail feature in version 2.9 so if you are up to date with your WordPress version you will access to it. Post Thumbnail is like a default image associated with each of your posts. By using this feature we can access the URL of the thumbnail to be used as the image of your pin.

If you haven’t been setting thumbnails already, there’s a few things we may need to do.

1. Enable Thumbnail Support

The first thing you need to do is add the following to your functions.php file if it isn’t already there.

<?php
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}
?>

2. Assign a Thumbnail to all Posts

Thankfully there is a plugin for this! Install and activate the Auto Featured Image. It will go through your archives and set the first image in your post as the thumbnail. It will also automatically assign a featured image to any new posts you publish.

Once you activate the plug-in go to Settings -> Auto Featured Image and click "Generate Thumbnails"

Let it do it’s magic!

3. Access the Thumbnail URL

Now that your theme supports thumbnails and you have one associated with each post, all you need to do is access it. This is done with a simple script.

<?php $featuredImage = 
wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 
'single-post-thumbnail' ); ?>

By placing this script above the Pin It code we can use <?php echo $featuredImage[0]; ?> to pass the URL of the image to Pintereset.

Final Code

Putting all this together, simply place the following code where you would like the Pin it button to display (within the main loop, of course)

<?php $featuredImage = 
wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),
 'single-post-thumbnail' ); ?>
 <a href="http://pinterest.com/pin/create/button/?
url=<?php the_permalink() ?>&
media=<?php echo $featuredImage[0]; ?>&
description=<?php the_title(); ?>"
class="pin-it-button" count-layout="none">Pin It</a>

<script type="text/javascript" 
src="http://assets.pinterest.com/js/pinit.js"></script>

Hopefully this sheds some light. I’m sure it will all be replaced with a plugin soon enough if it isn’t already, but I like the automation aspect of this approach. Once it is in place each Pin It button is ready to go without any additional work from me.

Phew.



Leave a comment

I’d love to hear your story or thoughts on mine.

However, to prevent the massive amounts of spam I was receiving I have turned off comments on any post older than 5 days old. If you'd like to leave me a note regarding this post or anything really try me on twitter (@RoniNoone,) my Facebook page, or even IG (@RoniNoone) I'm so sorry for the inconvenience. I never thought I'd have to do this but it's gotten way out of hand and comment management has become simply too time consuming to manage.

Discussion

There are 16 comments so far.

    jennettefulda

    January 22, 2012

    I like the featured image approach since that lets you specify the image for each post. Thanks for the code! You can also use the PinIt bookmarklet code as the link: http://makemyblogpretty.com/2011/11/15/how-to-add-a-pinterest-pin-it-social-media-button-to-your-blog-posts/

    MelGetsFit

    January 23, 2012

    Thanks for the info! Now I just need to find time to play around with it. :)

    HarpaJ

    January 28, 2012

    There are actually at least two plugins now. I use this one

    http://wordpress.org/extend/plugins/pinterest-pin-it-button/

    MalcolmBedell

    January 30, 2012

    Thank you so much…after trying (and failing) to piece together a solution for myself, this finally worked like a charm!

    seitanist

    February 8, 2012

    I’ve been having some real trouble getting this to work, and after looking at the facebook open graph api for getting the featured image, I feel like there’s an issue with grabbing the featured image url. Their solution is to use global $post;

    Is there anyone I can integrate my pinterest button like this? I would like to keep all of my code inside the functions.php file, calling it through an action.

    seitanist

    February 8, 2012

    I was able to do what I wanted (using AddThis) with the following:

    <?php $featuredImage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ ); ?> <a pi:pinit:url=”<?php the_permalink() ?>” pi:pinit:media=”<?php echo $featuredImage[0] ?>” pi:pinit:layout=”horizontal”></a>

    seitanist

    February 8, 2012

    I was able to do this by using the following (in my AddThis) code:

    ID ), ‘single-post-thumbnail’ ); ?> <a pi:pinit:url="” pi:pinit:media=”” pi:pinit:layout=”horizontal”>

    seitanist

    February 8, 2012

    Figured this out: called the thumbnail src line right before embedding the button so it’s inside the loop: www.thenailthatsticksup.com

    NewLeafEats

    February 12, 2012

    Thanks so much for this! I had pretty much given up trying to figure it out on my own!

    MalcolmBedell

    February 17, 2012

    This worked like a charm until a day or two ago…now the counts are no longer showing, though the rest of the functionality is there. Any ideas?

    RoniNoone

    February 17, 2012

    @MalcolmBedell Do you mean the “pin counts?” That’s probably them… is it still giving you issues?

    MalcolmBedell

    February 17, 2012

    @RoniNoone Thank you for your reply! Yes, because of how it stopped working so abruptly, I assumed it was a change on their end. I was just wondering if you had a workaround, or were seeing this issue, as well.

    RoniNoone

    February 17, 2012

    @MalcolmBedell I don’t post the pin counts so I wasn’t aware.

    MalcolmBedell

    February 17, 2012

    @RoniNoone Any ideas for a fix?

    RoniNoone

    February 17, 2012

    @MalcolmBedell I don’t because it’s just a setting from them. Nothing I do affects it. Not that I know anyway!

    jennettefulda

    February 17, 2012

    @MalcolmBedell @RoniNoone One of my clients sent me this code for Blogger sites the makes the counter work. I don’t know if it works or would fix your problem though: http://www.bloggersentral.com/2012/02/add-pinterest-pin-it-button-on-blogger.html