Sharing Customization

Event Tracking & Handling

Use the following code as a template to track or extend AddToAny events that fire on various AddToAny actions. Dispatched events currently include ready and share.

The share event passes a data object with four properties: node (clicked element), service (service name), title (page title), and url (page URL).

<a class="a2a_dd" href="https://www.addtoany.com/share">
    <img src="//static.addtoany.com/buttons/share_save_171_16.png" border="0" alt="Share"/>
</a>

<span id="events_demo"></span>

<script type="text/javascript">
// 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 &quot;<a href="'
        + data.url
        + '">'
        + data.title
        + '</a>&quot; 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="//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 something with the data object here
        console.log(data);
    }
});

Tip: Event tracking can be used for integrating AddToAny with analytics software like Adobe Analytics (Omniture), Piwik, Webtrends, and more.

Note: Google Analytics integration is automatically enabled for sites that use Google Analytics, so manual integration is usually unnecessary.

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

The following example immediately adds a fragment identifier (#3.1459) to the shared URL.

<a class="a2a_dd" href="https://www.addtoany.com/share">Share</a>

<script type="text/javascript">
// 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="//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
            };
        }
    }
});

If an AJAX request is needed to modify the URL, it must be a synchronous request (which temporarily blocks JavaScript execution) as in the following example.

Note: A synchronous request is required to avoid browser popup blocking. Changing the shared URL asynchronously would necessitate a late synthetic click on the service button link. A synthetic click causes a link targeting a new tab/window to open in a popup window, and such popups are blocked by certain major browsers.

<a class="a2a_dd" href="https://www.addtoany.com/share">Share</a>

<script type="text/javascript">
// A custom "onShare" handler for AddToAny
function my_addtoany_onshare(share_data) {

    var new_url;
    var new_title;
    var cancel = false;

    // Synchronous (blocking) request to get a new URL
    // that replaces the current URL
    jQuery.ajax({
        async: false,
        data: {
            url:   share_data.url,
            title: share_data.title
        },
        url: 'https://api.example.com/get-new-share-url',
        success: function(ajax_data) {
            // Set new share URL
            new_url   = ajax_data.new_url;
            new_title = ajax_data.new_title;
        },
        error: function() {
            // Notify user, but do not use alert()
            // because a delay is too late for cancellation
            console.log('Sorry, we were not able to create a special URL to share.');
            // Share will be canceled
            cancel = true;
        }
    });

    // Cancel share if the request failed
    if (cancel == true) {
        return {
            stop: true
        };
    }

    // Modify the share by returning an object with
    // "url" and "title" properties containing the new URL and title
    return {
        url: new_url,
        title: new_title
    };

}

// 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="//static.addtoany.com/menu/page.js"></script>


Deprecated tracking_callback property

Since March 2015, the a2a_config.tracking_callback property has been deprecated in favor of a2a_config.callbacks. The callbacks property accepts an array of one or more objects, while the deprecated tracking_callback property accepted one object like the following example.

a2a_config.tracking_callback = {
    ready: my_addtoany_onready,
    share: my_addtoany_onshare
};

While both properties are handled, only the callbacks property is recommended.