Add a Pinterest button to the WP e-Commerce Facebook & Twitter buttons, no plugins.

I was asked

“Is there a way to have a Pinterest button in the same location as the built in Facebook and Twitter buttons that come with WP e-Commerce. I can use a plugin but I want it to sit with the other buttons and match the existing ones”
The question was in relation to the Storefront themes Edge theme, so the example here is for that but would work in most themes. You just need to adjust the location of the Pinterest code. You could also add this to single.php in most themes to make the button appear on your single blog posts page.

This is not tested I do not have a Pinterest wall. I would be very happy to hear from anyone who uses this if it successfully pins the right content.

It should pin the main product image the title of the product page and the URL. Comment here if it works, or not. Even better contact me via the contact form on this site.

First add the Pinterest code to the footer

In the Edge folder open footer.php. If you have never edited PHP before see the Tools: panel at the end of this post. It is not hard, cut and paste, dive in. Find the closing body tag right at the end of the footer.php file. In version 1.1.2 it is line 133, second last. For those of you who do not know what a closing body tag is it is highlighted below. You paste all of the code above it before the body tag in your footer.php so it looks like this

				<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.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>
</body>
</html>

Save footer.php

Add the button to the Single Product page

Open wpsc-single_product.php. Around line 209 you will find the first two lines below. Add the rest of the code below to your file just as shown. After it should see some very long lines of code referring to facebook and twitter.

			<div class="socialbarwrap"></div>
					 <div id="socialbar" style="margin-bottom:0px;">

<div class="social-bar-pinterest" style="margin-right:25px;float:right;margin-top:4.5px;"><?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(); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></div>	

Save the file and load a single product page on your site you should see a Pinterest button. You could change layout = to vertical if you want that style button. I chose horizontal to match the WP e-Commerce Facebook and Twitter buttons.

Style it

The spacing is a little off between the 3 buttons so lets add a little CSS to fix that and position the Add To Cart button. Not sure where this goes, see the Custom CSS panel at the end of the post.

/*reduce margin between facebook and pinterest*/
.social-bar-facebook{
margin-right:15px !important;
}
/*position Add to Cart button beneath social buttons */
.single .wpsc_buy_button_container {
     float: right;
     margin-right: 90px;
     margin-top: 15px;
}

A bonus shortcode!

I know how WordPress fans love their shortcodes. Add this code to your functions.php file and you will have a shortcode you can add anywhere on a post or page to display a pin it button. This code should go right before the very last ?> in the functions.php file. Make sure have no spaces or empty lines after the ?>
To use this just put this shortcode in your content anywhere you want your button [pin]

function get_pin($atts) {
$pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
return '<a href="http://pinterest.com/pin/create/button/?url' . urlencode(get_permalink($post->ID)) . '&media=' . $pinterestimage[0] . '&description=' . get_the_title() .'" class="pin-it-button" count-layout="vertical">Pin It</a>'; }

add_shortcode('pin', 'get_pin');