AddToAny for images enables image sharing to services, and automatically displays share buttons on hover over images. Image sharing works in galleries, sliders, slideshows, lightboxes, carousels, and even on dynamically loaded images.

Default Image Buttons

In a default setup, Pinterest and Facebook share buttons are overlayed vertically in the upper-left corner of images that are at least 200 x 200 pixels.

<script>
var a2a_config = a2a_config || {};
a2a_config.overlays = a2a_config.overlays || [];
a2a_config.overlays.push({});
</script>

<script async src="https://static.addtoany.com/menu/page.js"></script>

In Drupal, add the following JavaScript code to your "Additional JavaScript" box in Configuration > Web services > AddToAny > Additional Options.

In WordPress, add the following JavaScript code to your "Additional JavaScript" box in Settings > AddToAny.

a2a_config.overlays.push({});

Custom Image Sharing

You can customize services, styles, and positions by adding an object with optional properties to the a2a_config.overlays array as in the following example.

<script>
var a2a_config = a2a_config || {};
a2a_config.overlays = a2a_config.overlays || [];
a2a_config.overlays.push({
    services: ['pinterest', 'facebook', 'houzz', 'tumblr'],
    size: '50',
    style: 'horizontal',
    position: 'top center'
});
</script>

<script async src="https://static.addtoany.com/menu/page.js"></script>

<img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" height="291" width="440" alt="Dracaena cinnabari">

a2a_config.overlays.push({
    services: ['pinterest', 'facebook', 'houzz', 'tumblr'],
    size: '50',
    style: 'horizontal',
    position: 'top center'
});

The object accepts six optional properties: services, size, style, position, target, and html.

Services

Choose which services appear on images by specifying service code names in the services property.

a2a_config.overlays.push({
    services: ['pinterest', 'facebook', 'houzz', 'tumblr']
});

Size

Choose the size of the buttons.

a2a_config.overlays.push({
    size: 50
});

Style

Set the buttons to be vertical (the default) or horizontal.

a2a_config.overlays.push({
    style: 'horizontal'
});

Position

Set the position of buttons by specifying the vertical and horizontal positions delimited by a space. For example, you can choose top left (the default), center right, bottom center, or center center.

a2a_config.overlays.push({
    position: 'top center'
});

Custom HTML

For further customization, you can specify the exact HTML you want to use for your share buttons overlay. The html property overrides all properties outlined above except position. HTML must begin with div.a2a_kit.a2a_overlay_style as in the following example.

a2a_config.overlays.push({
    html: '<div class="a2a_kit a2a_kit_size_50 a2a_overlay_style a2a_vertical_style" data-a2a-icon-color="seashell,midnightblue"><a class="a2a_button_pinterest"></a><a class="a2a_button_facebook"></a></div>'
});

Specific Images

Target specific images by providing one or more CSS selectors. The following example matches <img> elements that have the share-image class name.

a2a_config.overlays.push({
    target: 'img.share-image'
});

Excluding Images

You can exclude images by setting an image's data-a2a-overlay attribute to false.

<img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" data-a2a-overlay="false" height="291" width="440" alt="Dracaena cinnabari">

Image Title

The alt attribute of an image is used for the shared title when specified, otherwise the current page's title is used.

<img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" alt="Dracaena cinnabari" height="291" width="440">

Image Description URL

The longdesc attribute of an image is used for the shared URL when specified, otherwise the current page's URL is used.

<img src="https://static.addtoany.com/images/dracaena-cinnabari.jpg" alt="Dracaena cinnabari" longdesc="https://www.example.com/dracaena-cinnabari.html#image-caption" height="291" width="440">