在 addthis 分享栏上动态更改 URL 适用于除分享数以外的所有内容

Question

我在页面上有一个模式，在页脚中添加了此共享按钮。我在页面上有一个项目列表，单击时，通过 ajax.

使用内容填充模态

我正在做的是在单击时动态更改 addthis:url 和 addthis:title。

所以，这是删除到页脚的模式：

<div class="modal">
  ...
  <div class="modal-footer">
    <div class="addthis_toolbox addthis_default_style">
      <a class="addthis_button_preferred_1"></a>
      <a class="addthis_button_preferred_2"></a>
      <a class="addthis_button_preferred_3"></a>
      <a class="addthis_button_preferred_4"></a>
      <a class="addthis_button_compact"></a>
      <a class="addthis_counter addthis_bubble_style"></a>
    </div>
  </div>
</div>

然后，当单击某个项目时，我将传递一些变量以更改 url 和标题：

addthis.toolbox(".addthis_toolbox", null, { title: theTitle, url: theUrl });

问题是<a class="addthis_counter addthis_bubble_style"></a>

这是末尾的计数气泡：

url 和标题改变得很好，但计数器永远不会改变。

我向 addthis 提交了支持请求，但没有得到像样的回复，询问我是否调用了 addthis.init()，是的……我当然调用了。共享栏已初始化并正在运行，但不算更新。

在这里搜索网络和其他问题，以及 addthis 上的文档，有很多复杂的方法可以处理基于 ajax 的内容。

我的代码与他们的示例的不同之处在于，ajax 内容包括实际按钮，而我的没有。我的分享工具栏保留在页面上，只有 addthis:url 和 addthis:title 改变了。

也许我漏掉了一些小步骤，或者这可能是一个错误，根本不是我的错。

希望有人能提供一些见解。

编辑

我终于收到了来自 addthis 的回复，说这是不可能的。如果调用工具箱函数，则不会刷新计数。

但 Joseph 在下面的评论和回答中显示的解决方法暂时解决了这个问题，至少在他们提供更合适的解决方案之前是这样。

Answer 1

经过反复试验，似乎addthis.counter方法是刷新计数器的方法。关于该方法的少量文档似乎仅指仅使用不带任何参数的方法（forum post I found), which may refresh the counter for static share elements (this is unconfirmed); however, when you add the same attributes that you use for the addthis.toolbox method call, it refreshes the counter correctly. You do have to provide the class for the counter and not the toolbox when you do call the counter method. e.g. addthis.counter('.addthis_counter', null, { url: 'http://example.com'}); Official documentation can be found here: http://support.addthis.com/customer/portal/articles/1365325-rendering-tools-with-javascript

这里是代码总结：

HTML

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<input type="text" value="http://example.com">

JavaScript

$(function(){
    addthis_config = addthis_config || { };
    addthis_config.pubid = prompt('Provide pubid:');
    addthis.init();

    $('input').on('input',function(){
        $(".addthis_toolbox .addthis_counter").replaceWith('<a class="addthis_counter addthis_bubble_style"></a>');
        addthis.toolbox(".addthis_toolbox", null, { title: 'test', url: this.value });
        addthis.counter('.addthis_counter', null, { url: this.value });
    }).trigger('input');
});

请注意 javascript 提示您输入 pubid。这只是为了演示，您可以将其更改为 addthis_config.pubid = 'xx-xxxxxxxxxxxxxxxx'; 以用于您的应用程序。

演示

jsfiddle

在 addthis 分享栏上动态更改 URL 适用于除分享数以外的所有内容

Changing the URL dynamically on addthis share bar works on all but the share count

javascript

ajax

jquery

addthis

HTML

JavaScript

演示