The buttons

Which services are offered

Two options decide what a reader can reach: a closed list of what is allowed, or a list of what is not. Both cover every surface at once, because the row, the More sheet and the image overlays all ask the same question.

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

What to watch for

A closed list is the one setting a later catalog cannot widen — use it when a policy has to hold.

Prefer the closed list for a policy

exclude_services is convenient when you simply dislike one service. If the list is a legal or compliance decision, use services instead: it is closed, so a service added to the catalog in a later release cannot quietly appear on your site. The catalog has already grown beyond its original service set.

window.ats_config = { services: ['facebook', 'x', 'email'] };

Both take a string or an array

A comma-separated string is what you write by hand; an array is what a template produces. Either works.

An empty list removes the More button

If nothing is left to show, the More button is not drawn at all. A button that opens a sheet saying nothing found is worse than no button.

Live demo

Demo ↗

An article worth passing on

Three services excluded. Press More and look for them: they are not there either.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>window.ats_config = window.ats_config || {}; window.ats_config.exclude_services = "vk,reddit,weibo";</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_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

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