One service at a time

A button with no kit around it

Forty-eight of the catalogue’s services can be shared to, and every one of them can be a single anchor dropped straight into your markup with no kit wrapper above it. It reads data-url, data-title and data-label from itself, and it shares exactly as a button in a row of six does.

The code

  <a class="ats_btn_facebook ats_kit_size_32"></a>
  <a class="ats_btn_x ats_kit_size_32"></a>
  <a class="ats_btn_pinterest ats_kit_size_32"></a>
  <a class="ats_btn_linkedin ats_kit_size_32"></a>

The bare form

The widget looks for loose buttons after it has wired every kit, and skips any that turn out to be inside one, so an anchor and a kit on the same page never fight over the same button. Size comes from a class on the anchor itself rather than from a wrapper; without one it is 32px.

<a class="ats_btn_facebook" data-label="Share"></a>
<a class="ats_btn_x"></a>
<a class="ats_btn_pinterest ats_kit_size_40"></a>
<a class="ats_btn_linkedin" data-url="https://example.com/other"></a>

Shape is an ancestor’s job, or a knob

The shape classes are written as ancestors — ats_round_style applies to the buttons inside it — so putting one on the anchor itself does nothing. Either give the anchor any wrapper you like and put the class there, or set the corner directly, which needs no wrapper at all.

.ats_btn_x { --ats-button-radius: 50%; }

What a loose button does not get

No More button: a lone ats_dd is never wired, because the scan out here looks for service classes only. No share count either — the number and the one request per address that feeds it belong to a kit, though the share itself is still counted. And a class naming a service that does not exist, one of the six that can only be followed, or one your allowlist has filtered out, is left exactly where it is rather than removed: inside a kit the widget owns the row and tidies it, out here the element is your markup in a place we know nothing about.

Live demo

Demo ↗

An article worth passing on

Four independent anchors with no kit wrapper. Each carries its own size class and can share its own URL.

Button size

Shape

Behaviour

snippet.html

  <a class="ats_btn_facebook ats_kit_size_32"></a>
  <a class="ats_btn_x ats_kit_size_32"></a>
  <a class="ats_btn_pinterest ats_kit_size_32"></a>
  <a class="ats_btn_linkedin ats_kit_size_32"></a>

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

One button on its own