How to Add Pinterest Pin It button to your WordPress Blog

/4 Comments/in , /by

Last Updated on June 4, 2021

Pinterest can be a great place to get a new source of traffic to your blog. We use Pinterest here at WP Cupid Blog, and we see great results in the amount of traffic that comes from Pinterest. In this post, we will easily show you how to add Pinterest pin it button to your WordPress blog.

 

Pin Image To Pinterest

how-to-add-pinterest-pin-it-button-in-your-wordpress-blog

 

Video Tutorial: How To Add Pinterest Pin It Button To Your WordPress Blog

How To Add Pinterest Pin It Button To Your WordPress Blog

Adding a Pinterest Pin it Button to WordPress Using Plugin

One of the quickest and easiest ways you can go about adding a Pinterest “Pin it” button in your WordPress site is by using a social sharing plugin. The plugin we recommend you use is the Floating Social Bar. To start off, you need to install and activate the Floating Social Bar plugin. Once you get the plugin installed and activated you need to go to the Settings area and then click on Floating Social Bar to configure the plugin.

 

floating-social-bar-settings

 

You are going to see available social services consisting of Linkedin, Facebook, Twitter, Google Plus, and Pinterest. You will see under that a section named, “Enabled Social Services.” All you have to do is drag and drop the Pinterest button to the Enabled Social Services section. If you want to include the other social media buttons that are showcased all you have to do is drag and drop them down to the Enabled Social Services along with the Pinterest button you dragged and dropped. Once you have the Pinterest button and any other buttons enabled just click save settings.

 

floating-social bar-plugin

 

Another cool feature with this plugin is that you can select to show the Pinterest Pin It button on posts, pages, media, Avia framework, and Portfolio items. Select where you would like to show your Pinterest Pin It button and click save changes and your all set.

 

pinterest pin-it-button-post-settings

 

Now all you have to do is head on over to your blog and take a look. You will now see the Pinterest Pin It button showing towards the top of your site as you can see in the example below.

 

pinterest pin-it-button-post-settings

 

Manually Adding a Pinterest Pin it Button to WordPress

Now I want to go over how to manually add a Pinterest Pin it button in WordPress. You want to start off by copying and pasting the below script in your footer.php file right before the body close tag.

Once you are complete with the above task copy and paste the code below into your single.php file at a location of your choice.

 

<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>

 

To go into more detail about the code above and what it is doing is it is pulling your Featured Image, the title of your blog post as the description, and the URL of the blog post. I do want to mention the code above is specifically designed for the vertical share button. If you need a horizontal share button, this is a very easy thing to do. What you want to do is change count-layout parameter to horizontal. You will find this located at the end of the second code provided below. You will see it says vertical. Just change it to say horizontal. Make sure you scroll all the way over to get the full code.

 

<?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>

Pinterest shortcode

The last thing I want to go over is if you want to create a shortcode for the Pinterest Pin It button. To do this, you want to copy and paste the below code either in your theme’s functions.php file or your site plugin’s file. Make sure you scroll all the way over when copying the code.

 

<?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');
?>

 

Final Thoughts

We hope this article helped you and showed you how to add Pinterest Pin It button to your WordPress blog.

Let us know in the comments below if this was helpful! We would love to hear from you.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Bryan Peterson
Latest posts by Bryan Peterson (see all)
© Copyright 2025 | WP Cupid Blog