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.

<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="https://www.example.com/page.html" data-a2a-title="Example Page">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></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.

Without data attributes

The previous example uses optional data-a2a- attributes to explicitly set a page to share, and is the recommended method for loading AddToAny asynchronously.

If you need to set properties on a sharing instance without using data-a2a- attributes, a more complex method is to initiate the instance using configuration properties in JavaScript.

<div class="a2a_kit a2a_kit_size_32 a2a_default_style a2a_target share-this">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

This is the button link with an arbitrary class name of share-this, and a class name of a2a_target that is necessary if you would like to set properties on the sharing instance without using data-a2a- attributes.

// 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 a function that will be called when AddToAny has finished loading.

The a2a_config.target property specifies the element(s) to initiate an AddToAny instance 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 AddToAny instance(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(s)
var a2a_config = a2a_config || {};
a2a_config.callbacks = a2a_config.callbacks || [];
a2a_config.callbacks.push({
    ready: my_addtoany_onready
});
// Additional global configs can be set here

The callbacks property is an array of one or more objects that specify a function to call when AddToAny's "ready" event occurs. Global configuration properties (like prioritize or locale) can be set here, too.

// Load AddToAny script asynchronously
(function(){
    var a = document.createElement('script');
    a.async = true;
    a.src = 'https://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.