Feature
Post

Category
Code


How to add Pinterest’s “Pin It” button on your WordPress and Genesis Framework site

Pinterest website

Pinterest is probably the hottest sharing and organizing social network today, and if your website’s community has jumped on the pinning bandwagon, make sure it’s easy for them to share and save your stuff with the “Pin It” button. Here’s how you can add it to your WordPress site (including Genesis Framework-powered sites).

Install a Pinterest Pin It WordPress Plugin

The most painless route would be installing a Pinterest WordPress Plugin. There are already a few competing ones available at the official plugin repository such as Pin It On Pinterest (by bahia0019) and Pinterest “Pin It” Button (by pderksen).

If you’re using an existing social button service like AddThis, Slick Social Share Buttons, or Social Linkz, you’ll be happy to know that these plugins support Pinterest already.

Add the Pinterest Pin It button to your WordPress Theme

The button code which you can get from the Goodies page requires an image URL in addition to the usual post URL, so in this case we’re using the built-in Post Thumbnails feature.

In single.php and places where you call The Loop, add this code:

<?php $pimage = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()));
if ( $pimage ) { ?>
	<div class="pinterest"><a href="http://pinterest.com/pin/create/button/?
	url=<?php echo urlencode(get_permalink()); ?>
	&amp;media=<?php echo urlencode($pimage[0]); ?>
	&amp;description=<?php urlencode(get_the_title()); ?>"
	class="pin-it-button" count-layout="horizontal">Pin It</a></div>
<?php } ?>

Depending on the type of button you want, you can change the value “horizontal” to “vertical” or “none”.

In footer.php, add this code to the bottom, right before </body>:

<!-- Include ONCE for ALL buttons in the page -->
<script type="text/javascript">// <![CDATA[
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        if (window.location.protocol == "https:")
            s.src = "https://assets.pinterest.com/js/pinit.js";
        else
            s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
// ]]>
</script>

Insert the Pinterest Pin It button to your Genesis Framework WordPress site

If you use the Genesis Theme Framework, just add the above JavaScript to the footer script text box in the Genesis Options page, then add this to the functions.php file in your child theme:

add_action( 'genesis_post_content', 'pinterest_pin_it_button' );
function pinterest_pin_it_button() { 
    $pimage = genesis_get_image( array('format' => 'url') );
    if ( $pimage ) { ?>
    <div class="pinterest">
        <a href="http://pinterest.com/pin/create/button/?
            url=<?php urlencode(get_permalink()); ?>
            &amp;media=<?php echo urlencode( $pimage[0] ); ?>
            &amp;description=<?php echo urlencode(get_the_title()); ?>"
             class="pin-it-button" count-layout="horizontal">Pin It</a>
    </div>
    <?php }
}

This adds the button after the entry text. You can also choose from other Genesis Hooks for a different location on your blog.


  1. By Noel posted on February 19, 2012 at 2:27 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    This was valuable. Thanks for this post I was just adding the button to my site but this is a great option as well. A great blog and I will look forward to coming back again. :)

  2. By David Radovanovic posted on February 22, 2012 at 9:24 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    In the single.php template, does the code have to be in the loop?

  3. By Sophia Lucero posted on February 24, 2012 at 12:04 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    David: yes, since it calls the permalink and other information pertaining to the post. :)

  4. Trackback