A Brief History of Using AddThis Dynamically

AddThis provides several ways of making our code work on dynamic websites. Here’s a quick rundown for the JavaScript savvy audience out there.

Asynchronous Loading

Asynchronous loading allows you to put our bootloader script–addthiswidget.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>

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 buttons in a pop-over div but not include the tools on the page. Here’s an example script.

<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.

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')
}
  • Hellas

    Hi. I have a problem with using your plugin with Rails 4. I have turbo-links enabled. AddThis normally appears on home page but when I navigate to some other part of the site, AddThis smart layers just disappear. They appear only after I refresh my site. What should I do to make it work? Thank you :)

  • Catherine Winters

    I’ve got addthis.toolbox() working, but how do I narrow down WHICH selector I’m referencing? I can’t do addthis.toolbox(‘.slideshow .addthis_toolbox’), and i’m not sure how to have one AddThis block on the main page and one for each slide in my carousel without addthis.toolbox() overwriting everything. Is this a limitation of the script, or am I missing something?

    (To anyone else, this is what I did that works: I used JavaScript to remove the addthis_toolbox class from all the AddThis instances WITHIN the slider/carousel/slideshow, then add a new common class, .slideshow_addthis_toolbox, for each one. I update all of the .slideshow_addthis_toolbox divs with .addthis_toolbox() when switching slides and it works fine.)

  • http://addthis.com/ AddThis

    Sorry for the late response, Hellas. We thought we already wrote back. If you are still seeing this same issue, send us an email and our support team will help you out: help@addthis.com

  • http://addthis.com/ AddThis

    Hi Catherine. For specifying CSS selectors, we recommend
    that an ID selector is specified rather than a class selectors, so that only a single addthis_toolbox is added to the page.