AddThis

Instruction and Assets

This version of the Toolbox always floats on the top left of your site, even if your users scroll to the bottom of the page. It's easy to change the fixed placement in the CSS.

Download Example Try Demo

The CSS

/* Fixed Positioned AddThis Toolbox */            
.addthis_toolbox.atfixed {
    position: fixed;
    top: 10%;
    left: 20px;
    border: 1px solid #eee;
    padding: 5px 5px 1px;
    width: 32px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.addthis_toolbox .custom_images a {
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.addthis_toolbox .custom_images a img { border: 0; margin: 0 0 1px; opacity: 1.0; }
.addthis_toolbox .custom_images a:hover img { margin: 1px 0 0; opacity: 0.75; }

The HTML

<!-- AddThis Fixed-Positioned Toolbox -->
<div class="addthis_toolbox atfixed">   
    <div class="custom_images">
        <a class="addthis_button_facebook"><img src="images/facebook32.png" alt="Share to Facebook" /></a>
        <a class="addthis_button_twitter"><img src="images/twitter32.png"  alt="Share to Twitter" /></a>
        <a class="addthis_button_stumbleupon"><img src="images/stumbleupon32.png" alt="Stumble It" /></a>
        <a class="addthis_button_more"><img src="images/addthis32.png" alt="More..." /></a>
    </div>
</div>

Javascript

Include the following AddThis script file anywhere in your page (usually before the closing </body> tag):

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=YOUR-PROFILE-ID"></script>

Important: For '#pubid=YOUR-PROFILE-ID' above, change 'YOUR-PROFILE-ID' to your Profile ID if you want analytics data to be collected. If you do not want analytics, this phrase can be removed.

For more information about customizing the AddThis toolbox, please checkout the Rendering Link Decoration section of the Client API. We also have the complete list of Services, which might come in handy.

Looking for more 3rd party icon packs? Check out this collection of custom icons.

Note: Fixed positioning doesn't work in IE6.