-->
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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&description="+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 saysWarning: 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
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>
* above / below: Wherever you want to make it appear either above the post or at the footer of the post.
.jpg)
