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

Elephantiasis

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

Foy

@jerrygarciuh Hi Jerry, Glad to be of help! Thank you for the comment and upvote. – Foy

Hi i am facing same issue in my angularjs application. Basically share-this code not loading on angularjs application where page not referesh. I have debug so i got one issue st_processed="yes" is not generating – Cornelison

Answer 2

Updated 09/2017 Answer

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

window.__sharethis__.initialize()

To reinitialize the buttons

Saury

Thank you. I searched for days and thought I was going crazy, because I was the only one who couldn't make use of stButtons. Done. – Implacental

Thank you very much. You saved my day. – Advocaat

This answer worked perfectly for me! I am using sharethis in my Angular 8 application. Thank you!! – Flyblow

Answer 3

Updated 03/2020 Answer

As found in The Ape's answer above: https://mcmap.net/q/648295/-sharethis-button-does-not-work-on-pages-loaded-via-ajax

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.

Mongo

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.

Hallucinatory

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

Dictate

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.

Overstuff

Answer 7

do this:

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

and config your buttons with javascript.

Stackhouse

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

Washboard

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.

Francinafrancine

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>

Adamski

that doesn't make any sense. What's camps-slide or where does loc and suffix stand for? Better put the url where you got it from – Rhodium