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>
