Use the following code as a template for customizing multiple share instances using AddToAny's JavaScript API.

Using data attributes

Data attributes provide the best way to set multiple AddToAny instances. Using this method, AddToAny's JavaScript only needs to be referenced one time and can be placed nearly anywhere on the page.

<div>Share Page 1:</div>

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

<div>Share Page 2:</div>

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

<div>Share Page 3:</div>

<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-url="http://www.example.com/page_3.html" data-a2a-title="Example Page 3">
    <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 async src="https://static.addtoany.com/menu/page.js"></script>

Without data attributes

The previous example uses data attributes and is the recommended method for efficiently loading AddToAny

The following example is a more complex and less efficient method using JavaScript instead of data attributes.

<div>Share Page 1:</div>

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <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.linkname = 'Example Page 1';
a2a_config.linkurl = 'http://www.example.com/page_1.html';
</script>

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

<div>Share Page 2:</div>

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <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>
a2a_config.linkname = 'Example Page 2';
a2a_config.linkurl = 'http://www.example.com/page_2.html';
a2a.init('page');
</script>

<div>Share Page 3:</div>

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <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>
a2a_config.linkname = 'Example Page 3';
a2a_config.linkurl = 'http://www.example.com/page_3.html';
a2a.init('page');
</script>

JavaScript Details

<div>Share Page 1:</div>

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <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.linkname = 'Example Page 1';
a2a_config.linkurl = 'http://www.example.com/page_1.html';
</script>

For the first button, the a2a_config object needs to be declared once, then the linkname and linkurl properties can be set. This is a good place to set additional AddToAny properties if needed.

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

This calls the required external script and also initiates the first AddToAny instance. (To initiate on a subsequent buttons, you can use a2a_init('page') instead, as seen below.)

<div>Share Page 2:</div>

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <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>
a2a_config.linkname = 'Example Page 2';
a2a_config.linkurl = 'http://www.example.com/page_2.html';
a2a.init('page');
</script>

For the second instance, the linkname and linkurl properties are given new values to setup another AddToAny instance. There is no need to redeclare the a2a_config object.

The call to a2a.init('page') initiates the latest AddToAny instance. Since the external script (static.addtoany.com/menu/page.js) has already been called, a2a.init('page') can be used instead of having to call the external JavaScript again.

<div>Share Page 3:</div>

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <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>
a2a_config.linkname = 'Example Page 3';
a2a_config.linkurl = 'http://www.example.com/page_3.html';
a2a.init('page');
</script>

Again for the third instance, properties of a2a_config are given new values, and a2a.init('page') initiates another AddToAny instance with those values.