Customize Buttons

Asynchronous Script Loading

Use the following code as a template for optimizing AddToAny to load asynchronously. This optimization allows all of your content to load before or at the same time as AddToAny under all circumstances.

<a class="share-this a2a_target" href="http://www.addtoany.com/share_save">
    <img src="http://static.addtoany.com/buttons/share_save_171_16.png" border="0" alt="Share"/>
</a>

<script type="text/javascript">
// A custom "onReady" function for AddToAny
function my_addtoany_onready() {
    a2a_config.target = '.share-this';
    a2a.init('page');
}

// Setup AddToAny "onReady" callback
var a2a_config = a2a_config || {};
a2a_config.tracking_callback = {
    ready: my_addtoany_onready
};
// Additional a2a_config properties may go here

// Load AddToAny script asynchronously
(function(){
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.async = true;
    a.src = 'http://static.addtoany.com/menu/page.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(a, s);
})();
</script>

Details

<a class="share-this a2a_target" href="http://www.addtoany.com/share_save">
    <img src="http://static.addtoany.com/buttons/share_save_171_16.png" border="0" alt="Share"/>
</a>

This is the button link with an arbitrary class name of share-this and a required class name of a2a_target. The button image within the link can be replaced with another button or text.

Note: For asynchronous loading, intended elements must have a class name of a2a_target.


// A custom "onReady" function for AddToAny
function my_addtoany_onready() {
    a2a_config.target = '.share-this';
    // Additional instance configs can be set here
    a2a.init('page');
}

This is the function that will be called when AddToAny has finished loading.

The a2a_config.target property specifies the element(s) to initiate an AddToAny menu on. It accepts a string containing a CSS selector for an ID (like "#share-button") or class name (like ".share-buttons"), or an actual DOM node reference (like document.getElementById('share-button')).

The a2a.init('page') function initiates the menu(s). You can also use an alternative syntax that functions the same, but combines configuration into the a2a.init function's second parameter:

// A custom "onReady" function for AddToAny
function my_addtoany_onready() {
    a2a.init('page', {
        target: '.share-this'
        // Additional instance configs can be set here
    });
}

Additional instance configuration properties (like linkurl and linkname) can be declared using either syntax.


// Setup AddToAny "onReady" callback
var a2a_config = a2a_config || {};
a2a_config.tracking_callback = {
    ready: my_addtoany_onready
};
// Additional global configs can be set here

The tracking_callback property specifies which function to call when AddToAny's "ready" event occurs. Global configuration properties (like prioritize or locale) should be set here.


// Load AddToAny script asynchronously
(function(){
    var a = document.createElement('script');
    a.type = 'text/javascript';
    a.async = true;
    a.src = 'http://static.addtoany.com/menu/page.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(a, s);
})();

This anonymous function loads AddToAny's script asynchronously so that other content can load simultaneously.


AddToAny Kit

To load AddToAny Kit (standalone icons) asynchronously, give your Kit(s) a class name of a2a_target (in addition to the required a2a_kit and optional a2a_default_style class names), and use the above JavaScript code.

<div class="a2a_kit a2a_default_style a2a_target share-this">
    <a class="a2a_dd" href="http://www.addtoany.com/share_save">Share</a>
    <span class="a2a_divider"></span>
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_email"></a>
</div>