AddToAny Share Buttons
Provides social media share and follow buttons through integration with the AddToAny platform, supporting over 100 services including Facebook, Mastodon, Pinterest, WhatsApp, and more.
addtoany
Install
composer require 'drupal/addtoany:^2.0'
composer require 'drupal/addtoany:8.x-1.22'
Overview
AddToAny Share Buttons integrates the AddToAny universal sharing platform with Drupal, enabling visitors to share content via a comprehensive suite of social media services. The module provides scalable vector (SVG) icons that render beautifully on all displays including Retina screens.
The module seamlessly integrates with Drupal's entity display system, allowing share buttons to be placed on any content entity (nodes, media, comments, etc.) through the Manage Display interface. It also provides dedicated blocks for both sharing and following functionality, as well as Views field integration for displaying share buttons in Views-based listings.
AddToAny features include: universal share menus, native share menus, share counters, custom color buttons, custom icons, Google Analytics integration, event tracking for analytics software, link tracking using Bitly or custom URL shorteners, UTM parameters, and automatic localization in over 50 languages. The module loads asynchronously for optimal performance and requires no registration or account management.
Features
- Universal share button supporting 100+ social media services including Facebook, Mastodon, Pinterest, WhatsApp, Reddit, LinkedIn, email, and SMS
- Scalable Vector Graphics (SVG) icons that are mathematically precise, scalable to any size, and optimized for High-PPI/Retina displays
- Entity display integration allowing share buttons on nodes, media, comments, and any content entity through Manage Display settings
- Two block types: Share Buttons block (for sharing current page/content) and Follow Buttons block (for linking to social profiles)
- Views field integration for displaying share buttons in Views-based content listings
- Customizable service buttons with HTML code allowing selection and ordering of specific social services
- Configurable icon sizes from 8 to 999 pixels
- Universal button customization options: default SVG icon, custom image URL, or none
- Custom JavaScript and CSS support for advanced AddToAny configurations
- Token integration for dynamic content in additional HTML/JavaScript
- Asynchronous loading for optimal page performance
- Automatic localization in 50+ languages
- Google Analytics integration with event tracking capabilities
- Display Suite compatibility for advanced layout management
Use Cases
Basic Content Sharing
Enable share buttons on blog posts and articles by checking 'Node' in the Entities settings, then visiting Structure > Content types > Article > Manage display. Drag the 'AddToAny' component to the desired position in the layout. The default configuration includes Facebook, Mastodon, and Email buttons.
Custom Service Selection
Customize which social services appear by editing the Service Buttons HTML code. Add buttons in order of preference using the AddToAny class naming convention: <a class="a2a_button_facebook"></a>, <a class="a2a_button_twitter"></a>, <a class="a2a_button_linkedin"></a>, etc. Visit https://www.addtoany.com/buttons/customize/drupal/standalone_services for the full list of available services.
Social Media Follow Bar
Create a follow buttons block to link to your organization's social profiles. Place an 'AddToAny follow buttons' block in a sidebar or footer region. Configure it with HTML like: <a class="a2a_button_facebook" href="https://facebook.com/YourPage"></a><a class="a2a_button_twitter" href="https://twitter.com/YourHandle"></a>
Views Integration for Content Lists
Add share buttons to Views-based content listings (blog indexes, news archives, etc.). Edit your View, add a field, and select 'AddToAny share buttons' from the Content category. Each item in the listing will have its own share buttons with the correct URL and title.
Google Analytics Tracking
Track social sharing events in Google Analytics by adding JavaScript to the Additional JavaScript field: a2a_config.callbacks.push({share: function(data) { ga('send', 'social', data.service, 'share', data.url); }});
Custom Button Styling
Style share buttons to match your site design using the Additional CSS field. Target the .addtoany_list class for the container and .a2a_kit_size_XX for size-specific styles. Hover states can be customized by targeting .addtoany_list a:hover span.
UTM Parameter Tracking
Add campaign tracking parameters to shared links using AddToAny's URL template feature in the Additional JavaScript field: a2a_config.templates = { twitter: '${title} ${link}?utm_source=twitter&utm_medium=social' };
Tips
- Use template suggestions (addtoany-standard--node--article.html.twig) to customize button appearance for specific content types
- Clear Drupal's cache after changing entity type settings for changes to take effect
- The universal button can be hidden entirely by selecting 'None' if you only want specific service buttons
- Token replacement in Additional JavaScript allows dynamic content per node - useful for including node-specific metadata
- For maximum performance, the AddToAny external script loads with defer attribute to not block page rendering
- Block-level settings override global settings, allowing different configurations for different site regions
Technical Details
Admin Pages 1
/admin/config/services/addtoany
Configure AddToAny share buttons appearance, service buttons, universal button settings, and entity type availability.
Permissions 1
Hooks 1
hook_addtoany_entity_types_alter
Allows modules to alter the entity types available for AddToAny share buttons. Use this hook to add custom entity types or remove default ones from the AddToAny configuration.
Security Notes 4
- The 'administer addtoany' permission has restricted access due to the ability to add custom JavaScript code
- Custom JavaScript in blocks requires the 'administer addtoany' permission to edit
- External JavaScript is loaded from AddToAny's CDN (static.addtoany.com) - ensure this domain is allowed if using Content Security Policy
- The module sanitizes URLs using UrlHelper::stripDangerousProtocols() to prevent XSS through malicious protocols