AddToAny links appear after reloading

Question

I am working on angular 17 project, and I need to add social links.

I was recommended to use AddToAny library, so my code is the following:

<div class="share">
  <p>share</p>
  <!-- AddToAny BEGIN -->

  <div class="a2a_kit a2a_kit_size_32 a2a_default_style share-this">
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
    <a class="a2a_dd a2a_button_facebook"></a>
    <a class="a2a_dd a2a_button_linkedin"></a>
    <a class="a2a_dd a2a_button_twitter"></a>
    <a class="a2a_dd 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>

  <!-- AddToAny END -->
</div>

The problem is, that with the first page load - I don't see any social icon, but reloading the page cause them suddenly appear.

can you please tell what am I wrong with? what am I missing?

thanks a lot for every help!

Answer 1

Another method to apply add2any on links you want to share on social platforms is by using the a2a.init('page') call after the script is actually loaded in.

To do this you can define a custom callback function in the a2a_config. After the script is loaded and the callback is called you can initialize any link you want.

reference

var a2a_config = a2a_config || {};
a2a_config.callbacks = a2a_config.callbacks || [];
a2a_config.callbacks.push({
    ready: my_addtoany_onready
});


function my_addtoany_onready() {
    console.log('-- called by add2any --');
    a2a_config.target = '.share'; // any selector can be put here to target the links you want to be shareable
    // Additional instance configs can be set here
    a2a.init('page');
}

<a href="http://www.example.com" class="share">Example.com</a>
<script async src="https://static.addtoany.com/menu/page.js"></script>

---

If you don't want to display all services at once, you configure the prioritize property as seen here