Search code examples
javascriptjqueryajaxaddthis

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

I have a modal on a page that has addthis share buttons in the footer. I have a list of items on the page, that when clicked, populate the modal with content via ajax.

What I'm doing is dynamically changing the addthis:url and addthis:title on click.

So, here's the modal stripped down to the footer:

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

And then, when an item is clicked, I'm passing some variables in to change the url and title:

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

The problem is <a class="addthis_counter addthis_bubble_style"></a>

It's the count bubble on the end of:

addthisexample

The url and title change just fine, but the counter never changes.

I'm submitted a support request to addthis, that of which lacked a decent response, asking if I've called addthis.init(), which yes... of course I did. The sharing bar has been initialized and is working, but counts not updating.

Searching the web and other questions on here, along with the docs on addthis, there are so many intricate ways of dealing with ajax based content.

The difference in my code vs their examples is, the ajax content includes the actual buttons, whereas mine does not. My sharing toolbar remains on the page, and only the addthis:url and addthis:title is changed.

Maybe I'm missing some small step, or perhaps this is a bug and not my fault at all.

Hoping someone might have some insight.

EDIT

I got a response finally... from addthis, stating that it wasn't possible. Counts are not refreshed if the toolbox function is called.

But Joseph's workaround shown in comments and answer below solved the issue for now, at least until they provide a more suitable solution.

Solution

  • After much trial and error, it seems that the addthis.counter method is the way to refresh the counter. What little documentation there is on the method only seems to refer to just using the method without any parameters (a 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

    Here is the code in summary:

    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');
});

    Notice that the javascript prompts you for your pubid. This is just for the demo, you can change that to addthis_config.pubid = 'xx-xxxxxxxxxxxxxxxx'; for your application.

    Demo

    jsfiddle