What gets shared

What a button actually sends

Before anything opens, a kit works out two things: which address to hand over and which title to put with it. Each has a chain of four sources, and every kit on the page answers separately — which is why a listing page can give each row its own link.

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

The two chains

First one that exists wins. Neither ever ends up empty.

url    data-url  ->  ats_config.url  ->  <link rel="canonical">  ->  location.href
title  data-title ->  ats_config.title ->  <meta property="og:title"> ->  document.title

Prefer fixing the page over overriding the kit

A canonical link and an og:title are read by every other thing that touches your page — search, previews, the reader’s own browser. Setting them fixes the buttons as a side effect. Reach for data-url and data-title when one kit has to differ from its page, not to patch a page that has neither.

The title is not always sent

Some services take only a link; the ones that take text get the title. Nothing is truncated on our side, so a very long title is passed on whole and cut by whoever receives it.

Live demo

Demo ↗

An article worth passing on

These share this page. The address is the canonical link in its head; the title is its og:title, which is why it reads as a sentence rather than as a browser tab.

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

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