How to add Pinterest Button to Website?

Pinterest is going hot of late. on pinterest, you’ll pin your favorite things and others will comment, like or re-pin your pins. you’ll conjointly categorize you

r pins by making completely different boards.

Currently, if you run a blog or website, you may are wanting to feature pinterest button to website to assist your readers directly pin the posts to their pinterest boards. we continuously talk regarding the advantage of providing social share buttons on your website or blog posts, it’s very helpful to spread word directly from the supply. pinterest, even being the most recent concept in social media, has provided users additional referrals than a number of the highest social web sites like youtube and google+.

Thus, it becomes necessary to join pinterest and be active there, if you’re a blogger, webmaster or social media junkie. In this article i am going to show you the way to add pinterest button to website or blog.

How to add Pinterest Button to Website?

How to add Pinterest button to website?

Pinterest took the social issue in mind and that it is officially providing pin it button and follow button to place on web sites and blogs from the primary day. The follow button is simply a pinterest icon with the link to your pinterest profile, hence it’s static and simple to integrate to website. Pinterest pin it button for website is dynamic that may be available in numerous formats and too gives the pin count within the count bubble. Here i am showing you a detailed tutorial to feature pinterest button to website or blog.

Note: You’ll be able to 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 class="pin-it-button" href="http://pinterest.com/pin/create/button/"><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 a few common blogging platforms, you only would like 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.[divide style="2"]

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 class="pin-it-button" 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(); ?>">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Save the Changes and you are done.[divide style="2"]

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">Pin It</a>

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js">// <![CDATA[

Save the 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.[divide style="2"]

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 and you are done.[divide style="2"]

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

Follow Pixel2Pixel Design at Pinterest.

Join Our Email Newsletter

Like what you read here in this blog post? Get free blog updates in your Email!

When signing up you will initially receive a confirmation email requiring your approval to complete the Subscribtion.

Start learning on Udemy today!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>