AddThis Academy

An ever-growing library of resources to help you become a better online marketer.

Using AddThis Pro Asynchronously

NOTE: The below instructions are only for our older tools that include markup on the page! For instructions on rendering the dashboard configuration tools on a page go here

Asynchronous Loading

Asynchronous loading allows you to put our bootloader script – addthis_widget.js – on your page without loading the other assets until you’re ready. To use it, just add the #async=1 flag to the addthiswidget.js URL and then call addthis.init() in a JavaScript function when you’re ready. That will load the assets, and render the AddThis tools.

<script src="http://s7.addthis.com/js/300/addthis_widget.js#async=1" type="text/javascript"></script>
<script type="text/javascript">
    // Call this function once the rest of the document is loaded
    function loadAddThis() {
        addthis.init()
    }
</script>

Note that the addthis.init() option should only be called once. If you’re rendering the buttons more than once on your page, use the addthis.toolbox() or addthis.button() at the end of this document after calling addthis.init().

The Domready Option

Our domready option allows you to load the AddThis bootloader script after the rest of the page. This could be useful if you want to put the addthis_widget.js script into a dynamically created <script> tag.

<script type="text/javascript">
    var addthisScript = document.createElement('script');
        addthisScript.setAttribute('src', 'http://s7.addthis.com/js/300/addthis_widget.js#domready=1')
        document.body.appendChild(addthisScript)
</script>

This will produce the same result as if the addthis_widget.js script was loaded on the page. You don’t have to call any other function to get the AddThis buttons to render.

Using domready and async with with the pubid

If the URL you’re using for the bootloader script already has your profile ID as an option, remove the profile ID and declare it in JavaScript, like this:

<script type="text/javascript">
    var addthis_config = addthis_config||{};
        addthis_config.pubid = 'YOUR PUBID';
</script>

Just replace YOUR PUBID with the profile ID. It looks something like this: ra-ac34f32d25bc555

Rendering Buttons Dynamically

Many people have sites that use dynamic HTML or AJAX to show content. A common example is endless scrolling, which loads content as the user gets to the end of the page so they don’t have to navigate to another page for more content. However, because AddThis code runs at page load, the AddThis buttons on this dynamic content don’t display.

We offer a few functions to render AddThis on dynamic content, once our assets have been loaded. But the most useful one is probably addthis.toolbox(). Here’s how you use it:

First, add the addthis_widget.js to the page and make sure the assets have been loaded using the addthis.init() function or the domready option if you’re loading AddThis dynamically. This will ensure the addthis.toolbox() function is available.

Then, make sure you’ve got the AddThis buttons in the dynamic content. Something like this:

<h1>My Dynamic Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nibh vitae quam adipiscing tempor et vitae nisl. Sed vulputate sodales dignissim. Quisque sit amet ante at lorem scelerisque malesuada quis vitae odio.</p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->

Finally, in the JavaScript callback that renders the dynamic content add the addthis.toolbox() function, using a CSS identifier as the first argument.

function loadDynamicContent() {
    // Code that will load the dynamic content

    // Once that's all done, call addthis.toolbox()
    addthis.toolbox('.addthis_toolbox')
}

 

Using AddThis Pro Asynchronously
2.3 (46.67%) 3 votes

Was this article helpful to you?