Adding social sharing buttons in Shopp

For the last 2-3 days I spent some time setting up a WordPress e-Commerce using Shopp plugin.

One of the client’s requests was to add social sharing buttons at several specific locations in the site:

• At the bottom of main Shop page
• In single product pages, below the product description (and above Related Products). Ex.: this product page
• Below single Post pages like this.

At first I tried Jetpack’s Sharing module but stopped using it as it was not possible to place the output of this plugin wherever is needed. Apparently this can be done but it didn’t work when I gave it a try.

Then I tried Digg Digg which worked for the most part except Facebook’s icon wasn’t appearing. Below is the code snippet for Digg Digg from my nvALT notes:

<div class="my-social-icons">
	<div class="social-pinterest dd-social"><?php if(function_exists('dd_pinterest_generate')){dd_pinterest_generate('Compact');} ?></div>
	<div class="social-twitter dd-social"><?php if(function_exists('dd_twitter_generate')){dd_twitter_generate('Compact','twitter_username');} ?></div>
	<div class="social-facebook dd-social"><?php if(function_exists('dd_fblike_generate')){dd_fblike_generate('Like Button Count');} ?></div>
	<div class="social-google dd-social"><?php if(function_exists('dd_google1_generate')){dd_google1_generate('Compact (20px)');} ?></div>
</div>

CSS:

.my-social-icons {
    margin-top: 1em;
    margin-bottom: 3em;
}

.dd-social {
    float: left;
    margin-right: 1em;
}

.social-twitter,
.social-facebook {
    width: 75px;
}

The output of the above is supposed to be this:

Finally what worked for me fully is Share Buttons by AddThis. I selected the style of buttons, grabbed the code and inserted it in theme’s templates at the desired locations.

Client’s site uses iThemes Builder’s Threads child theme.

Main Shopp page: I placed the code wrapped between this if conditional in wp-content/themes/BuilderChild-Threads/shopp.php to restrict it to just the main Catalog page:

[code]
if(is_catalog_frontpage())
[/code]

Screenshot:

Single Product page: wp-content/themes/BuilderChild-Threads/shopp/product.php

Single Post pages: wp-content/themes/BuilderChild-Threads/single.php

With all that written, I still think Digg Digg is the way to go (as long as all the buttons show up). I am going to first give Digg Digg a try next time I have to do something like this. One of the main advantages of using Digg Digg over the above AddThis approach is that the social sharing buttons are post-aware. Meaning, if Twitter button is clicked beneath a specific post on Posts/archive page, that specific post’s URL is going to be shared and not the URL of entire Posts/archive page.