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 |
|---|---|---|
| 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. |
| native | Unset | Whether the native sharing mechanism of the device should be invoked instead of the AddToAny menu. A value of false disables native sharing and always shows the AddToAny menu. A value of true enables native sharing where available. By default, AddToAny enables the native sheet on operating systems with a thriving native app ecosystem such as Android and Apple touchscreen devices. |
| 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 | Unset | If "mail", the email menu is displayed. Accepts "mail" only. |
| show_menu | Unset | 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 Facebook, but not saving to Pocket). See how to enable tracking of shared links. |
| track_links_key | Unset | 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')). |
| 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.
Instead of modifying this value, we recommend setting the title in a data-a2a-title attribute on an AddToAny Kit element. See how to share a specific page for details.
|
| 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.
Instead of modifying this value, we recommend setting the URL in a data-a2a-url attribute on an AddToAny Kit element. See how to share a specific page for details.
|
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, andwidth. - Avoid dimensional overrides (
height&width) for most other elements. - Apply
box-shadowinstead of changing theborder-sizeof elements. - Use the
!importantdeclaration as needed.
We try to keep class and id names consistent with every release.