WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
  • Deals
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

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
0 Shares
Share
Tweet
Share
Pin
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');
?>
0 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

53 Comments

Leave a Reply
  1. laira says:
    Feb 4, 2019 at 9:29 am

    hi wpbeginner, I follow your codes, may i know if i will still pin the images on my pinterest boards? or it will automatically pin there? Im still a beginner in this platform. thank you

    Reply
    • WPBeginner Support says:
      Feb 5, 2019 at 10:30 am

      The button when used would add it to your board.

      Reply
  2. Lorraine Reguly says:
    Nov 12, 2018 at 8:19 am

    Thanks for the code. I just added it to my author site. (I have no idea how the Pinterest button shows up on my images on my business site, but it does.)

    Now my author site is all set up!
    Thanks, Syed.

    P.S. I just followed you on Pinterest. :)

    Reply
    • WPBeginner Support says:
      Nov 13, 2018 at 8:31 pm

      Hey Lorraine,

      Thanks for following us on Pinterest. You can also find us on Twitter and Facebook.

      Reply
  3. RB says:
    Aug 18, 2016 at 12:48 am

    this is work !! thanks

    and

    I wonder…
    how can I change icon? Icon is still same when change code

    Reply
  4. Thales says:
    Jul 22, 2016 at 4:28 pm

    I did the last option, adding the short code to my theme’s functions.php file. It worked, but I couldn’t save my posts as draft anymore. Then I removed the code and it is not working. My site is still online, but I cannot log in into my site anymore. The following message appear:

    Warning: Cannot modify header information – headers already sent by (output started at /home/peque107/public_html/wp-content/themes/himmelen/functions.php:2) in /home/peque107/public_html/wp-includes/pluggable.php on line 1224

    Please help!

    Reply
  5. Emma steave says:
    Feb 25, 2016 at 5:28 am

    Thanks. Its great

    Reply
  6. Carissa says:
    Oct 4, 2015 at 1:59 pm

    Does this only apply for wordpress.org blogs? I have a wordpress.com blog and I am not sure if I can add this plugin to it?

    Thank you!

    Reply
    • WPBeginner Support says:
      Oct 5, 2015 at 3:38 pm

      Yes it is for WordPress.org. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.

      Reply
  7. Ruth says:
    May 13, 2015 at 6:45 pm

    I have a problem. I followed the instructions and came up with this error:

    Parse error: syntax error, unexpected ‘<' in /home/cmomb/butfirstwehavecoffee.com/wp-content/themes/notepad/functions.php on line 18

    Now I cannot get rid of it. Could someone advise. My site is now down.

    Reply
    • WPBeginner Support says:
      May 14, 2015 at 12:48 pm

      Open the functions.php file in a text editor like notepad. Go to line 18. You probably have <?php tag there that you don’t need. Delete it and also delete the ?> closing tag

      Reply
  8. Ian Harris says:
    Sep 12, 2014 at 7:24 am

    Thanks for this firstly

    I am struggling to position the element. It is seeming to always sit in the top left of the div.

    Is it possible to position it and also change the bg image to own custom one.

    Thanks

    Reply
  9. Paradise Found Around says:
    May 11, 2014 at 4:57 pm

    Great tutorial, as usual. I was wondering though if there was a way to modify it to use a custom button in place of the starboard one that automatically comes up.

    Thanks,

    Mark

    Reply
  10. mark taylor says:
    Mar 8, 2014 at 4:53 pm

    Good tutorial, i have put it on my site without any problems, i then tested it and it worked, but it still says 0 after i pinned.
    Mark

    Reply
  11. vrinda says:
    May 22, 2013 at 2:05 am

    I tried so many plugins… they don’t work with infinite scroll and nextgen gallery…. but with some changes this script solved my issue.. thanks

    Reply
  12. Michael says:
    Jan 30, 2013 at 7:08 am

    Hello,

    I just want to ask if I could change the size of the “pin it” button? Because it seems that it was a little bit small.

    Regards,

    Michael

    Reply
    • Editorial Staff says:
      Jan 30, 2013 at 9:38 am

      You could use the pin count layout vertical or horizontal. Other than that, no you cannot change the size.

      Reply
  13. Jenny says:
    Dec 20, 2012 at 3:04 pm

    This code just recently stopped working. I had it on my site and it was working great and recently images appear to be working but then when you go view the pinboard there is no image set. Other times when trying to pin it 502 error that comes from the Pinterest site. Any ideas?

    Reply
    • Editorial Staff says:
      Dec 21, 2012 at 7:51 am

      Probably server errors on Pinterest’s end. We have this code running on our other sites.

      Reply
  14. Ido Schacham says:
    Nov 7, 2012 at 9:33 am

    There’s a bug in the code. The generated href for the pin it button should include ‘url=’, currently it’s missing the equals sign.

    Reply
    • Editorial Staff says:
      Nov 7, 2012 at 9:51 am

      Fixed the shortcode code for that. Thanks for reporting it :)

      Reply
  15. jess says:
    Sep 3, 2012 at 5:53 am

    For wordpress users..adding the pin it or any other social media is easy! Under dashboard, go to setting, click on sharing and they all appear- click on what you want to add!

    Reply
    • Editorial Staff says:
      Sep 4, 2012 at 9:17 am

      You are referring to WP.com sites. This tutorial is for self-hosted WordPress sites. Two different things.

      Reply
    • Jen M says:
      Jan 28, 2013 at 9:36 pm

      THANK YOU! I have been searching for how to do this for 2 days & downloaded something & that didn’t work, I was about to give up & then THANKFULLY read your comment. I appreciate someone making it as EASY as it really is, how come wordpress can’t do that?

      Reply
    • Jenn K says:
      Mar 6, 2013 at 8:19 pm

      Ooh, thanks for the tip! Exactly what I was looking for :)

      Reply
  16. Nick says:
    Jun 12, 2012 at 4:59 pm

    Is there a way to customize this so you can select a custom image for the pin-it button ?

    Reply
    • Editorial Staff says:
      Jun 13, 2012 at 10:01 am

      If you mean a custom image for your article, then yes you can. Look at the &media tag in the second code.

      Reply
  17. Husein Yuseinov says:
    Apr 2, 2012 at 7:53 am

    Hi,
     
    I need to implement this code but in header file, but postthumbnail returns error?!

    Reply
    • wpbeginner says:
      Apr 2, 2012 at 7:58 am

       @Husein Yuseinov You have to call the thumbnail code within your post loop. In order to call it in your header.php file, you must utilize the global variable. 
       
      https://www.wpbeginner.com/wp-themes/how-to-display-custom-fields-outside-the-loop-in-wordpress/

      Reply
      • Husein Yuseinov says:
        Apr 2, 2012 at 8:02 am

         @wpbeginner Thanks for the fast respond, but I’m not a coder, and it’s hard for me to understand you.

        Reply
        • wpbeginner says:
          Apr 2, 2012 at 8:06 am

           @Husein Yuseinov Ok… so here is what you do. Add the following line above $pinterestimage line inside the PHP tags:
           
          global $wp_query;
          $postid = $wp_query->post->ID;
           
          Then replace $post->ID with $postid and it will work. Also after the code, you may want to end wp_reset_query();
           
          This is the best we can do. What you are asking for requires coding. If you are unable to do this, then shoot us an email. We can help you out for a small fee. 

  18. robthecomputerguy says:
    Mar 20, 2012 at 6:35 pm

    What in the world is going on with the “animhut blog” button on thee next 3 comments?

    Reply
    • wpbeginner says:
      Mar 23, 2012 at 7:09 am

       @robthecomputerguy I think they just liked our comments, and livefyre is showing their profile.

      Reply
      • robthecomputerguy says:
        Mar 23, 2012 at 3:49 pm

         @wpbeginner Oh that’s fascinating – that didn’t even occur to me – thanks for the follow up!

        Reply
  19. FuturePocket says:
    Mar 14, 2012 at 8:13 pm

    I tried adding this… it worked but when you click on “Pin it” and it opens the window in a new browser and you actually submit the pin, it just reloads the newly opened window and the pin isn’t submitted. Decided not to implement it until they’ve fixed their bugs.

    Reply
  20. Phil Derksen says:
    Jan 30, 2012 at 7:11 pm

    If you don’t want to mess with adding code, I created a Pin It button plugin you can try out.

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

    (or just search for “pinterest pin it” under plugins)

    Reply
  21. Jean Oram says:
    Jan 30, 2012 at 5:02 pm

    I used the ‘follow me’ code on the Pinterest Goodies page and pasted it into the ‘text’ widget on my WordPress blog. The button now appears right after my mini bio. It works quite well. :)

    Reply
  22. Editorial Staff says:
    Jan 30, 2012 at 11:10 am

    For any advanced theme framework like Thesis, Genesis, Headway etc, you have to add these codes via functions.php file using the framework appropriate hooks. We cannot possibly cover all the theme frameworks out there. Most theme framework blogs have instructions on how to do customize the themes.

    Reply
  23. wpbeginner says:
    Jan 30, 2012 at 10:48 am

    Your method seems a bit tedious because you would have to do it for each image.

    Reply
    • Ruby says:
      Jan 30, 2012 at 11:39 am

      @wpbeginner It’s not ideal, but it’s really not much more than you have to do to post the image anyway. I’m still looking for a great option (plugin ideally) that a) works on my theme and b) is easy. Luckily, due to the popularity of Pinterest, I’m confident someone will have one up and running soon!

      Reply
  24. wpbeginner says:
    Jan 30, 2012 at 10:47 am

    Make sure you set $pinterestimage[0] otherwise it will return an array. Other than that not sure why you are getting the error.

    Reply
    • merrittsgret says:
      Jan 31, 2012 at 6:14 pm

      @wpbeginner It’s working now, thanks to the shortcode code you gave us. Thank you so much!

      Now to get it to align with everything else via CSS… (http://ylcf.org/2012/01/tomorrow-2/) Ah, the joys.

      Reply
      • wpbeginner says:
        Feb 1, 2012 at 8:15 am

        @merrittsgret Yeah, you might have to utilize the !important tag in some cases.

        Reply
  25. dave2 says:
    Jan 29, 2012 at 2:36 pm

    Any idea on how to change it from featured image to first image?

    Reply
    • wpbeginner says:
      Jan 30, 2012 at 10:52 am

      @dave2 Use a variation of this snippet:https://www.wpbeginner.com/wp-themes/how-to-set-a-default-fallback-image-for-wordpress-post-thumbnails/

      Reply
      • animhut blog says:
        Feb 20, 2012 at 5:06 am

        @wpbeginner @dave2 Thank you for the tutorial ! i need that for my another photography site

        Reply
  26. Gretchen says:
    Jan 28, 2012 at 7:19 pm

    It works, but it shows the text “array” before the Pin It button. I’m calling it via my functions.php, like so “echo $pinterestimag…..<?php;" Could that be why?

    Reply
  27. Heidi at CrockPotLadies says:
    Jan 28, 2012 at 10:31 am

    I cannot seem to get it to work. I put the first code in my footer.php before the closing body tag and then added the other code into my single php after my other sharing buttons provided by po.st. Yet when I look at a post on my site (http://crockpotladies.com/recipe-categories/entrees/crockpot-chicken-enchiladas/) I do not see a Pin It Button. Any suggestions?

    Reply
    • wpbeginner says:
      Jan 30, 2012 at 10:51 am

      @Heidi at CrockPotLadies We can see the button in the next line after the Subscribe to feed etc links.

      Reply
  28. wmwebdes says:
    Jan 28, 2012 at 7:13 am

    Only just started to hear about Pinterest – looks as though it is really taking off.

    Thanks for the tut.

    Reply
  29. Ruby says:
    Jan 27, 2012 at 3:07 pm

    Thanks for this. I recently tried a similar method but it doesn’t seem to work with my WordPress.org theme, so I came up with my own work-around and posted it here: http://www.tomaytotomaaahto.com/tools-and-tutorials/how-to-turn-your-images-into-pinterest-pin-it-buttons-wordpress

    Reply
  30. YeahThatsKosher says:
    Jan 27, 2012 at 1:59 pm

    How do you get this to integrate with an existing WP plugin like Digg Digg or Sociable?

    Reply
    • wpbeginner says:
      Jan 30, 2012 at 10:49 am

      @YeahThatsKosher You would have to ask the developers to do so for you.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
MonsterInsights
MonsterInsights
Google Analytics made easy for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 25 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2019 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2019)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2019)
    • SiteGround Reviews from 1032 Users & Our Experts (2019)
    • Bluehost Review from Real Users + Performance Stats (2019)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Start a Podcast with WordPress (Step by Step)
    • How to Choose the Best Domain Name (8 Tips and Tools)
    • How to Setup a Professional Email Address with Google Apps and Gmail
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2019 – Step by Step Guide
Deals & Coupons (view all)
Dreamhost
DreamHost Coupon
Get 40% OFF on DreamHost and get a Free Domain.
Elegant Themes
Elegant Themes Deal
Get all 87 amazingly beautiful WordPress themes by Elegant Themes for only $69. That is like $0.79 per theme!
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • Awesome Motive

Copyright © 2009 - 2019 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

WordPress hosting by HostGator | WordPress CDN by MaxCDN | WordPress Security by Sucuri.