Back to Community
Home / Community / Plugin → Addtoany share buttons

How to Customize AddToAny Image Share Button Size and Behavior

23 threads Sep 16, 2025 Plugin → Addtoany share buttons

Content

Many WordPress users love the AddToAny Share Buttons plugin for its ability to add social sharing buttons directly onto images. However, a common point of confusion is how to control which images get these buttons. By default, the plugin adds share overlays to all images that are at least 200 x 200 pixels. For sites with many smaller images, like technical diagrams or employee headshots, this default can lead to buttons appearing where they aren't wanted.

Why This Happens

The 200x200 pixel minimum is a default setting designed to target generally share-worthy images. The plugin's core functionality applies this rule site-wide, which means it doesn't inherently distinguish between a featured image in a blog post and a small logo in a site's header or footer. This broad application is what often leads to share buttons appearing in undesirable locations.

Common Solutions for Customizing Image Sharing

1. Exclude Images by HTML Attribute (Quick Fix)

The simplest way to prevent buttons from appearing on a specific image is to add the data-a2a-overlay="false" attribute directly to the image's HTML <img> tag. This is a manual but effective method for one-off exclusions.

2. Use Custom JavaScript to Target Specific Images

For more control, you can use the plugin's "Additional JavaScript" setting to define exactly which images should have share buttons. This is the most powerful and common method for customization.

Example 1: Target by CSS Class
This code adds share buttons only to images with a specific class, such as share-image.

a2a_config.overlays.push({
    target: 'img.share-image',
    services: [ 'pinterest', 'facebook', 'twitter' ]
});

Example 2: Target by WordPress Image ID
You can target images using their unique WordPress ID class.

a2a_config.overlays.push({
    target: 'img.wp-image-123',
    services: [ 'pinterest', 'facebook', 'twitter' ]
});

Example 3: Target Multiple Images or Classes
To target multiple images, use a comma-separated list of selectors.

a2a_config.overlays.push({
    target: 'img.wp-image-123, img.wp-image-456, img.gallery-item',
    services: [ 'pinterest', 'facebook', 'twitter' ]
});

3. Change the Minimum Image Size (Advanced)

While the sample threads show users asking for a way to change the default 200x200 pixel minimum, this is not a setting that can be easily adjusted through standard configuration. The AddToAny team has indicated this is a core behavior. The most practical workaround is to use the JavaScript targeting method above to only apply buttons to images that meet your larger size criteria, perhaps by giving them a specific CSS class.

4. Exclude Site Sections (Future Update)

Based on user feedback, the AddToAny team has indicated that a future update may automatically exclude images within <header> and <footer> tags by default. Until then, you can manually add exclusion attributes to images in those areas or use a more specific CSS selector in your JavaScript (e.g., header img, footer img { data-a2a-overlay="false"; } via custom CSS).

Troubleshooting Tips

  • Code Warnings: If you get "Unexpected Token" warnings when adding code to the "Additional JavaScript" box, ensure your code is valid. A simple test is to start with the most basic code: a2a_config.overlays.push({}); and see if the warnings disappear.
  • Clear Caches: After adding any JavaScript or CSS customizations, remember to clear your WordPress cache (if you use a caching plugin) and your browser cache to see the changes.
  • Check for Conflicts: If your custom code isn't working, try temporarily disabling other plugins to rule out a JavaScript conflict.

By using these targeting techniques, you can finely control the appearance of AddToAny share buttons, ensuring they only appear on the images you want your visitors to share.

Related Support Threads Support