AddThis Toolbox

Last Updated: Sep 11, 2013 02:58PM EDT

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

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



16x16 Toolbox

Here's a simple 16x16 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, addthis_button_preferred_7




32x32 Toolbox

The only difference between this toolbox and the previous example is the size. This is served up with the larger 32x32 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 16x16's above.




Adding Facebook Like to your Toolbox

If you're already using the AddThis Toolbox on your site, you can easily add the popular Facebook LIke button by including this single line in your existing code:

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>

The form factor for the Like button works best with the 16x16 Toolbox, since they're similar in size. The complete snippet of code for an AddThis Toolbox with 3 personalized services, the AddThis share menu, and Facebook might look like this:

<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_compact"></a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>



Adding Twitter to your Toolbox

If you're already using the AddThis Toolbox on your site, you can easily add the popular Twitter widget by including this single line in your existing code:

<a class="addthis_button_tweet"></a>

The same form factor applies as with Facebook Like – Tweet buttons tend to look best with the 16x16 Toolbox. The complete snippet of code for an AddThis Toolbox with 3 personalized services, the AddThis share menu, and Twitter might look like this:

<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_compact"></a>
<a class="addthis_button_tweet"></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!

Example:

Share to Facebook Share to Twitter More...
<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.




Custom Configurations

For information about more advanced customization of your AddThis Toolbox, please reference the AddThis Client API specification.

Still need help?


General Topics

 

Developers