Drupal Sharing Customization
Share Event Handling & Modifying
The following code examples demonstrate how to handle, log, and modify AddToAny events that fire on AddToAny actions.
Handling the share
Dispatched events include ready
and share
.
The share
event passes a data object with four properties: node
(clicked element), service
(service name such as Copy Link
), serviceCode
(service code name such as copy_link
), title
(page or image title), and url
(page URL).
Two more properties are included during image sharing: media
(image URL), mediaNode
(image element when applicable).
<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_dd" href="https://www.addtoany.com/share"></a> </div> <span id="events_demo"></span> <script> // A custom "onReady" handler for AddToAny function my_addtoany_onready() { events_demo.innerHTML = 'AddToAny is ready!'; } // A custom "onShare" handler for AddToAny function my_addtoany_onshare(data) { events_demo.innerHTML = 'Shared "<a href="' + data.url + '">' + data.title + '</a>" to ' + data.service + '!'; } // Setup AddToAny "onReady" and "onShare" callback functions var a2a_config = a2a_config || {}; a2a_config.callbacks = a2a_config.callbacks || []; a2a_config.callbacks.push({ ready: my_addtoany_onready, share: my_addtoany_onshare, }); </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.callbacks.push({ share: function(data) { // Do what you need with the data object here console.log(data); } });
Tip: Event logging can be used to track AddToAny with analytics software like Segment, Adobe Analytics (Omniture), Piwik, Webtrends, and more.
Note: Google Analytics integration is automatically enabled for sites that use Google Analytics directly. A setup process is only necessary if you use Google Analytics through Google Tag Manager.
Modifying the share
To modify (or cancel) a share event, return an object from a custom "onShare" handler. Several properties are recognized on the returned object.
A url
property sets a new value for the shared URL.
A title
property sets a new value for the shared title.
A stop
property that is true
cancels the share event, which can be useful for handling a failed requirement.
The following example immediately adds a fragment identifier (#3.1459) to the shared URL.
<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_dd" href="https://www.addtoany.com/share"></a> </div> <script> // A custom "onShare" handler for AddToAny function my_addtoany_onshare(share_data) { // Some fragment identifier var hash_pi = '#3.1459'; // The shared URL var old_url = share_data.url; // Initialize new shared URL var new_url = old_url; // Add fragment identifier if not already added to the shared URL if ( old_url.indexOf(hash_pi, old_url.length - hash_pi.length) === -1 ) { new_url = old_url + hash_pi; } // Modify the share by returning an object // with a "url" property containing the new URL if (new_url != old_url) { return { url: new_url, }; } } // Setup AddToAny "onShare" callback function var a2a_config = a2a_config || {}; a2a_config.callbacks = a2a_config.callbacks || []; a2a_config.callbacks.push({ share: my_addtoany_onshare, }); </script> <script async src="https://static.addtoany.com/menu/page.js"></script>
a2a_config.callbacks.push({ share: function(share_data) { // Some fragment identifier var hash_pi = '#3.1459'; // The shared URL var old_url = share_data.url; // Initialize new shared URL var new_url = old_url; // Add fragment identifier if not already added to the shared URL if ( old_url.indexOf(hash_pi, old_url.length - hash_pi.length) === -1 ) { new_url = old_url + hash_pi; } // Modify the share by returning an object // with a "url" property containing the new URL if (new_url != old_url) { return { url: new_url, }; } }, });
Tip: You can modify templates & service parameters during the share event.