html - Addthis - 同一页面上的 2 种不同配置

Question

我想在同一个页面上有 2 个不同的 addthis 配置。

请注意，我使用的是新的 Addthis，代码如下所示:

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

我想要做的是让 1 个具有共享数字工具提示 而另一个没有

这可能吗？

Answer 1

由于 AddThis 使用单个类或 ID 元素创建包含计数“工具提示”(它实际上不是工具提示)的 HTML 元素，如果您想要非常具体(即选择要隐藏的内容，您有两个或更多AddThis 实例)你可以:

1. 在具有 CSS ID 或唯一类的 div 中添加要隐藏计数的实例；
2. 使用 display: none 将父社交媒体计数元素仅隐藏在该 div 中。

将 AddThis 定位到您要隐藏计数元素的位置

似乎很明显，但是例如，在 this page 上如果您检查(例如在 Chrome 中)呈现的 Facebook 和 Twitter AddThis 元素并将“display: none”添加到包含这些元素的 .pluginCountButton 和 .count-o 样式你想隐藏，如预期的那样:它们从显示中消失。

因此如果您将 AddThis 实例嵌套在唯一标识的 div(或任何父元素)中，那么您可以简单地定位要隐藏的对象，如下所示:

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

您需要为您的版本和实例找到等效的 .pluginCountButton 和 .count-o 元素——每个社交媒体图标都有自己的图标，因此您必须识别每个，如上例所示。您可能还需要在 #hiddencount 和计数容器之间有更多的特异性才能应用样式。

注意:没有显示计数链接的工作示例，这是未经测试的。如果您有一个有效的示例，我很乐意对其进行测试。