Sharethis button does not work on pages loaded via ajax

user_314010 0
Viewed 13616

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

sharethis
10 Answers

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.

user_11721890

do this:

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

and config your buttons with javascript.

user_99123150

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.

user_3284060
Related