Best Way to Customize the AddThis Toolbox - 2016
AddThis Plugins

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.

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.

Also Read:  How To Add Awesome Popular Posts Widget with Counter

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 16×16 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 16×16 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:

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

Also Read: How To Add Blogger Custom Robot txt File for better SEO

Custom Configurations

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



Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.