Popular

Customize image share buttons

Show buttons on visible images, including touch screens. Choose their services and placement, target a gallery, or share the image file itself.

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_dd"></a>
</div>

Choose the pictures

overlay_target accepts a CSS selector. Both displayed dimensions must meet overlay_min_size. Header, footer and widget images are excluded; data-ats-no-overlay opts any image or ancestor out.

window.ats_config.overlay_target = ".gallery img";
window.ats_config.overlay_min_size = 160;
// Add the matching class to your images or gallery.

Always visible or on hover

Use visible for persistent buttons on every eligible image. Hover mode shows them while pointing at a picture and supports tapping on touch screens.

window.ats_config.overlay_show = "visible"; // or "hover"

Services, size and orientation

List service keys in the desired order, using dd for More. Sizes run from 16 to 64 pixels. Orientation is horizontal or vertical.

window.ats_config.overlay_services = ["pinterest", "facebook", "dd"];
window.ats_config.overlay_size = 40;
window.ats_config.overlay_orientation = "vertical";

Nine positions

Combine top, center or bottom with left, center or right. The buttons follow their picture when the page scrolls or changes size.

window.ats_config.overlay_position = "center-right";

Your own overlay markup

overlay_html accepts your own trusted HTML with one ats_kit root. It preserves button labels, artwork and classes. The widget supplies the image URL, title and page context. This overrides the services, size and orientation settings; position still applies.

window.ats_config.overlay_html = '<div class="ats_kit ats_kit_size_40"><a class="ats_btn_pinterest" data-label="Save image"></a><a class="ats_dd"></a></div>';

Share an image file or its description page

By default, longdesc on an image selects its description page; otherwise the canonical page URL is used. Enable overlay_use_image to share the image URL itself. The alt text becomes the shared title.

window.ats_config.overlay_use_image = true;

Include an image in your page

The demo targets the share-example class. Replace the example source with your image, or change overlay_target to match an existing gallery.

<img class="share-example" src="/images/photo.jpg" width="480" height="300" alt="A photo worth sharing">

Live demo

Demo ↗

An article worth passing on

Image buttons stay visible as you scroll.

The image buttons remain visible, including on mobile. They share this page and pass the selected picture to services that accept it.

Services (2 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_show = "visible";
window.ats_config.overlay_services = [
  "pinterest",
  "facebook",
  "dd"
];
window.ats_config.overlay_size = 32;
window.ats_config.overlay_orientation = "horizontal";
window.ats_config.overlay_position = "bottom-center";
window.ats_config.overlay_target = "img.share-example";
window.ats_config.overlay_min_size = 160;
</script>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_pinterest"></a>
  <a class="ats_btn_facebook"></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>

Pinterest Your own artwork