AddThis

Instruction and Assets

Make sharing more prominent on your page by putting a vertical menu next to content, like NYTimes.com. Be sure to grab the Toolbox code and update the addthis script file with your username (if you want analytics).

Download Example Try Demo

The CSS

/* AddThis Vertical Layout Menu */

.addthis_toolbox .vertical {
    background: #fff;
    width: 136px;
    padding: 1px;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

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

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

.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 a:hover {
    background: none;
}

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

The 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>

The 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.