Pinterest is the new upcoming social networking site where users can pin images, videos or any web page to its pin board. If a user tries to pin a page, a description and source link is automatically added to the pinned image, giving users the chance to visit the page directly.

A Pin button is similar to a Facebook Like or Twitter Tweet button, as it allows users to share your posts without having to leave your blog. And adding a Pin button to your WordPress or Blogger blog is as simple as like other social sharing buttons. Just follow the steps below:

Pinterest Button for Blogger Users:

1. Login to your Blogger account.
2. Go to Design > Edit HTML > and check the Expand Widget Templates checkbox.
3. Search for the following code.

<data:post.body/>

4. And paste the following code immediately below (after) it:

<a href="http://pinterest.com/pin/create/button/" count-layout="horizontal">Pin It</a>
<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

You can customize the button layout by changing the count-layout option to vertical, horizontal or no count.

5. Save your template and view your blog.

Pinterest Button for WordPress Users:

1. First back up your footer.php and single.php file.

2. Now edit your footer.php file and copy paste the following code right before the closing body tag: </body>

<script type="text/javascript">
(function() {
window.PinMe = window.PinIt || { loaded:false };
if (window.PinMe.loaded) return;
window.PinMe.loaded = true;
function async_load(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "http://assets.pinterest.com/js/pinit.js";
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent("onload", async_load);
else
window.addEventListener("load", async_load, false);
})();
</script>

3. Save this file and now edit your single.php file. Copy paste the following code where you have added other social sharing buttons or any other best possible location.

<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>" count-layout="vertical">Pin It</a>

4. Save this file and view your blog now.

Pinterest Button for Thesis Users:

1. First back up your custom.php file and follow the steps below if you’re using “Feature” post in Thesis.

Horizontal button:

function pinterest_post_page_pin_horiz() {
global $post;
/* HORIZONTAL PINTEREST BUTTON */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_horiz' );

Vertical button:

function pinterest_post_page_pin_vert() {
global $post;
/* VERTICAL PINTEREST BUTTON */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="vertical">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_vert' );

No-Count button

function pinterest_post_page_pin_no_count() { global $post; /* HORIZONTAL NO-COUNTER PINTEREST BUTTON */ printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="none">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) ); } add_action( 'thesis_hook_before_post_box', 'pinterest_post_page_pin_no_count' );

For users who are using “Teaser” posts in Thesis copy paste the following code:

function pinterest_teaser_pin() {
global $post;
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode(get_permalink()), urlencode( get_post_meta($post->ID, 'thesis_post_image', true) ) );
}
add_action( 'thesis_hook_before_teaser_headline', 'pinterest_teaser_pin' );

WordPress users can install this plugin if you’re unable to follow up the code above.

Pinterest Button for Genesis Users:

Create a file named single.php and place the code you see below. Save the file and upload it to your child theme’s directory on your server.

Horizontal button:

 <?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {

/** Horizontal */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="horizontal">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );

}

genesis();

Vertical button:

<?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {

/** Vertical */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="vertical">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );

}

genesis();

No-Count button:

 <?php
add_action( 'genesis_post_content', 'pinterest_share_button', 5 );
function pinterest_share_button() {

/** No-count */
printf( '<div><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" count-layout="none">Pin It</a><script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script></div>', urlencode( get_permalink() ), urlencode( genesis_get_image( array( 'format' => 'url' ) ) ) );

}

genesis();

Note: Always add a pic to your blog post if you want users to embed an image to your pinned content.

If you have any problem installing the button, just leave a comment below…