WPBeginner» Blog» Tutorials» How to Add Pinterest “Pin It” button in your WordPress Blog

How to Add Pinterest “Pin It” button in your WordPress Blog

Last updated on February 23rd, 2014 by Editorial Staff

Special WordPress Hosting offer for WPBeginner Readers

How to Add Pinterest “Pin It” button in your WordPress Blog

Recently while monitoring our blog stats, a new traffic source was popping up enough for us to notice. This traffic source was Pinterest. We started using the platform and saw great potential in it therefore we have added it on List25. In this article, we will show you how to add the Pinterest “Pin It” button to your WordPress blog.

Pinterest Buttons

Adding a Pinterest Pin it Button Using Plugin

The easiest way to add a Pinterest “Pin it” button to your WordPress site is by using a social sharing plugin. We recommend using a Floating Social Bar, which we use on our own sites. First you need to install and activate the Floating Social Bar plugin. Upon installation, you need to go to Settings » Floating Social Bar to configure the plugin.

Adding Pinterest Button to WordPress using Floating Social Bar

Simply drag and drop Pinterest button to the Enabled Social Services area, along with other buttons that you would like to display and save your settings.

Manually Adding a Pinterest Pin it Button in WordPress

First thing you need to do is paste the following script in your footer.php file right before the body close tag.

<script type="text/javascript">
(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;
        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>

Once you have done that, you can add the following code in your single.php file at a location of your choice:

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

The code above is basically pulling your Featured Image, the title of your post as description, and the URL of the post. It is designed for the vertical share button. If you want to put the horizontal share button, simply change count-layout parameter to horizontal.

We hope that this will help. P.S. if you are on Pinterest then please follow Syed Balkhi

Pinterest Shortcode

Update: one of our user wanted to create a shortcode for the Pinterest “Pin It” button. You can easily do so by pasting the following code either in your theme’s functions.php file or your site plugin’s file:

<?php
function get_pin($atts) {
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
return '<a href="http://pinterest.com/pin/create/button/?url=' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }

add_shortcode('pin', 'get_pin');
?>