Addthis - 2 different configurations on the same page

Question

I would like to have 2 different configurations of addthis on the same page.

Take note that I'm using the new Addthis, where the code looks like this:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxxxxxxxxxxxxxxx" async="async"></script>
<div class="addthis addthisBlogue clearfix">
    <div class="addthis_sharing_toolbox"></div>
</div>

What I'm trying to do is have 1 that have the share numbers tooltips and the other doesn't

Is it possible?

Answer 1

Since AddThis creates HTML elements that contain the count 'tooltip' (it's not actually a tooltip) with a single class or ID element, if you want to be really specific (i.e. choose what to hide exactly where you have two or more AddThis instances on a page) you could:

1. add the instance where you want to hide the count inside a div with a CSS ID or unique class;
2. use display: none to hide the parent social media count element only inside that div.

Target the AddThis where you want to hide the count elements

Seems obvious, but For example, on this page if you inspect (e.g. in Chrome) the rendered Facebook and Twitter AddThis elements and add 'display: none' to the .pluginCountButton and .count-o styles that contain the elements you want to hide, as expected: they vanish from the display.

So if you nest your AddThis instances inside a uniquely-identified div (or any parent element) then you could simply target the one you want to hide like this:

#hiddencount .pluginCountButton,
#hiddencount .count-o {
  display: none;
}

You'd need to locate the equivalent .pluginCountButton and .count-o elements for your version and instance—each social media icon has it's own so you'd have to identify each, as in the above example. You may also need more specificity between #hiddencount and the count container to get the style to apply.

NOTE: without a working example with the count links showing, this is untested. If you have a working example, I'd be happy to test it.

Answer 2

Through some digging I discovered the answer.

You need to add the class addthis_toolbox to your divs like so:

<div class="addthis addthis_toolbox addthisBlogue clearfix">
    <div class="addthis_sharing_toolbox"></div>
</div>

source: http://support.addthis.com/customer/portal/questions/5024966-multiple-share-button-on-same-page