Popular

Image sharing

With overlays on, any image big enough gets a share button in its corner on hover. The page is what gets shared; the image rides along for the services that can carry one, such as Pinterest.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_pinterest"></a>
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_dd"></a>
</div>

What to watch for

Only images wider than the threshold get a button, and the overlay file is fetched the first time one is needed — never on a page without images.

Small images are left alone

Anything under 200 pixels across gets no overlay, which keeps avatars, icons and tracking pixels clear of it. Change the floor with overlay_min_size.

window.ats_config = { overlays: true, overlay_min_size: 320 };

Exempting one image

Put the attribute on the image, or on anything containing it, and no overlay appears there.

<img src="logo.png" alt="" data-ats-no-overlay>

It is a separate file

The overlay code lives outside the main script and is fetched only when you switch it on, so a page that does not use it pays nothing.

Live demo

Demo ↗

An article worth passing on

Hover this picture to show its share button.

Overlays are on for this page. Hover the picture below and a button appears in its corner — the kit above is an ordinary one, shown so you can see both ways of sharing side by side.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<script>
window.ats_config = window.ats_config || {};
window.ats_config.overlays = true;
window.ats_config.overlay_min_size = 200;
</script>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_pinterest"></a>
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_dd"></a>
</div>

<img class="share-example" src="https://addtosite.com/img/customize/overlay-sample.svg" width="480" height="300" style="max-width:100%;height:auto" alt="A picture worth sharing">

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

Share another URL