Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Addthis - 2 different configurations on the same page

Tags:

html

addthis

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 enter image description here and the other doesn't enter image description here

Is it possible?

like image 413
Fredy31 Avatar asked Nov 14 '14 14:11

Fredy31


1 Answers

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.

like image 139
Dave Everitt Avatar answered Oct 10 '22 06:10

Dave Everitt