Behind the scenes

Change or cancel a share before it opens

onBeforeShare runs before anything opens, and the object it is handed is the share itself. Edit url or title in place and the edit is what goes out. Return false and nothing happens at all: no window, no count, no thank-you.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_copy"></a>
  <a class="ats_dd"></a>
</div>

<p id="ats-demo-status" role="status" aria-live="polite">Facebook is cancelled in this example. Copy link adds #shared to the URL.</p>

Edit in place; the object is the share

Both fields are read back out after your hook returns, through String(), so assigning a number or a URL object is safe rather than fatal. A url you blank falls back to the kit’s own address; a title you blank leaves an empty slot rather than the word null.

window.ats_config = {
  onBeforeShare: function (s) {
    if (s.service === 'x') s.title = s.title + ' — via @addtosite';
    s.url = s.url + '#shared';
  }
};

Exactly false cancels, and it cancels the count too

Nothing else does: undefined, null and 0 are all "carry on", so a hook that forgets to return is harmless. A real false stops the window, the beacon, the optimistic count, the handoff to your analytics and onShare — a share that never happened must not be recorded anywhere. It cancels a copy and a print as well, not only a popup.

onBeforeShare: function (s) {
  return s.service === 'facebook' ? false : undefined;
}

What it cannot do

Changing s.service does not swap the service — the button was chosen before the hook ran. The count keeps keying off the page rather than off your edited link, deliberately: the variants this hook exists to produce are all the same article, and filing each under its own key would stop the number moving with nobody able to see why. And a hook that throws is caught and ignored, leaving the default share running — a throw is not a cancel.

Live demo

Demo ↗

An article worth passing on

Facebook is cancelled in this example. Copy link adds #shared to the URL.

The hook cancels Facebook and modifies every other target. Try both the inline buttons and services in More; they use the same hook.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_copy"></a>
  <a class="ats_dd"></a>
</div>

<p id="ats-demo-status" role="status" aria-live="polite">Facebook is cancelled in this example. Copy link adds #shared to the URL.</p>

<script>
window.ats_config = window.ats_config || {};
window.ats_config.onBeforeShare = function (share) {
  var status = document.getElementById('ats-demo-status');
  if (share.service === 'facebook') {
    status.textContent = 'Facebook share cancelled by onBeforeShare.';
    return false;
  }
  share.url = share.url.split('#')[0] + '#shared';
  if (share.service === 'x') share.title += ' — via @addtosite';
  status.textContent = 'Sharing with ' + share.service + ': ' + share.url;
};
</script>

<script async src="//static.addtosite.com/widget.js"></script>

Say thanks Short links