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