Drupal Sharing Customization

Default Share Buttons

Use the following code as a template for displaying individual share buttons.

SVG sharing icons

AddToAny uses scalable vector icons that can be scaled to any size.

Add the following HTML code, for example, to the "Service Buttons HTML code" box in Drupal Configuration > Web services > AddToAny > Buttons > Service Buttons.

Service class names take the form of a2a_button_service-code. Be sure to look up the standard service code to use for each service.

<a class="a2a_button_facebook"></a>
<a class="a2a_button_mastodon"></a>
<a class="a2a_button_pinterest"></a>

In WordPress, click the "Add/Remove Services" button to choose sharing buttons.

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

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

Infinitely scalable sharing icons

Large retina-ready icons are scalable to any size while remaining perfectly crisp on high pixel density displays.

<div class="a2a_kit a2a_kit_size_64 a2a_default_style">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

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

Traditional service icons

AddToAny offers traditional sharing icons in the smaller 16 x 16 pixels format.

In Drupal, select "Small" icon size in Configuration > System > AddToAny > Buttons.

Add the following HTML code, for example, to the "Service Buttons HTML code" box in Drupal Configuration > Web services > AddToAny > Buttons > Service Buttons.

<a class="a2a_button_facebook"></a>
<a class="a2a_button_mastodon"></a>
<a class="a2a_button_pinterest"></a>

In WordPress, select "Small" icon size in Settings > AddToAny. Click the "Add/Remove Services" button to choose sharing buttons.

<div class="a2a_kit a2a_default_style">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

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

Custom service icons

<div class="a2a_kit a2a_default_style">
    <a class="a2a_button_facebook">
        <img src="https://static.addtoany.com/buttons/custom/facebook-icon-long-shadow.png" border="0" alt="Facebook" width="27" height="27">
    </a>
    <a class="a2a_dd" href="https://www.addtoany.com/share">
        <img src="https://static.addtoany.com/buttons/custom/addtoany-icon-long-shadow.png" border="0" alt="Share" width="27" height="27">
    </a>
</div>

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

Add the following HTML code, for example, to the "Service Buttons HTML code" box in Drupal Configuration > Web services > AddToAny > Buttons > Service Buttons.

<a class="a2a_button_facebook">
    <img src="https://static.addtoany.com/buttons/custom/facebook-icon-long-shadow.png" border="0" alt="Facebook" width="27" height="27">
</a>
<a class="a2a_dd" href="https://www.addtoany.com/share">
    <img src="https://static.addtoany.com/buttons/custom/addtoany-icon-long-shadow.png" border="0" alt="Share" width="27" height="27">
</a>

In WordPress, checkmark "Use custom icons" in Settings > AddToAny > Advanced Options, and specify the URL of the directory containing your custom icons, filename extension, and width & height.


Details

<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_mastodon"></a>
    <a class="a2a_button_pinterest"></a>
    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

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

Standalone services require a parent element with the class name of a2a_kit. For AddToAny's default 'sharing strip' styling, the parent element should also have a class name of a2a_default_style.

By default, small icons (16 x 16 pixels) are displayed. For larger icons (32 x 32 pixels, or greater), the a2a_kit should have an additional class name of a2a_kit_size_32. You can replace 32 with any greater number for an equivalent pixel size. 32 x 32 pixels will fall back gracefully for older web browsers such as Internet Explorer 6–8. Icons larger than 32 x 32 pixels will fall back to either scaling or tiling the raster (32 x 32 pixel PNG) version of the service icon.


3rd party sharing buttons

AddToAny supports 3rd party buttons such as the Facebook Like button and the Pinterest Save button.

<div class="a2a_kit a2a_default_style">
    <a class="a2a_button_facebook_like"></a>
    <a class="a2a_button_pinterest_pin"></a>
</div>

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

Add the following HTML code, for example, to the "Service Buttons HTML code" box in Drupal Configuration > Web services > AddToAny > Buttons > Service Buttons.

<a class="a2a_button_facebook_like"></a>
<a class="a2a_button_pinterest_pin"></a>

In WordPress, 3rd party sharing buttons are available in Settings > AddToAny > Share Buttons.