Customizing Addthis Button

Question

http://www.moen.com/anabelle/spot-resist-stainless-one-handle-high-arc-pulldown-kitchen-faucet/_/R-CONSUMER%3ACA87003SRS?swatch=1

I want to have a single sharing button on my pages just like this page, the things I want are: 1)The popup compact menu is disabled 2)It doesn't add a floating side menu to the page 3)The HTML of the button on this page is

<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=cmassmoen" title="Share this Page" class="icon-share addthis_button_more" addthis:url="" target="_blank">
  <img src="/assets/moencom/images/catalog/product-details/sharing/share.png" height="20" width="20">
 </a>

The HREF has a v parameter and username parameter in it (I look around on addthis website, but I couldn't find how to generate a button with similar href attribute)

I've read throught addthis's API page, but still not very sure how to do it.

Answer 1

In order to accomplish this, first you'll need an account with addThis. In the code below, I'm using fontawesome for the icon, but you can use whatever image you want. just replace the <i> tag with an <img> tag.

Link to see this in action.

Required

<script type="text/javascript" src="LINK-TO-YOUR-ADDTHIS-ACCOUNT" async="async"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

HTML

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
    <a class="icon-share addthis_button_more"><i class="fa fa-share-alt fa-5x"></i></a>
</div>
<!-- AddThis Button END -->

CSS

.icon-share {
    color:#ccc;
}
.icon-share:hover {
    color:#00A2D7;
}