Join Now or Sign In

AddThis Toolbox

Want to display individual sharing services instead of one button? Create your own sharing menu? No problem! The AddThis Toolbox provides publishers more control over the display of sharing services on their site.

  • Create custom sharing menu configurations
  • New! Select your own services, or let AddThis optimize your service list
  • Receive the same analytics, performance and reliability as the standard AddThis button
  • Toolbox implementations adopt the CSS styling of your site (so your versions of the examples below may look different!)

Toolbox Examples

The examples below demonstrate just a few of the ways that sharing services can be presented. To get started quickly, you can grab the code from any of these implementations and use it as-is, alter the code as you see fit, or more deeply customize using the AddThis Menu API.

Note: Text in these examples will, when copied and pasted elsewhere, take on the style of the containing page unless specifically overridden. In other words, by default they'll use your fonts, your link colors, and so forth.

| More
Default Styling

This is the default AddThis Toolbox layout if you don't want to provide your own styling.

To use this style the div wrapping the destination buttons needs to look like this: <div class="addthis_toolbox addthis_default_style">.

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

HTML
<div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_email"></a>
    <a class="addthis_button_print"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_myspace"></a>
    <a class="addthis_button_stumbleupon"></a>
    <a class="addthis_button_digg"></a>
    <span class="addthis_separator">|</span>
    <a class="addthis_button_expanded">More</a>
</div>

Destinations

Special Services
 Email
 Print
Compact Menu (drop down)
Expanded Menu (pop-in)
Choosing your Destinations

The way you set the destination and the default icon: <a class="addthis_button_destination"></a>

Some examples
Destination
Email
Facebook
Digg
Compact
Expanded
Code
<a class="addthis_button_email"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_expanded"></a>

The AddThis Service Directory contains details about all services supported by AddThis, a complete list of service codes, and a form to submit your favorite service.

Show code for this example

JavaScript

Before customizing your toolbox, get the default toolbox code.

HTML
<h4>Destinations</h4>
<div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_aim"></a>
    <a class="addthis_button_ask"></a>
    <a class="addthis_button_bebo"></a>
    <a class="addthis_button_buzz"></a>
    <a class="addthis_button_delicious"></a>
    <a class="addthis_button_digg"></a>
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_favorites"></a>
    <a class="addthis_button_fark"></a>
    <a class="addthis_button_friendfeed"></a>
    <a class="addthis_button_google"></a>
    <a class="addthis_button_hyves"></a>
    <a class="addthis_button_linkedin"></a>
    <a class="addthis_button_live"></a>
    <a class="addthis_button_meneame"></a>
    <a class="addthis_button_misterwong"></a>
    <a class="addthis_button_mixx"></a>
    <a class="addthis_button_myaol"></a>
    <a class="addthis_button_myspace"></a>
    <a class="addthis_button_propeller"></a>
    <a class="addthis_button_reddit"></a>
    <a class="addthis_button_segnalo"></a>
    <a class="addthis_button_slashdot"></a>
    <a class="addthis_button_stumbleupon"></a>
    <a class="addthis_button_technorati"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_viadeo"></a>
    <a class="addthis_button_yahoobkm"></a>
</div>
<br />
<div class="addthis_toolbox addthis_default_style">
    <h4>Special Services</h4>
    <a class="addthis_button_email">&amp;nbsp;Email</a><br />
    <a class="addthis_button_print">&amp;nbsp;Print</a><br />
    <a class="addthis_button_compact"> Compact Menu (drop down)</a><br />
    <a class="addthis_button_expanded"> Expanded Menu (pop-in)</a><br />
</div>
| More
Adding Tooltips

It's easy to add our own tooltips with toolbox.

Add a tooltip this way: <a class="addthis_button_destination code"
   title="Tooltip"></a>.

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

HTML
<div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_email" title="Email"></a>
    <a class="addthis_button_print" title="Print"></a>
    <a class="addthis_button_twitter" title="Tweet This"></a>
    <a class="addthis_button_facebook" title="Share to Facebook"></a>
    <a class="addthis_button_myspace" title="Share to MySpace"></a>
    <a class="addthis_button_stumbleupon" title="StumbleUpon"></a>
    <a class="addthis_button_digg" title="Digg This"></a>
    <span class="addthis_separator">|</span>
    <a class="addthis_button_expanded" title="More Choices">More</a>
</div>
More
No Styling

This is the same code as the default but without the class addthis_default_style.

This is your blank slate. You should be able to build almost any layout and design from here.

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

HTML
<div class="addthis_toolbox">
    <a class="addthis_button_email"></a>
    <a class="addthis_button_print"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_myspace"></a>
    <a class="addthis_button_stumbleupon"></a>
    <a class="addthis_button_digg"></a>
    <a class="addthis_button_expanded">More</a>
</div>
Hover Effect

Move your mouse over the icons. This simple effect can help your users know that the icons are clickable. (This effect does not work in Internet Explorer 6.)

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

CSS
.addthis_toolbox .hover_effect
{
    width: 284px;
    padding: 10px 0 6px 10px;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .hover_effect div
{
    float: left;
}

.addthis_toolbox .hover_effect a
{
    border: 2px solid #fff;
    padding: 2px 2px 2px 16px;
    position: relative;
    text-decoration: none;
}

.addthis_toolbox .hover_effect a:hover
{
    border: 2px solid #105CB6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #B4D3F8;
    color: #105CB6;
    text-decoration: none;
}

.addthis_toolbox .hover_effect span
{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 1px;
}
HTML
<div class="addthis_toolbox">
    <div class="hover_effect">
        <div><a class="addthis_button_email">&amp;nbsp;Email</a></div>
        <div><a class="addthis_button_print">&amp;nbsp;Print</a></div>
        <div><a class="addthis_button_twitter">&amp;nbsp;</a></div>
        <div><a class="addthis_button_facebook">&amp;nbsp;</a></div>
        <div><a class="addthis_button_myspace">&amp;nbsp;</a></div>
        <div><a class="addthis_button_digg">&amp;nbsp;</a></div>
        <div><a class="addthis_button_expanded">&amp;nbsp;More...</a></div>
        <div style="clear:both; float:none;"></div> 
    </div>
</div>
Email Print Twitter Facebook MySpace Stumble Digg
More Destinations
Vertical Layout

We've made this menu vertical to better fit a sidebar.

We've also added labels to make it easier to understand and less cluttered.

We're hiding the icon next to "More Destinations" to give more room to the text.

The mouseover effect is a nice little effect that helps users know this is something that can be clicked.

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

CSS
.addthis_toolbox .vertical
{
    width: 136px;
    padding: 10px 0 10px 0;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .vertical a
{
    width: 102px;
    padding: 4px 0 4px 34px;
    position: relative;
    display: block;
    text-decoration: none;
    color: blue;
}

.addthis_toolbox .vertical a:hover
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #B4D3F8;
    text-decoration: none;
}

.addthis_toolbox .vertical span
{
    position: absolute;
    left: 14px;
    top: 4px;
}

.addthis_toolbox .vertical .more
{
    border-top: solid 1px #eee;
    padding: 10px 0 0 0;
    margin: 10px 10px 0 10px;
    text-align: center;
}

.addthis_toolbox .vertical .more a
{
    padding: 4px 0;
    margin: 0;
}

.addthis_toolbox .vertical .more span
{
    display: none;
}
HTML
<div class="addthis_toolbox">
    <div class="vertical">
        <a class="addthis_button_email">Email</a>
        <a class="addthis_button_print">Print</a>
        <a class="addthis_button_twitter">Twitter</a>
        <a class="addthis_button_facebook">Facebook</a>
        <a class="addthis_button_myspace">MySpace</a>
        <a class="addthis_button_stumbleupon">Stumble</a>
        <a class="addthis_button_digg">Digg</a>
        <div class="more">
            <a class="addthis_button_expanded">More Destinations</a>
        </div>
    </div>
</div>
Email
Print
Twitter Facebook MySpace
Delicious Stumble Digg
More Destinations...
Two Column Vertical

We've modified the Vertical layout to introduce two columns.

You could use a layout like this with your favorite destinations to create your own version of the AddThis menu.

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

CSS
.addthis_toolbox .two_column 
{
    width: 216px;
    padding: 10px 0 10px 0px;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .two_column a 
{
    padding: 4px 0 4px 34px;
    position: relative;
    width: 66px;
    display: block;
    text-decoration: none;
    color: blue;
}

.addthis_toolbox .two_column a:hover
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #B4D3F8;
    text-decoration: none;
}

.addthis_toolbox .two_column span
{
    position: absolute;
    left: 14px;
    top: 4px;
}

.addthis_toolbox .two_column  .top
{
    padding: 0 0 10px 0;
    border-bottom: solid 1px #eee;
    margin-bottom: 10px;
    margin: 0 20px 10px 20px;
}

.addthis_toolbox .two_column  .more
{
    border-top: solid 1px #eee;
    padding: 10px 0 0 0;
    margin: 10px 20px 0 20px;
    text-align: center;
}

.addthis_toolbox .two_column  .more a
{
    padding: 4px 0;
    width: auto;
}

.addthis_toolbox .two_column .more span
{
    display: none;
}

.addthis_toolbox .two_column .column1
{
    width: 100px;
    float: left;
}

.addthis_toolbox .two_column .column2
{
    width: 100px;
    float: left;
}

.addthis_toolbox .two_column .clear
{
    clear: both;
    padding: 0;
    display: block;
    height: 0;
    width: 0;
}
HTML
<div class="addthis_toolbox">
    <div class="two_column">
        <div class="column1">
            <a class="addthis_button_email">Email</a>
        </div>
        <div class="column2">
            <a class="addthis_button_print">Print</a>
        </div>
        <div class="clear"></div>
        <div class="top">
        </div>
        <div class="column1">
            <a class="addthis_button_twitter">Twitter</a>
            <a class="addthis_button_facebook">Facebook</a>
            <a class="addthis_button_myspace">MySpace</a>
        </div>
        <div class="column2">
            <a class="addthis_button_delicious">Delicous</a>
            <a class="addthis_button_stumbleupon">Stumble</a>
            <a class="addthis_button_digg">Digg</a>
        </div>
        <div class="clear"></div>
        <div class="more">
            <a class="addthis_button_expanded">More Destinations...</a>
        </div>
    </div>
</div>
Twitter Facebook MySpace Digg
Custom Images

Who says you have to use our icons? Use custom service icons to create your own toolbox or button. We've compiled a list of 3rd party websites you can download alternate icons from. View the gallery

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

CSS
.addthis_toolbox .custom_images a
{
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
}

.addthis_toolbox .custom_images a:hover img
{
    opacity: 1;
}

.addthis_toolbox .custom_images a img
{
    opacity: 0.75;
}
HTML
<div class="addthis_toolbox">   
    <div class="custom_images">
            <a class="addthis_button_twitter"><img src="http://mysocialbuttons.com/socialicons/twitter.png" width="60" height="60" alt="Twitter" /></a>
            <a class="addthis_button_facebook"><img src="http://mysocialbuttons.com/socialicons/facebook.png" width="60" height="60" alt="Facebook" /></a>
            <a class="addthis_button_myspace"><img src="http://mysocialbuttons.com/socialicons/myspace.png" width="60" height="60" alt="MySpace" /></a>
            <a class="addthis_button_digg"><img src="http://mysocialbuttons.com/socialicons/digg.png" width="60" height="60" alt="Digg" /></a>
    </div>
</div>
Hover over me
Email
Print
Twitter Facebook MySpace
Delicous Stumble Digg
More Destinations...

This text will stay under the menu.

Custom Hover Menu

This example puts the Vertical menu above into a hover menu.

We've included some tricks to make the hover experience a little nicer, such as a hover delay so the menu doesn't show up or disappear right away.

Note: This advanced example requires JQuery to hide and show the menu. In order to use this code, you MUST install JQuery on your site: http://www.jquery.com and include its custom JavaScript in your page's HEAD.

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

CSS
.addthis_toolbox .custom_hover
{
    position: relative;
}

.addthis_toolbox .custom_hover .custom_button
{
    font-weight: bold;
    padding: 4px;
    -moz-border-radius: 5px 5px 0 0;    
    -webkit-border-radius: 5px 5px 0 0;
}

.addthis_toolbox .custom_hover .custom_button.active
{
    background-color: #eee;
}

.addthis_toolbox .hover_menu 
{
    display: none;
    position: absolute;
    background: #fff;
}

.addthis_toolbox .custom_hover .tower
{
    -webkit-border-radius: 0 5px 0 0;   
    -moz-border-radius-topleft: 0;
    
}
.addthis_toolbox .hover_menu 
{
    width: 136px;
    padding: 10px 0 10px 0;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .hover_menu  a
{
    width: 102px;
    padding: 4px 0 4px 34px;
    position: relative;
    display: block;
    text-decoration: none;
    color: blue;
}

.addthis_toolbox .hover_menu  a:hover
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #B4D3F8;
    text-decoration: none;
}

.addthis_toolbox .hover_menu  span
{
    position: absolute;
    left: 14px;
    top: 4px;
}

.addthis_toolbox .hover_menu  .more
{
    border-top: solid 1px #eee;
    padding: 10px 0 0 0;
    margin: 10px 10px 0 10px;
    text-align: center;
}

.addthis_toolbox .hover_menu  .more a
{
    padding: 4px 0;
    margin: 0;
}

.addthis_toolbox .hover_menu  .more span
{
    display: none;
}
JavaScript
$(function()
{
    $('.custom_button, .hover_menu').mouseenter(function()
    {
        $('.hover_menu').fadeIn('fast');
        $('.custom_button').addClass('active');
        $(this).data('in', true);
        $('.hover_menu').data('hidden', false);
    }).mouseleave(function()
    {
        $(this).data('in', false);
        setTimeout(hideMenu, delay);
    });

    var delay = 400;
    function hideMenu()
    {
        if (!$('.custom_button').data('in') && !$('.hover_menu').data('in') && !$('.hover_menu').data('hidden'))
        {
            $('.hover_menu').fadeOut('fast');
            $('.custom_button').removeClass('active');
            $('.hover_menu').data('hidden', true);
        }
    }
});
HTML
<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Hover over me</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <a class="addthis_button_email">Email</a>
        </div>
        <div class="column2">
            <a class="addthis_button_print">Print</a>
        </div>
        <div class="clear"></div>
        <div class="top">
        </div>
        <div class="column1">
            <a class="addthis_button_twitter">Twitter</a>
            <a class="addthis_button_facebook">Facebook</a>
            <a class="addthis_button_myspace">MySpace</a>
        </div>
        <div class="column2">
            <a class="addthis_button_delicious">Delicous</a>
            <a class="addthis_button_stumbleupon">Stumble</a>
            <a class="addthis_button_digg">Digg</a>
        </div>
        <div class="clear"></div>
        <div class="more">
            <a class="addthis_button_expanded">More Destinations...</a>
        </div>
    </div>
</div>
Fancy Lightbox Menu

This example puts the choices in a custom-made lightbox.

This shows off the flexiblity of the toolbox. (This effect does not work in Internet Explorer 6.)

Note: This advanced example requires JQuery to hide and show the menu. In order to use this code, you MUST install JQuery on your site: http://www.jquery.com and include its custom JavaScript in your page's HEAD.

Show code for this example
JavaScript

Before customizing your toolbox, get the default toolbox code.

CSS
.addthis_toolbox .lightbox {
    position: fixed;
    top: 200px;
    left: 400px;
    width: 480px;
    color: #555;
}

.addthis_toolbox .lightbox .lightbox_top {
    background: url(/cms-content/images/help/toolbox_example_lightbox_top.png) no-repeat 0 0;
    height: 34px;
    overflow: hidden;
    position: relative;
}
.addthis_toolbox .lightbox .lightbox_top h4 {
    display: inline;
    position: absolute;
    top: 12px;
    left: 20px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: normal;
    color: #fff;    
}
.addthis_toolbox .lightbox .lightbox_close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}
.addthis_toolbox .lightbox .lightbox_middle {
    background: url(/cms-content/images/help/toolbox_example_lightbox_middle.png) repeat-y;
    overflow: hidden;
}
.addthis_toolbox .lightbox .lightbox_content {
    padding: 10px 20px;
}

.addthis_toolbox .lightbox .lightbox_bottom {
    background: url(/cms-content/images/help/toolbox_example_lightbox_top.png) no-repeat 0 -34px;
    height: 16px;
    overflow: hidden;
}

.addthis_toolbox .lightbox_sharing
{
    margin-left: 10px;
}

.addthis_toolbox .lightbox .columns A 
{
    text-indent: 0 !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 4px 34px !important;
    position: relative;
    width: 76px !important;
    display: block;
    color: #ee145b;
}

.addthis_toolbox .lightbox .columns A:hover
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #F476A0;
    color: #fff;
    text-decoration: none !important;

}

.addthis_toolbox .lightbox .columns SPAN
{
    padding: auto !important;
    margin: auto !important;        
    position: absolute;
    left: 14px;
    top: 4px;
    float: none !important;

}

.addthis_toolbox .lightbox .columns .column
{
    width: 107px;
    float: left;
    padding: 0;
}

.addthis_toolbox .lightbox .frame
{
    border: 2px solid #eee;
    padding: 10px;
    margin: 0 20px 0 0;
    float: left;
}

.addthis_toolbox .lightbox .border
{
    border-top: 1px dashed #333;
    margin: 0 10px;
}

.addthis_toolbox .lightbox A.sharelink:hover, 
.addthis_toolbox .lightbox A.lightbox_close:hover
{
    text-decoration: underline;
}
JavaScript
$(function()
{
    $('.sharelink').click(function()
    {
        $('.lightbox').fadeIn('fast');
        return false;
    });
    $('.lightbox_close').click(function()
    {
        $('.lightbox').fadeOut('fast');
        return false;
    });

});
HTML
<div class="addthis_toolbox">
    <a class="sharelink" href="#">Click this to see the lightbox!</a>
    
    <div class="lightbox" style="display:none;">
        <div class="lightbox_top">
            <h4>Funky Sharing!</h4>
            <a class="lightbox_close" href="#">Close [X]</a>
        </div>
        <div class="lightbox_middle">
            <div class="lightbox_content">
                <img src="http://farm1.static.flickr.com/178/428713835_c98f593cf8_t.jpg" width="82" height="100" alt="Good shot" class="frame" /> 
                <h3>Share the photo</h3>
                Some information about this item. Some information about this item. Some information about this item. Some information about this item. Some information about this item. Some information about this item. Photo from flickr user babybluebbw.  
                <div class="clear"></div>
            </div>
            
            <div class="lightbox_sharing source">
                <div class="columns">
                    <div class="column">
                        <a class="addthis_button_email">Email</a>
                        <a class="addthis_button_print">Print</a>
                    </div>
                    <div class="column">
                        <a class="addthis_button_twitter">Twitter</a>
                        <a class="addthis_button_digg">Digg</a>
                    </div>
                    
                    <div class="column">
                        <a class="addthis_button_facebook">Facebook</a>
                        <a class="addthis_button_myspace">MySpace</a>
                    </div>
                    <div class="column">
                        <a class="addthis_button_stumbleupon">Stumble</a>
                        <a class="addthis_button_expanded">More...</a>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div class="lightbox_bottom"></div>
    </div>
</div>


Dynamic Toolbox Optimization

Although you can always choose to select your own services to appear in your AddThis Toolbox, you might want to consider taking advantage of the optimization and user personalization features built into AddThis menus. AddThis can determine the best set of services to display in your Toolbox based on overall usage, language and location, as well as user sharing history and preference. This is now possible via a new option available in the AddThis Menu API.

More About Customization

For more specific information about customizing your AddThis Toolbox, please reference the AddThis Menu API specification.


Back to Top
©2010 AddThis, LLC. About Contact Privacy Policy Terms of Service Logos & Assets AddThis Gear