A Pin-it button on your website or blog helps the audience to pin your content to their Pinterest boards in no time. It is in the list of must have gadgets on websites, as it has the capability to make your site grow and earn good profit.

Why should I add Pin-it button to my site?

Pinterest, being the latest hot concept in Social media, has provided users more traffic referrals than some of the top social websites like YouTube and Google+. If it can grow traffic, it may also increase subscriptions and sales. So, it becomes important to join Pinterest and be active there, especially when you are a Blogger, Webmaster or social media junkie.

In this post, I’m going to cover how you can add a Pinterest pin-it button to your blog or site the easiest possible way.

Pinterest button for websites

Installing Pin-it button on any website

You may directly grab the code for Pinterest pin it button from Pinterest Goodies but I’ve created this guide to make this task more easier for you.

The Pinterest Goodies page doesn’t provide your a ready-made pin-it button for serveral different platforms like Blogger, WordPress, Tumblr etc., but this guide does. So, lets start adding the button now.

Note: Before going to the tutorial, please make sure you’ve created a backup of your template or theme or static site, so that if anything goes wrong, you may revert to the working version.

Simple Pin-it button link

If you focus on making your site fast-loading and don’t use much JavaScript up there, a simple Pin-it button link would be enough. Grab the below given code, put it on your website and done!

<a href="//www.pinterest.com/pin/create/button/" class="pin-it-button" count-layout="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" alt="Pin it" / ></a>

Pin-it button for static websites

If your website is static in nature, you don’t have to worry about the integration of the button on it. Just copy-paste the below given code to your website’s HTML, save changes and see the button in action, working 100% correctly.

<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonPin" data-pin-config="beside" data-pin-color="red" data-pin-height="28"><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png' alt='Pin it' / ></a>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

Pinterest Pin it button for WordPress

You may easily add the Pin-it button to your WordPress blog with the help of a plugin, but if you’re a code ninja, I mean if you want to add it manually, here’s the thing:

  • Go to your theme directory
  • Edit single.php.
  • Put the below given code just above or below <?php the_content(); ?>, it depends on where you want to display the button: 
    <a href="//www.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_the_title(); ?>" data-pin-do="buttonPin" data-pin-config="beside" data-pin-color="red" data-pin-height="28"><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png' alt='Pin it' / ></a>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
  • Save Changes.

Pin it button for Blogger

  • Navigate to your Blogger Dashboard » Template » Edit HTML
  • Find <b:includable id='shareButtons' var='post'>, and paste the following code just below it: 
    <a expr:href='"//www.pinterest.com/pin/create/button/?url=" + data:post.url + "&description="+data:post.title' data-pin-do="buttonPin" data-pin-config="beside" data-pin-color="red" data-pin-height="28"><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png' alt='Pin it' / ></a>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
  • Save Template.

See the button live on your blog!

Pinterest Pin it button for Tumblr

  • Go to your Tumblr Dashboard » Edit » HTML
  • Find {/block:Regular} and paste the following code above or below it, depending on where you want the button to appear: 
    <a href="http://www.pinterest.com/pin/create/button/?url={Permalink}&description={PostTitle}" data-pin-do="buttonPin" data-pin-config="beside" data-pin-color="red" data-pin-height="28"><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png' alt='Pin it' / ></a>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
  • Click Update.

Quick Tips

  • Use Ctrl + F or Command + F keys to find the code while editing your template or theme or website’s HTML.
  • You may alter the value data-pin-config to above, beside or none to get Pinterest button with horizontal count, vertical count and no count respectively.
  • You may remove the data-pin-height attribute to get the default small appearance of the button.
  • Lastly, consider sharing this tutorial with friends, or, you may follow us on Pinterest :)

I hope this guide has helped you to achieve what it is meant for. If you’ve a question, suggestion or experiencing problems with the integration, let me know through your comments.

Read further