AddThis - Labs

Instructions

Installing the Floating Horizontal Bar

HTML

This is the HTML portion of the code. Be cautious about nesting it inside other elements as it may not display correctly or in the right position on your pages.

<div class="addthis_bar addthis_bar_medium">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div>

<div class="addthis_bar addthis_bar_small">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style">
        <span><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a></span>
        <span><a class="addthis_button_tweet"></a></span>
        <span><a class="addthis_button_google_plusone" g:plusone:size="medium"></a></span>
        <span><a class="addthis_counter addthis_pill_style"></a></span>
    </div>
 </div>

<div class="addthis_bar addthis_bar_large">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style">
        <span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span>
        <span><a class="addthis_button_tweet" tw:count="vertical"></a></span>
        <span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span>
        <span><a class="addthis_counter"></a></span>
    </div>
</div>

Some options to change the style of the Floating Horizontal Bar. You can change the CSS class, addthis_bar_medium, shown in the toolbox div element, with one of the options below. This will size the toolbox and Floating Horizontal Bar. Note that you should choose the appropriate toolbox configuration as well to fit your needs.

Name	Description	View
`addthis_bar_large`	Sizes the toolbox to fit the larger styled share counters	view code
`addthis_bar_medium`	Sizes the toolbox to fit the medium sized (32x32) share icons	view code
`addthis_bar_small`	Sizes the toolbox to fit the smaller sized (16x16) share icons	view code

Javascript

Here's the javascript code that you'll need to add to your webpage, in addition to the HTML code above. As a best practice, it's suggested that you include it at the bottom or footer of your HTML page.

<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID HERE]"></script>

Important: Be sure to replace [YOUR PROFILE ID HERE] with your Profile ID (no brackets needed!) which you can find in your AddThis Profile Settings. Otherwise, AddThis will not be able to provide you analytics for your sharing tool. If you have not already registered for AddThis, you can create an account to get your own Profile ID.

Floating Horizontal Bar Demo

Features

Appears on Scroll

The on-demand behavior of the horizontal bar boosts sharing because it appears as your visitors scroll down the page.

Multiple Sizes

The horizontal bar comes in a variety of sizes for you to decide how visually prominent you want the bar to be.

Customizable

We've made the horizontal bar easy to match the look and feel of your website.

More AddThis Menu Enhancements

Simple Menu

The new sharing menu is designed to be streamlined and fit seamlessly into your site. The menu optimizes the presentation of service to maximize sharing.

Friendly Expanded Menu

We have made it even easier for your visitors to find their favorite places to share.

Updated Email Form

Completely redesigned email form that makes it easy for your visitors to share their favorite content with their friends via email.

Updated Share Counter

At AddThis, details matter. We've tweaked our share counter to look great with other popular counters like Facebook Like and Google +1.

Settings

We've given our settings page a refresh where your visitors can personalize the places to which they love to share.

And more...

As always, the new tools continue to support over 70 languages, 300+ services, and the great analytics we offer today.