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.

  • Brian Morearty

    I’m implementing pjax for faster page navigation on a site that already uses AddThis. Pjax replaces the HTML body without reloading any JS or CSS.

    I tried this:

    // pjax:end is triggered after replacing the body
    $(document).on(‘pjax:end’, function() {
    addthis.toolbox(‘.addthis_toolbox’);
    })

    It partly works. The sharing buttons appear. However, the share count in the tiny speech balloon remains blank. Is there something else I have to do?

  • http://addthis.com/ AddThis

    We’ve got a solution for you but it might be easier for us to email you. Can you send us a quick note to: help@addthis.com?

  • Matt

    Hi Brian,

    It sounds like you may need to call addthis.counter() as well, using a CSS identifier as the first argument. Depending on which style of buttons you’re using for the counter, it would look something like this:

    addthis.counter(“.addthis_pill_style”);

    You may need to replace “addthis_pill_style” with a different CSS identifier, if you are using a different style.

  • Matt

    Hi Brian,

    It sounds like you may need to call addthis.counter() as well, using a CSS identifier as the first argument. Depending on which style of buttons you’re using for the counter, it would look something like this:

    addthis.counter(“.addthis_pill_style”);

    You may need to replace “addthis_pill_style” with a different CSS identifier, if you are using a different style.

  • Brian Morearty

    Thanks, Matt. I tried your suggestion. It does put a number in the addthis counter, but it doesn’t put in the correct number. If the first page I visit has 12 shares, every page I visit after that will show the number 12 in the bubble.

  • m12578

    nice to know about your site.

  • TheNewsCommenter

    Should this work with the new pro versions? I.e. ? The example above seems to be for older tools and I can’t get it to work with the new tools and either wrapping it in a .addthis_toolbox div or adding that class to the main share div. I also tried adding addthis.init(); and addthis.toolbox() on success: with no luck.

  • http://addthis.com/ AddThis

    We don’t have a way for dashboard users to load our tools dynamically, but you can still do it a different way. We’re happy to walk you though it; can you email us? help@addthis.com

  • Craig R Morton

    Great post, thank you. This is exactly what I was looking for.

  • Ilya

    What code(html button markup) do I need to add to add Jumbo Share Counter to dynamic content?

    I enabled the Domready option and added addthis.toolbox(‘.addthis_toolbox’) call but the counter is not being added.

  • http://addthis.com/ AddThis
  • Ilya

    Thank you. This helped!

    addthis.layers.refresh();

  • Ilya

    After some testing I found that this solution works great in Chrome, Safari and IE11 but not in the latest Firefox. Is this a known issue? The initial set of Jumbo Counters is loading fine but it doesn’t work on items that are being added dynamically.

  • http://addthis.com/ AddThis

    You’re right. We submitted a ticket to fix this bug as soon as possible. Do you happen to have a URL you can send over as an example? Thanks for checking on this and letting us know!

  • Jason Spradlin

    (Also, would there be a way to follow the status of this bug ticket?)

  • http://addthis.com/ AddThis

    It looks like this bug will soon be fixed, actually. We’re releasing some fixes so let us know if you’re still seeing this issue by the end of the week.