How to add Pinterest Button to Website?

Easiest guide showing how to integrate a Pinterest “Pin-it” button to your website or blog to increase your Social media traffic.

Adding a Pin-it button to your website or blog enables your audience to pin your content to their Pinterest boards in not time if they wish to do so. I’ve written a lot about always talk about the advantage of providing adding social share buttons on websites to increase their social exposure, the audience and hence, the traffic. On the other hand, share buttons also provide your readers the way to spread word directly from the source.

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+. So, it becomes important to join Pinterest and be active there, if 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.

add pinterest button to website

Add a Pinterest Pin-it button to website, or Blog

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 guide contains the Pin-it button code for different platforms including WordPress, Blogger, Tumblr and even Posterous. So, lets start adding the button now.

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

Simple Pin-it button link

If you focus on quick loading on your site and don’t use much JavaScript based things up there, a simple Pin-it button link would do the trick for you. Grab the code below, put on your website and done!

<a href="http://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/" class="pin-it-button" data-pin-do='buttonPin' data-pin-config='above'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png' alt='Pin it' / ></a>
<script type="text/javascript" src="http://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 WP Pinterest plugin. But if you’re a code ninja, I mean if you’re looking to add it manually, here’s the thing:

Go to your theme directory and edit single.php. Put the below given code just * above / below <?php the_content(); ?>:

<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(); ?>" class="pin-it-button" data-pin-do='buttonPin' data-pin-config='above'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png' alt='Pin it' /></a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Save Changes.

I’ve written a WordPress Plugin called WP Pinterest which can help you to add the pin-it button to your WordPress site in no time. Besides that, you can add Pinterest follow button and even your Pinterest Pinboards to your blog.

Pinterest Pin it button for Blogger

Log in to you Blogger account and go to Blogger Dashboard » Template » Edit HTML. Find <b:includable id='shareButtons' var='post'> paste the following code just below it:

<a expr:href='"//www.pinterest.com/pin/create/button/?url=" + data:post.url + "&description="+data:post.title' class='pin-it-button' data-pin-do='buttonPin' data-pin-config='above'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png' alt='Pin it' /></a>
<script type="text/javascript" src="http://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 / below it:

<a href="http://www.pinterest.com/pin/create/button/?url={Permalink}&description={PostTitle}" class="pin-it-button" data-pin-do='buttonPin' data-pin-config='above'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png' alt='Pin it' /></a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Click Update.

Pinterest Pin it button for Posterous

Log in to your Posterous account and go to Manage » Theme and Customize » Advanced » Enable Advanced Theming. Now find <div class="posterous_header"> and paste the following code just * above / below it:

Posterous was discoutinued in April 2013 by Twitter Inc.

Since external JavaScript is no more supported on Posterous, you will not be able to see JavaScript sculpted Pinterest Pin it button on your Posterous spaces. But no worries, here’s the solution to this problem – working Pinterest Pin it button for Posterous without JavaScript!

In your Posterous dashboard, navigate to Manage Spaces » Space Settings » Edit Theme » Advanced, and find <section class="share">, add the following code just below it:

Code removed...

Save Changes. You can check out the button in action here.

Quick Tips

  • Use Ctrl + F or Command + F to find the code in while editing your template 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.

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

Loading Comments...