AddToAny JavaScript API

Configure and render AddToAny with JavaScript, and style AddToAny with CSS.

JavaScript Configuration Object

AddToAny JavaScript configuration consists of properties contained under the a2a_config object. See the example code for usage details.

Property name Default value Description
linkname document.title Title of the item to be shared. Will use the current page title to accomodate progressive web apps and Ajax-based sites, unless a value is explicitly set.
linkurl location.href URL of the item to be shared. Will use the current URL (including the current hash) to accomodate progressive web apps and Ajax-based sites, unless a value is explicitly set.
icon_color Original colors Accepts a string containing the CSS color value(s) to apply to all icons globally. See custom color buttons for details.
onclick 1 If the value is 1 or a truthy value, the "mini" menu will appear when the user clicks the button instead of when the user hovers over the button. If the value is 2, the "full" universal menu will display on click.
overlays [] Accepts an array of one or more AddToAny overlay configurations. By default, pushing an empty object to the array enables the image share buttons overlay for sharing images.
counts {} Accepts a configuration object for share counts, especially for recovering share counts.
templates {} Customize endpoint parameters for any service, and change the default message for many services. See AddToAny Templates for details.
callbacks [] Accepts an array of one or more callback objects to be invoked during specifc AddToAny events. Each object should contain ready and/or share properties whose values are a function or function reference. A function for the share event should have a single parameter whose argument will be an object with properties such as node, service, title and url. See how to handle events for details.
delay 0 Hover/mouseover delay (in milliseconds) until the "mini" drop-down menu is displayed. A value between 50 and 500 is recommended if set.
exclude_services false Accepts an array to remove specific services from the universal menus. See how to remove services from AddToAny.
num_services 10 Number of services to be displayed by default within the "mini" drop-down menu.
prioritize User's preferred services Specify the services you want to prioritize, ordered from highest priority to lowest priority.
This is an array, so you can add as many services as you desire.
See how to force services to appear first in the menu(s). Note that the smart menu's personalization will give a user's preferred services highest priority.
custom_services [] Add custom service(s) to the menu(s). This is an array, so you can add as many services as you desire. The icon URL is optional. See how to add custom services.
orientation Automatic Specify the vertical orientation of the "mini" menu. Accepts down or up.
menu_type N/A If "mail", the email menu is displayed. Accepts "mail" only.
show_menu N/A Allows you to display the "mini" menu using static, absolute, fixed, or relative positioning, without needing a button. See the static share menu example for details.
track_links false Shorten the URL or attach parameters to your shared link to get analytics on clickthrus.
This will only modify shared links for services where shared link tracking is appropriate (e.g. sharing to Twitter, but not saving to Pocket). See how to enable tracking of shared links.
track_links_key N/A Used with the track_links property only, this accepts your URL shortener API key or a custom URL to use for shared links. See how to enable tracking of shared links.
localize Auto-localization Customize the language of the universal menu. See how to translate AddToAny yourself or how to submit default translations for AddToAny.
locale en-US Force the language of the universal menu and turn off auto-localization. Accepts a language code such as "fr" or "fr-CA" (ISO 639-1), or "custom" if you're providing your own AddToAny translation.
target Last uninitialized element with a class-name of a2a_kit or a2a_dd Target specific DOM node(s) to initialize AddToAny on. Accepts a string containing a CSS selector for an ID (like "#share-button") or class-name (like ".share-buttons"), or an actual DOM node reference (like document.getElementById('share-button')).
no_3p false Disable 3rd party cookies. Setting to true may affect stats and limit some functionality.

See AddToAny examples & documentation for example code and live demonstrations.


JavaScript Initialize & Render Functions

By default, AddToAny's page.js script initializes & renders all AddToAny HTML instances when the document is ready.

AddToAny JavaScript functions can be used to initialize & render new AddToAny HTML instances inserted after the document is ready.

The a2a.init_all() function is often used after content insertion via Ajax.

Function Description
a2a.init_all() Initializes & renders all uninitialized AddToAny instances on the page.
a2a.init('page') Initializes & renders only the last uninitialized AddToAny share buttons instance on the page.
a2a.init('feed') Initializes & renders only the last uninitialized AddToAny follow buttons instance on the page.

These functions can only be used when the page.js script is loaded, so they are best used within an AddToAny ready callback, or conditionally when page.js is probably already loaded:

if (a2a) a2a.init_all()


CSS Menu Overrides

AddToAny always keeps developers & designers in mind. We have a few tips for customizing the universal menus while maintaining box model sizing calculations:

  • You can override padding, fonts, and menu icon sizes.
  • For menu icons, override background-size, font-size, height, line-height, and width.
  • Avoid dimensional overrides (height & width) for most other elements.
  • Apply box-shadow instead of changing the border-size of elements.
  • Use the !important declaration as needed.

We try to keep class and id names consistent with every release.