Blog

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

  • 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

  • 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?

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

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

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

  • 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?)

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

  • André

    After loading the AddThis script and creating the div hook, the widget is loaded properly on page load. But including addthis.toolbox(“.addthis_sharing_toolbox”); after the AJAX requests are made doesn’t build the new widget.

  • what was the fix Hellas?

  • mikesr

    hello, i have a question. I’m using free original sharing buttons and I added ‘data-url’ into the provided code: “”. Because i’d like to change url dynamicaly, i wrote: $(“.addthis_native_toolbox”).attr(‘data-url’, “url”); in some event listener. Basicaly, i have a gallery, and when the image is changed, the
    ‘data-url’ attribute also gets changed, but when
    i’d ike to share a specific image it will always provide url of the first image in a gallery. The ‘data-url’ is changing appropriately in div container, but when i’d like to share it will always use a url specified at a loading of a page. How do i solve this? any help?

  • mikesr

    solve it! tnx anyways

  • Hi Mike, glad to hear you figured it out! If you ever need any assistance in the future, please feel free to email help@addthis.com. Thanks!

  • cemana

    Hi mikesr.
    Which was the solution?

    Thanks

  • korsmo

    Hi, I am facing the same issue as mikesr mentioned. On ajax call i change the content of my page and change the value of facebook data-href using jquery. The value gets changed but while sharing, it shows original href maybe from window.location

    Please help !

  • Hi Andriy, we can definitely take a closer look at this for you. Please shoot an email to help@addthis.com and we’ll assist. Thanks!

  • Andriy_Lach

    Thanks for reply. But now it looks ok.

  • Andriy_Lach

    Thanks for reply. But now it looks ok.

  • Rynne McCoy Cowham

    I still can’t figure out why AddThis is refusing to allow me to display both a set of FOLLOW buttons AND a set of SHARE buttons. I tried doing them both under one profile, putting the script in once and the divs in for each — no bueno. Tried making two separate profiles, putting BOTH scripts in once each and then the divs for each — no bueno. I can’t figure out what is wrong with this thing — I have followed the instructions to the letter and I can’t find ANYTHING online addressing this issue that isn’t 2+ years old and using obsolete instructions. HELP PLEASE. Or just tell me this is something you have to PAY for so I can stop beating my head on the desk over it. I am using the free versions of both tools.

  • Hi Rynne, our apologies for your frustration. Please send an email to help [at] addthis [dot] com with the link to the site you’re working on and our support team will help you get the buttons up and running.

  • Suja

    i have added this in my website but while fetch and rendering the script http://s7.addthis.com/js/300/addthis_widget.js has been blocked by robots.txt file how to resolve this could u plz help me

  • Hi there, we’ll need a few more details from you before we can assist. Can you please email us at help [at] addthis [dot] com? Thanks!

  • Vivek

    I have

  • Vivek

    I have added it to my website but while we are fetch results with ajax call add this icon is not rendering ,Please help me

  • Hi Vivek, can you please email us at help [at] addthis [dot] com with these details? Our support team will be able to take a closer look at your site and assist. Thanks!