The buttons

How many buttons show

List as many services as you like and cap what renders inline. Nothing is lost — everything past the cap is one tap away behind the More button.

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_btn_telegram"></a>
  <a class="ats_btn_reddit"></a>
  <a class="ats_btn_pinterest"></a>
  <a class="ats_dd"></a>
</div>

Order follows your markup

The cap takes from the front of the list you wrote, so put the services your readers actually use first.

Live demo

Demo ↗

An article worth passing on

Seven services listed, three rendered. Press More to reach the rest.

Services (7 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>window.ats_config = window.ats_config || {}; window.ats_config.num_services = 3;</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_btn_telegram"></a>
  <a class="ats_btn_reddit"></a>
  <a class="ats_btn_pinterest"></a>
  <a class="ats_dd"></a>
</div>

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

Floating share bar