AddThis Academy

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

Using Dashboard Configuration Tools Dynamically

Tools controlled from the AddThis Dashboard have some different methods for using them dynamically.

addthis.layers.refresh()

  • Updates the share URL of all floating tools (sharing sidebar, for instance) to the current URL
  • Creates inline tools on any elements that do not yet have a tool rendered for it

To use this, run the code inside a callback for your framework that’s run after the page is loaded. Here are two possible examples. Note: These are just examples and you will probably have to modify them to get them to work.

<script type="text/javascript">
//always refresh on URL change
window.addEventListener("hashchange", function () {
  addthis.layers.refresh();
});
</script>
<script type="text/javascript">
//refresh manually
someFramework.loadPage(function () {
  addthis.layers.refresh();
})
</script>

Use case with multiple sets of share buttons

Often, a single ‘page’ will have multiple sets of sharing buttons on it. For example, a news site might use infinite scroll to append new articles to the bottom of a page when a user scrolls that far down. In these cases, it’s important for each set of share buttons to share a different URL.

To support this, simply include data-url and data-title attributes on any new addthis containers you append to the page. Once the container has been added to the DOM with these attributes, call addthis.layers.refresh().

Before:
<!-- share buttons already loaded -->
<article>
  <div class="addthis_responsive_sharing" 
    data-url="http://www.example.com/cool-article"
    data-title"Super Cool Article">
    <div>
      <a class="twitter">...</a>
      <a class="facebook">...</a>
      <a class="addthis">...</a>
    </div>
  </div>
</article>
After appending new content:
<article>
  <div class="addthis_responsive_sharing" 
    data-url="http://www.example.com/cool-article"
    data-title"Super Cool Article">
    <div>
      <a class="twitter">...</a>
      <a class="facebook">...</a>
      <a class="addthis">...</a>
    </div>
  </div>
</article>
<!-- a new article, with a new div to render share buttons to -->
<article>
  <div class="addthis_responsive_sharing" 
    data-url="http://www.example.com/newer-article"
    data-title="Newly Appended Article">
  </div>
</article>

A call to addthis.layers.refresh would transform the div with class addthis_responsive_sharing in to a new group of responsive sharing buttons, with it’s own URL to share.

As with any inline element, you need to get the appropriate HTML snippet from the dashboard, so we know which elements on your page to render to.

Using Dashboard Configuration Tools Dynamically
1 (20%) 5 votes

Was this article helpful to you?