Sharing Customization

Single - Customize

Use the following code for customizing a single sharing instance using AddToAny's JavaScript API.

<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_dd" href="https://www.addtoany.com/share"></a>
</div>

<script>
var a2a_config = a2a_config || {};
a2a_config.num_services = 10;
a2a_config.show_title = 1;
</script>

<script defer src="https://static.addtoany.com/menu/page.js"></script>

Details

<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_dd" href="https://www.addtoany.com/share"></a>
</div>

This block of HTML code should be placed within the <body> section of a page.


<script>
var a2a_config = a2a_config || {};
a2a_config.num_services = 10;
a2a_config.show_title = 1;
</script>

This block of JavaScript sets properties of the a2a_config object. The a2a_config object is declared once, then AddToAny configuration properties are set.


<script defer src="https://static.addtoany.com/menu/page.js"></script>

This is the required external JavaScript reference that loads AddToAny. It can be placed directly after the a2a_config code, or later in the page before the closing </body> tag.

Alternatively, the a2a_config code and external JavaScript reference can be placed within the <head> section. When placed in the <head> section, AddToAny initiates buttons when the DOM is ready.