AddToSite

← Customize

Customize

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.

Live demo

Running on this page
A sample picture, wide enough to receive a share overlay
Hover this picture: a share button appears in its corner.

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.

The code

This is the demo above, verbatim. Nothing is shortened for the page.

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

<div class="ats_kit ats_kit_size_32">
  <a class="ats_button_pinterest"></a>
  <a class="ats_button_facebook"></a>
  <a class="ats_button_x"></a>
  <a class="ats_dd"></a>
</div>

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

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.

Next