Sharethis button does not work on pages loaded via ajax

Question

I am trying to use the sharethis button on a page which is loaded via ajax. The buttons do not show up. Please help.

Regards, Pankaj

Answer 1

After adding the new content to the dom, call

stButtons.locateElements();

// or if you want to be a bit defensive about whether the lib has been
// loaded or not:
if (window.stButtons){stButtons.locateElements();} // Parse ShareThis markup

Article another another

Answer 2

Updated 09/2017 Answer

The stButtons object doesn't exist anymore, now you can use

window.__sharethis__.initialize()

To reinitialize the buttons

Answer 3

Updated 03/2020 Answer

As found in The Ape's answer above: https://stackoverflow.com/a/45958039/1172189

window.__sharethis__.initialize()

This still works, however there is a catch if your URL changes on the AJAX request, you need to make sure the URL you want shared is set as a data attribute (data-url) on the inline sharing div. You can also update the title using data-title attribute.

<div class="sharethis-inline-share-buttons" data-url="http://sharethis.com" data-title="Sharing is great!"></div>

Use case:

I'm using a WordPress/PHP function to generate specific content based on a query string. If you don't set the data-url attribute on the ShareThis div, ShareThis will hold the first URL that was clicked to share, regardless of the URL update on AJAX request.

Answer 4

This solution will also work for NodeJS based frameworks, like Meteor.

stButtons.locateElements();

is needed in the rendered callback of a template, to ensure that the shareThis buttons will appear on a page redirect.

Answer 5

I was facing the same problem with sharethis and Ajax pagination. The buttons was not showing after posts loaded by Ajax so I've searched and found this. I've just added the function stButtons.locateElements(); on Ajax success:

something like success: stButtons.locateElements();

Hope this will be helpful for someone like me.

Thanks Ibnul

Answer 6

For the new API following solution worked for me

if (__sharethis__ && __sharethis__.config) {
    __sharethis__.init(__sharethis__.config);
}

Add this code after loading ajax content.

Answer 7

do this:

window.__sharethis__.load('inline-share-buttons', config);

and config your buttons with javascript.

Answer 8

In Drupal you can achieve this by adding following code:

(function($){
  Drupal.behaviors.osShareThis = {
    attach: function(context, settings) {
      stLight.options({
        publisher: settings.publisherId
      });
      // In case we're being attached after new content was placed via Ajax,
      // force ShareThis to create the new buttons.
      stButtons.locateElements();
    }
  };
});

Answer 9

The following should work with current ShareThis javascript. If sharethis js isn't loaded, the script loads it. If it is already loaded, ShareThis is re-initialized using the current URL so that it works on pages loaded via Ajax. Working fine for me when used with mounted method on Vue component.

const st = window.__sharethis__
if (!st) {
  const script = document.createElement('script')
  script.src =
    'https://platform-api.sharethis.com/js/sharethis.js#property=<your_property_id>&product=sop'
  document.body.appendChild(script)
} else if (typeof st.initialize === 'function') {
  st.href = window.location.href
  st.initialize()
}

Make sure you use your property id provided by ShareThis in the script src url.

Answer 10

I found the following solution on one of the addThis forums and it worked great for me. I called the function as a callback to my ajax call. Hoep this helps

<script type="text/javascript">
       function ReinitializeAddThis(){
      if (window.addthis){
         window.addthis.ost = 0;
         window.addthis.ready();
      }
   }
...
$('#camps-slide .results').load(loc+suffix, function() {ReinitializeAddThis();});
</script>