Recents in Beach

Best Way to Customize the AddThis Toolbox - 2016

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.

Post a comment

6 Comments

  1. It’s hard to come by experienced people about this subject, but you seem like you know what you’re talking about! Thanks
    [url="http://infocampus.co.in/python-training-in-bangalore.html"] python training in bangalore[/url]

    ReplyDelete
  2. You are an Xfinity user and confronting problem so now resolve your all issues by making a call at Xfinity Customer Service number i.e. +1-833-293-1333. You can also avail of our service by dropping a text at the provided number for interacting with our assistance. Never neglect the problems as the error and issues may harm your Xfinity account badly. Our specialists are well trained that way they can solve your all issues in no time. https://www.pcmonks.net/xfinity-customer-service-phone-number.html

    ReplyDelete
  3. Can i make a Email contact help?

    Cash app comes with which is linked with your account and makes transaction easy without adding any bank account or credit card to purchase any goods or services here. You have to only ask to make a digital signature here. If there is any issue with the card then feel free to make a Email contact help.They will available to provide you best.

    ReplyDelete

  4. Why am i unable to contact cash app customer service to know its safety?

    Cash app is one of the great application that is used to make online transactions.
    Apart from this, it comes with the Visa debit card which is used to purchase goods and services. You can also use its virtual card number to shopping online. If any issue, then use cash app customer service to resolve them as soon as possible.

    ReplyDelete