What gets shared

The message a button carries

Thirty-seven of the services that open a share window take a line of text beside the link, and that line is the title. Set data-title and you are not naming the page, you are writing the sentence the reader’s post opens with.

The code

<div class="ats_kit ats_kit_size_32"
     data-title="Five minutes on why share buttons got so heavy">
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_telegram"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_facebook"></a>
  <a class="ats_dd"></a>
</div>

Nine services take the link and nothing else

Facebook, LinkedIn, LINE, Messenger, Snapchat, Plurk, Xing, Mix and Google Classroom have no text parameter to fill. They read the page themselves, so the words they show come from its og:title and og:description — fix those and you have fixed those nine.

facebook  https://www.facebook.com/sharer/sharer.php?u={url}
x         https://x.com/intent/tweet?url={url}&text={title}
whatsapp  https://api.whatsapp.com/send?text={title}%20{url}

The same line is the email subject

The built-in email template puts the title in the subject and the address in the body, and the SMS button puts both in the message. One sentence that reads as a subject line and as an opening line is doing more work than it looks.

email  mailto:?subject={title}&body={url}
sms    sms:?&body={title}%20{url}

Different words for one service

There is no option for the message on its own, because the slot it would go in is a text parameter on some services and the whole field on others. To put fixed words in front of the title for one service, replace that service’s template and leave the rest alone.

window.ats_config = {
  share_url: {
    x: 'https://x.com/intent/tweet?url={url}&text=Worth%20five%20minutes%3A%20{title}'
  }
};

A hashtag, or a phone number

The same replacement carries any parameter a service endpoint understands, which is how the per-service extras other widgets expose as named options are done here. Facebook takes a hashtag on its sharer; X takes a comma-separated hashtags list; WhatsApp takes a phone number, in international format without the plus, and then shares to that one contact instead of asking the reader to pick. Percent-encode the value — the hash sign is %23 — and keep {url} and {title} where the template had them.

window.ats_config = {
  share_url: {
    facebook: 'https://www.facebook.com/sharer/sharer.php?u={url}&hashtag=%23addtosite',
    x: 'https://x.com/intent/tweet?url={url}&text={title}&hashtags=addtosite,sharing',
    whatsapp: 'https://api.whatsapp.com/send?phone=84901234567&text={title}%20{url}'
  }
};

Live demo

Demo ↗

An article worth passing on

Press WhatsApp or Telegram: the draft opens with that sentence and the link under it. Facebook takes no text at all, so the same press sends the address alone.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<div class="ats_kit ats_kit_size_32"
     data-title="Five minutes on why share buttons got so heavy">
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_telegram"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_facebook"></a>
  <a class="ats_dd"></a>
</div>

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