How to add Pinterest Button to Website?

Pinterest is going hot these days. On Pinterest, you can pin your favorite things and others can comment, like or re-pin your pins. You can also categorize your pins by creating different Boards.

Now, if you run a blog or website, you might have been wanting to add Pinterest button to website to help your readers directly pin the posts to their Pinterest Boards. We always talk about the advantage of providing social share buttons on your website or blog posts, it is really helpful to spread word directly from the source. Pinterest, even being the latest concept in Social media, has provided users more 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. Here is how to add Pinterest button to website or blog.

How to add Pinterest button to website?

Pinterest took the social thing in mind and it is officially providing Pin it button and follow button to put on websites and blogs from the first day. The follow button is just a pinterest icon with the link to your Pinterest profile, hence it is static and easy to integrate to website. Pinterest Pin it button for website is dynamic which is available in different formats and also gives the pin count in the count bubble. Here is the detailed tutorial to add Pinterest button to website or blog:

Note: You can directly grab the code for Pinterest pin it button (as well as for Pinterest Follow button) from Pinterest Goodies but it is in the standardized form without parameters like Description and media (image) to be pinned when the pin it button is pressed:

<a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="none"><img src="//assets.pinterest.com/images/PinExt.png" alt="Pin it" / ></a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

I added parameters like Description and / or media for some popular blogging platforms, you just need to grab the code and paste it as told in the code of your website or blog:

Before proceeding, make sure you created a back-up of your site.

Pinterest Pin it button for WordPress

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

<a href="http://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" count-layout="horizontal">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 the easiest possible way. Besides, you can add Pinterest follow button and Pinboards to your blog. Install it automatically by searching WP Pinterest in your WordPress admin’s Plugin section, or download it here.

Pinterest Pin it button for Blogger

Log in to you Blogger account and go to Blogger Dashboard » Design » Edit HTML. Click “Expand Widget Templates” textbox. Find <b:includable id='shareButtons' var='post'> paste the following code just below it:

<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot;+data:blog.title'>Pin It</a>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

Save Template. If it shows error message like:

More than one widget was found with id: Navbar1. Widget IDs should be unique.

Just find Navbar1 (it could also be Navbar2 or Navbar3, just find the same it has reflected in the warning) and replace it with Navbar2 (or a different one like Navbar3 or Navbar4). If it says Warning: Your new template does not include the following widgets:…, just click the “Keep Widgets” button. That’s it.

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://pinterest.com/pin/create/button/?url={Permalink}&description={PostTitle}" class="pin-it-button" count-layout="horizontal">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 user Sinius recently figured out that external JavaScript is no more supported on Posterous. I too dug in this issue and found that Posterous blocks external JavaScript added by users. Due to this blocking, you will not be able to see JavaScript sculpted Pinterest Pin it button on Posterous, 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:

<a href="http://pinterest.com/pin/create/button/?url={Permalink}&description={PageTitle}"><img src="http://passets-cdn.pinterest.com/images/pinit_preview_none.png" /></a>

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

* above / below: Wherever you want to make it appear either above the post or at the footer of the post.

You can alter the value count-layout to horizontal, vertical and none to get Pinterest button with horizontal count, vertical count button and no count respectively.

Quick Tip: Use Ctrl + F or Command + F to find the code in your browser.

Also add Facebook Like button, Facebook Share button, Facebook Send button, Twitter tweet button, Google +1 button, Buffer button and Digg button to your blog, if you haven’t added them yet.

Also see Educational Social Media Graphics and follow TechAbly at Pinterest.