How to Add a Pinterest Pin It Button

The first step is to 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.

With Pinterest, you have three options for the Pin It button display – horizontal, vertical and no count. Choose one of the three options – not all of them.

Horizontal button display:

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

    /** Horizontal */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" 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 display:

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

    /** Vertical */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" 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 display:

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

    /** No-count */
    printf( '<div class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=%s&media=%s" class="pin-it-button" 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();

Styling the Pinterest Pin It Button

There probably isn’t much that you’ll want to style with the Pin It button. Depending on where you place it you might want to adjust margin or padding.

Here’s how you can target the Pinterest Pin It button through CSS:

.pinterest-button iframe {
    margin: 10px 0;
}