AddThis Academy

An ever-growing library of resources to help you become a better online marketer.

AddThis Core Share & Follow API

AddThis Core Share & Follow API

The AddThis Core API gives publishers a modern API to build their own social media buttons while AddThis handles integrating with the services. Specifically intended for publishers with in-house development abilities, the AddThis Core API brings all of the functionality and stability of the AddThis toolset with the flexibility to match your specific needs and constraints.

You do not need to have a registered account with AddThis to use the Core API, but you will need to have AddThis installed on your site. The AddThis Core API also works with existing AddThis tools.

See below for more developer documentation on working with the AddThis Core API.

Principles

Predictability

Every function returns another addthis object by default, so you can chain commands together like this:

      addthis.share('.share_buttons')
      	.follow('.follow_buttons')

Convention Over Configuration

Function names and CSS classes make sense. If you give an element the class addthis_button_facebook it should act like a Facebook button unless the you does something to make it not act that way. They’re’ be documented, stable, and able to be overridden.

Share Buttons

How to Create Share Buttons

For most use cases, people put the share buttons inside an enclosing element. For this, we have the addthis.share function. It accepts a JSON configuration object. The elements on the page can have attributes to configure them.

      addthis.share({
      	container_selector: '.addthis_share', 
      	button_selector: '.addthis_share_button',
      	click: function,
      	close: function
      });

addthis.share JSON Object Options

Option Type Description Default
container_selector string selector for the element enclose the buttons ‘.addthis_share’
button_selector string selector for the elements within enclosing element that you want to be buttons ‘.addthis_share_button’
click function The function that is called when buttons are clicked. Passes a JSON object with the properties url, title, and service_code none
close function The function that is called when user closes the sharing window. Passes a JSON object with the properties url, title, and service_code none

Attribute Based Configuration Options

Option Button/Enclosure Description Options
data-service (required) button The service AddThis service codes
data-title both The title of the link to share n/a
data-url both The URL of the link to share n/a
data-media both The image to share to other services (may work in all services) n/a
data-description both The description to share (may not work in services) n/a

Basic Example

Complex Example

Things to try:

  • Put text inside the buttons
  • Put an image inside the buttons
  • Use CSS to make the buttons out of an image sprite

Creating a Button

In some cases users will put share buttons on the page outside of an element. To do this they’ll use the addthis.shareButton function. Like the addthis.share() function it accepts a JSON object with parameters.

addthis.shareButton JSON Object Options

Option Type Description Default
button_selector string The CSS selector for the elements within enclosing element that you want to be buttons ‘.addthis_share_button’
click function The function that is called when buttons are clicked. Passes a JSON object with the properties url, title, and service_code none
close function The function that is called when user closes the sharing window. Passes a JSON object with the properties <url, title, and service_code none

Attribute Based Configuration Options

Option Description Options
data-service (required) The service for the button to share to AddThis service codes
data-title The title of the link to share n/a
data-url The URL of the link to share n/a
data-media The image to share to other services (may work in all services) n/a
data-description The description to share (may not work in services) n/a

Basic Example

Some more things to try:

  • Add a callback function to show a thank you when the button is clicked
  • Change the class name to ‘my_facebook_share_button’ and use the button_selector configuration option to make the button clickable
  • Use data-url to have it share http://www.addthis.com/

addthis.follow JSON Object Options

Option Type Description Default
container_selector string The CSS selector for the element enclosthe buttons ‘.addthis_follow’
button_selector string The CSS selector for the elements within enclosing element that you want to be buttons ‘.addthis_follow_button’
click function The function that is called when buttons are clicked. Passes a JSON object with the properties username, user_typeand service_code none
close function The function that is called when user closes the sharing window. Passes a JSON object with the properties username, user_type and service_code none

Attribute Based Configuration Options

Option Enclosure Description Options
data-service (required) button The service, e.g. Facebook AddThis follow service codes
data-username (required) button The username or identifier n/a
data-usertype button For some services, the type of user is neefor certain links YouTube:

  • user (default)
  • channel
  • c

LinkedIn

  • in (default)
  • company
  • groups
  • edu

Basic Example

Even more things to try:

  • Change the text out for images
  • Use <h4> tags instead of <span>s.
  • Put the thank you message in a <span> tag instead of an alert

Follow Buttons

How to Create Follow Buttons

This works like the addthis.shareButton() function, but creates a follow button.

addthis.follow JSON Object Options

Option Type Description Default
button_selector string The CSS selector for the element to make ia follow button ‘.addthis_follow_button’
click function The function that is called when buttons are clicked. Attributes passed are username and service_code none
close function The function that is called when user closes the sharing window. Attributes passed are username and service_code none

Attribute Based Configuration Options

Option Enclosure Description Options
data-service (required) button The service, e.g. Facebook AddThis follow service codes
data-username (required) button The username or identifier n/a
data-usertype button For some services, the type of user is neefor certain links YouTube:

  • user (default)
  • channel
  • c

LinkedIn

  • in (default)
  • company
  • groups
  • edu

Basic Example

Have questions or comments about the AddThis Core Share & Follow API? Reach out to us directly at help@addthis.com or on Twitter.

AddThis Core Share & Follow API
5 (100%) 2 votes

Was this article helpful to you?