iBlognet

Add Pinterest ‘Pin-It’ Button to Your WordPress/Blogger Blog

by Editor

Pinterest Pin-It ButtonPinterest 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.

[html]<data:post.body/>[/html]

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

[html]<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>[/html]

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>

[php]<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>[/php]

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]<?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>[/php]

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:

[php]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’ );[/php]

Vertical button:

[php]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’ );[/php]

No-Count button

[php]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’ );[/php]

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

[php]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’ );[/php]

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] <?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();[/php]

Vertical button:

[php]<?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();[/php]

No-Count button:

[php] <?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();[/php]

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…

Article by »


Admin and Editor of iBlognet iBlognet has written 294 fantastic article(s) on iBlognet.


Author Connect »

1 Tushar

Pinterest has generated quiet a buzz in last few days and my one post got viral there which fetched me huge traffic. Certainly, a wonderful service for bloggers

2 Natasha Gopinko

Pinterst is the most happening thing currently in the social network market and is also attracting lot of new people. To be honest I learned something new in this post even if its my first time to know.

3 George Miller

In the past six months Pinterest has grown at over a staggering 4000%. There is tremendous marketing potential with Pinterest, but it depends on how you approach it. Just like any social networking, if you are only joining to promote rather than be beneficial to users you will only rack it up as another social media failure.

4 fajar

Good Tutorials..
Thanks Man 🙂

Comments on this entry are closed.

Previous post:

Next post: