AddThis Academy

An ever-growing library of resources to help you become a better online marketer.

Customizing the AddThis Toolbox

Note: These instructions are for advanced configuration tools. Customization for our dashboard configuration tools is available in the tool settings.

Important: The examples below are for illustration purposes only, and in practice would require that AddThis Javascript is installed on your site. Get AddThis.

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
  • Take advantage of increased sharing rate over simpler standard buttons
  • Let AddThis optimize your service list (recommended) or select your own services
  • Receive the same analytics, performance and reliability as the standard AddThis button
  • Toolbox implementations adopt the CSS styling of your site

Auto-Personalized Services

One of the most important ways that AddThis increases overall sharing is personalization: Replacing our default list of services with the places where a given person (including you!) has already shared. You may notice that the services you see in our menus or rows of toolbox icons look familiar; we’ll replace up to 11 default services with the most recently used destinations.

16×16 Toolbox

Here’s a simple 16×16 pixel AddThis toolbox, with the first four sharing icons automatically personalized for the user. The last icon is for the AddThis sharing menu.

<div class="addthis_toolbox addthis_default_style">
  <a class="addthis_button_preferred_1"></a>
  <a class="addthis_button_preferred_2"></a>
  <a class="addthis_button_preferred_3"></a>
  <a class="addthis_button_preferred_4"></a>
  <a class="addthis_button_compact"></a>
</div>

Note: You can easily add in more or less personalized services at any time, simply by incrementing the number at the end: addthis_button_preferred_5, addthis_button_preferred_6, etc.

32×32 Toolbox

The only difference between this toolbox and the previous example is the size. This is served up with the larger 32×32 icons, which is designated with the appended CSS class .addthis_32x32_style:

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
  <a class="addthis_button_preferred_1"></a>
  <a class="addthis_button_preferred_2"></a>
  <a class="addthis_button_preferred_3"></a>
  <a class="addthis_button_preferred_4"></a>
  <a class="addthis_button_compact"></a>
</div>

Note: Adding or subtracting icons from your Toolbox is the same as with the 16×16’s above.

Select your own services

If you prefer to override personalization in your toolbox in order to show specific services, you can do so by specifying the buttons you want to show by name. A full list of our service codes are available under Basic Service Codes here.

16×16 Toolbox

Here’s a simple 16×16 pixel AddThis toolbox, with the first four sharing icons automatically personalized for the user. The last icon is for the AddThis sharing menu.

<div class="addthis_toolbox addthis_default_style">
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_email"></a>
  <a class="addthis_button_linkedin"></a>
  <a class="addthis_button_compact"></a>
</div>

32×32 Toolbox

The only difference between this toolbox and the previous example is the size. This is served up with the larger 32×32 icons, which is designated with the appended CSS class .addthis_32x32_style:

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
  <a class="addthis_button_facebook"></a>
  <a class="addthis_button_twitter"></a>
  <a class="addthis_button_email"></a>
  <a class="addthis_button_linkedin"></a>
  <a class="addthis_button_compact"></a>
</div>

Custom Images

Let’s say that you want to use some new spiffy social icons that you downloaded with the AddThis Toolbox you have on your site…No problem! Just insert an image tag with the anchor tags provided by AddThis. This will allow you to have custom icons while still being able to record the shares within AddThis Analytics.

Example:

<div class="addthis_toolbox">
  <div class="custom_images">
    <a class="addthis_button_facebook"><img src="/images/facebook.png" width="64" height="64" border="0" alt="Share to Facebook"></a>
    <a class="addthis_button_twitter"><img src="/images/twitter.png" width="64" height="64" border="0" alt="Share to Twitter"></a>
    <a class="addthis_button_more"><img src="/images/addthis_64.png" width="64" height="64" border="0" alt="More...></a>
  </div>
</div>

In this example, you’re users wouldn’t get the benefit of Personalized Services, but you’d be able to specify which services you wanted to use and load in the appropriate custom icon.

Customizing the AddThis Toolbox
2.7 (53.85%) 13 votes

Was this article helpful to you?