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');

Custom CSS:

This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes, but it is a bit hard to work with there.

Tools:

You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

2 Comments

  1. Bee Removals Garden Grove
    April 25, 2014

    Hi would you mind sharing which blog platform you’re using?
    I’m going to start my own blog soon but I’m having a tough time selecting between BlogEngine/Wordpress/B2evolution and
    Drupal. The reason I ask is because your layout seems different
    then most blogs and I’m looking for something unique.
    P.S Apologies for getting off-topic but I had to ask!

    Reply
    • mgason
      April 28, 2014

      WordPress

      Reply

Leave a Reply