AddThis Academy

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

Rendering Tools with JavaScript

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.

You can render the AddThis button anywhere on your page using JavaScript. All of our JavaScript rendering methods take the form:

addthis.method(target(s), [configurationObject], [sharingObject]);

Where target(s) can be:

  • a classname, specified with a dot: .sharing-button
  • an id, specified with a hash: #addthis_button_1
  • an actual HTML element reference: document.getElementById('addthis_button_1');
  • an array of HTML element references: document.getElementsByClassName('sharing_button');

If configurationObject is unspecified, global defaults (i.e., the addthis_config object) are used. If sharingObject is unspecified, global defaults (i.e., the addthis_share object) are used. At present, we only support rendering of buttons via JavaScript, but we plan to support inline menus as well in the future.


The Button

The addthis.button function renders a normal AddThis button at an anchor tag. If the tag has no image in it, we load our default image. If the tag has an image in it, that image is used as for the button graphic.

addthis.button(target(s), [configurationObject], [sharingObject]);

Render a button at a tag:

<a id="atbutton"></a>

<script type="text/javascript">
  addthis.button("#atbutton");
</script>

Render a button at every anchor with a certain class:

<a class="sharing-button"></a>
.
.
.
<a class="sharing-button"></a>
.
.
.
<a class="sharing-button"></a>

<script type="text/javascript">
  addthis.button('.sharing-button');
</script>

Each <a> tag “sharing-button”-classed anchor would become a regular AddThis button.

Share many different blog posts:

<a id="blog-post-24"></a>
<script type="text/javascript">
  addthis.button('#blog-post-24', {}, {url: "http://example.com/blog/24", title: "The 24th post"});
</script>
.
.
.
<!-- blog content -->
.
.
.
<a id="blog-post-25"></a>
<script type="text/javascript">
  addthis.button('#blog-post-25', {}, {url: "http://example.com/blog/25", title: "The 25th post"});
</script>

Render a button at an HTML element passed by reference:

<a id="button-1"></a>
<script type="text/javascript">
  addthis.button(document.getElementById('button-1'));
</script>

Render a button at an array of HTML elements:

<a id="button-1"></a>
<a id="button-2"></a>
<a id="button-3"></a>
<a id="button-4"></a>
<script type="text/javascript">
addthis.button([document.getElementById('button-1'),
                document.getElementById('button-2'),
                document.getElementById('button-3'),
                document.getElementById('button-4')]);
</script>

The Toolbox

Renders an AddThis toolbox inside the given <DIV>. In normal operation, all appropriately-classed anchors are rendered automatically through link decoration, described below. But when building a toolbox dynamically using JavaScript, after the page has finished loading, you can use this function to force AddThis to update any newly decorated links. (If the div has no appropriately-classed anchors inside it, nothing happens.)

addthis.toolbox(target(s), [configurationObject], [sharingObject]);

Render a dynamically-created toolbox:

<div id="toolbox"></div>

<script type="text/javascript">
var tbx = document.getElementById("toolbox"),
    svcs = {email: 'Email', print: 'Print', facebook: 'Facebook', expanded: 'More'};

for (var s in svcs) {
    tbx.innerHTML += ''+svcs[s]+'';
}
addthis.toolbox("#toolbox");
</script>

The Counter

Renders an AddThis share counter at the specified tag.

addthis.counter(target(s), [configurationObject], [sharingObject]);

Render a share counter at a tag:

<a id="atcounter"></a>

<script type="text/javascript">
  addthis.counter("#atcounter");
</script>

« URL Parameters

Preferred Services & Personalization »

Rendering Tools with JavaScript
4 (80%) 1 vote

Was this article helpful to you?