Image Share Buttons

Sharing Customization

Image Share Buttons

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. You can choose to share image links instead of page links, which is useful when a site doesn't have a dedicated page per image.

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, and not within <header> or <footer> elements.

<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({});

Note: Since May 1st 2019, Facebook no longer accepts arbitrary preview images for pages shared from the web. Only a single static preview image specified in the page's meta tags will be used by Facebook.

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 some optional properties: services, size, style, position, target, useImage, 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',
});

For social media and search engine optimization, AddToAny image sharing by default shares the URL of a page containing an image. You can opt to share the URL of an image instead of the page, which has some tradeoffs. A preview of the image will show on Facebook, for example, but Facebook will be linking to the image directly instead of one of your pages. Twitter won't show a preview image, but will link to the image directly.

Instead of this option, AddToAny recommends having a page (with meta tags) per image you want shared, but some sites are not setup that way so we provide the useImage option as a workaround.

a2a_config.overlays.push({
    useImage: true,
});

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">

AddToAny

Sharing Customization