Sharing Customization

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>

The Drupal sharing module is optimized to load AddToAny asynchronously, which allows all of your content to load before or at the same time as AddToAny under all circumstances.

The WordPress sharing plugin is optimized to load AddToAny asynchronously, which allows all of your content to load before or at the same time as AddToAny under all circumstances.


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>