The menu

Leave a few services out

The subtractive half of choosing services: the whole catalogue is offered except the keys you name. That is the right shape for a preference — one network you would rather not carry — and the wrong shape for a policy, because a service added to the catalogue in a later release arrives switched on.

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_reddit"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

An allowlist wins outright

If services is set and not empty, this option is never consulted at all. The two are not merged and not subtracted from one another — the closed list answers on its own. Shipping both and expecting the second to trim the first is the one way to be surprised by either.

/* exclude_services is ignored here: the closed list has already answered. */
window.ats_config = {
  services: ['facebook', 'x', 'email'],
  exclude_services: ['x']
};

An excluded button is removed, not disabled

Inside a kit the anchor is taken out of the document and the row closes up, so you can leave the markup alone while you change your mind about the list. A lone button outside a kit is left where it is instead: that element is your own markup in a layout we know nothing about, and an unpainted anchor has no size, ground or glyph, so it is already invisible.

Follow buttons are not filtered

A follow kit never asks this question. Its buttons are your own profiles, chosen one at a time by the handle you typed, so dropping VK from what a reader may share to does not remove a VK follow button from your footer.

Live demo

Demo ↗

An article worth passing on

Five buttons are written in the markup and four render: the Reddit anchor is taken out of the row rather than left as a tile that is not allowed to share.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.exclude_services = [
  "reddit",
  "tumblr",
  "vk"
];
</script>

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

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

Which services