AddThis Academy

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

Smart Layers API

Overview

The Smart Layers API allows you to easily configure and customize the different layers. This includes enabling/disabling the various layers, customizing text labels, specifying the theme and choosing what services appear.

Example Configurations

Simple configuration with only the Share layer

addthis.layers({
    'share' : {}
});

Example Configuration with Share and Follow layers

addthis.layers({
    'share' : {},
    'follow' : {
        'services' : [
            {'service' : 'facebook', 'id' : 'AddThis'},
            {'service' : 'twitter', 'id' : 'AddThis'}
        ]
    }
});

General Configuration Options
 

Name Description Type Default value
theme The default theme for all layers.  Possible values are:

  • transparent (default)
  • light
  • dark
  • grey
string transparent
thankyou Specify if you want the "Thank You" message to appear after a share or follow event. boolean true
linkFilter Decide if the link should be displayed in the specified layer, the function signature looks like:

function(link, layer) { }

link – an object with two properties, title and url, that can be used to determine if you want to show the link or not (e.g. if (link.title === 'http://badurl.com') return falsel;)

layer – the layer where the link could be displayed (e.g. recommended, whatsnext, thankyou).

To not show a link, simply return a boolean false.  To show the link, return the link in its original form.
 

function show all links
responsive Decide if you would like mobile optimized tools to be used on desktop browsers within a certain viewport.

Note:  You can set this option to false if you do not want the responsive behavior

You can set responsive options by passing an object.  Here are the possible options you can set:

maxWidth – The maximum pixel viewport size that show the mobile optimized tools.

 

object {
  maxWidth: '979px'
}

Share  Layer Configuration Options
 

Name Description Type Default value
position The position of the vertical share bar.  Options are:

  • left
  • right
string left
numPreferredServices The number of preferred services to display.  This is only used if the services option is not used. integer 5
services Specify the services you want displayed in the vertical share bar.  For example:

"facebook,twitter,linkedin,more"

string (csv) of service codes none
postShareTitle The title displayed in the Thank You layer after a share string Thanks for sharing!
postShareFollowMsg The message displayed in the Thank You layer after a share with a Follow promotion string Follow
postShareRecommendedMsg The title displayed in the Thank You layer after a share with a promotion displaying Recommended links string Recommend for you
mobile Specify if you want the mobile version of this layer:

  • true – show mobile version
  • false – don't show mobile version
boolean true
desktop Specify if you want the desktop version of this layer:

  • true – show desktop version
  • false – don't show desktop version
boolean true
theme Override the theme for this layer only. Possible values are:

  • transparent
  • light
  • dark
  • grey
string none
offset Specify the vertical offset for the layer, using standard CSS units Possible values are, for example:

  • {'top':'50px'} – Positions the Share Layer 50px from the top
  • {'bottom': '50px'} – Positions the Share Layer 50px from the bottom
JSON object null

By default, the services that are displayed for the share buttons within Smart Layers are different for each individual user that visits your site. This is based on the user’s past sharing history and the services that are most popular. Rather than having the default "Preferred Services" you can modify your Smart Layers code to choose which services will always appear for your visitors.

Once you've added the Smart Layers code to your page, you would replace the default option 'numPreferredServices' with 'services'. From there, you would specify which services you'd like for your share buttons. For a full list of the services that can be specified, take a look at the "Basic Service Codes", which are available within our Service Directory.

Here's an example of the code before this change:

addthis.layers({
    'theme' : 'transparent',
    'share' : {
        'position' : 'left',
        'numPreferredServices' : 5
    },
    'follow' : {
        'services' : [
            {'service' : 'facebook', 'id' : 'AddThis'},
            {'service' : 'twitter', 'id' : 'AddThis'}
        ]
    },
    'whatsnext' : {},
    'recommended' : {}
});

And here's an updated version of the code after choosing the desired services:

addthis.layers({
    'theme' : 'transparent',
    'share' : {
        'position' : 'left',
        'services' : 'facebook,twitter,google_plusone_share,pinterest_share,print,more'
    },
    'follow' : {
        'services' : [
            {'service' : 'facebook', 'id' : 'AddThis'},
            {'service' : 'twitter', 'id' : 'AddThis'}
        ]
    },
    'whatsnext' : {},
    'recommended' : {}
});

Follow Layer Configuration Options
 

Name Description Type Default value
services The definition for the Follow buttons you want to display.  For each button, you must specify an object with a service and id property.  For example:

{'service' : 'facebook', 'id' : 'AddThis'}

For LinkedIn, you can also specify a usertype to have the button take you to a company page instead of an individual's page.  For example:

{'service' : 'linkedin', 'id' : 'AddThis', 'usertype' : 'company'}
 

array none
title The title that will appear in the Follow layer to the left of the Follow buttons string none
postFollowTitle The title displayed in the Thank You layer after a follow string Thanks for following!
postFollowRecommendedMsg The title displayed in the Thank You layer after a follow with a promotion displaying Recommended links string Recommended for you
mobile Specify if you want the mobile version of this layer:

  • true – show mobile version
  • false – don't show mobile version
boolean true
desktop Specify if you want the desktop version of this layer:

  • true – show desktop version
  • false – don't show desktop version
boolean true
theme Override the theme for this layer only. Possible values are:

  • transparent
  • light
  • dark
  • grey
string none
offset Specify the vertical offset for the layer, using standard CSS units Possible values are, for example:

  • {'top':'50px'} – Moves the Follow Layer down 50px
  • {'bottom': '50px'} – Moves the Follow Layer up 50px
JSON object null

What's Next Layer Configuration Options
 

Name Description Type Default value
title The title that appears when showing a Recommended link in the What's Next layer string Recommended for you
theme Override the theme for this layer only. Possible values are:

  • transparent
  • light
  • dark
  • grey
string none
offset Specify the horizontal offset for the layer, using standard CSS units Possible values are, for example:

  • {'left':'50px'} – Positions the What's Next Layer 50px from the left
  • {'right': '50px'} – Positions the What's Next Layer 50px from the right
JSON object null

Recommended Layer Configuration Options
 

Name Description Type Default value
title The title that appears at the top of the Recommended layer string Recommended for you
mobile Specify if you want the mobile version of this layer:

  • true – show mobile version
  • false – don't show mobile version
boolean true
theme Override the theme for this layer only. Possible values are:

  • transparent
  • light
  • dark
  • grey
string none

Mobile Specific Configuration Options
 

Name Description Type Default value
buttonBarPosition Specify the position of the mobile dock containing "Share" and "Follow" buttons.  Possible values are:

  • bottom (default)
  • top
string bottom
buttonBarTheme Override the theme for the button bar only. Possible values are:

  • transparent
  • light
  • dark
  • grey
string none

​Adding and Removing Layers Dynamically

If you need to dynamically add or remove layers on a page (for example, if you have a single page app and want to show certain layers at certain points) we provide an easy way to remove the layers from the page and then re-render them with an updated configuration object. Because Smart Layers is asynchronously loaded, you will need to provide a callback function which will provide you a reference to the smartlayer object. Once you have the smartlayer object, you can call the "destroy" method to remove all layers on the page. Then you can call addthis.layers() with a configuration object to re-render the layers you want. Here is an example that initially renders just the Share layer and then uses a jQuery click handler to remove the Share layer and then render the Recommended and What's Next layers:
// this will be called once all Smart Layers have been rendered
var callback = function(smartlayer) {
    
    $('#someButton').click(function() {
        // remove all layers currently on the page
        smartlayer.destroy();

        // now render Recommended and What's Next Layers
        addthis.layers({'recommended' : {}, 'whatsnext' : {}});
    });
};

// on page load, render the Share layer
addthis.layers({'share' : {}}, callback);

​Complete Example Configuration

addthis.layers({
    'theme' : 'transparent',
    'domain' : 'www.mysite.com',
    'linkFilter' : function(link, layer) {
        console.log(link.title + ' - ' + link.url + " - " + layer);
        return link;
    },
    'responsive' : {
      'maxWidth' : '979px',
      'minWidth' : '0px'
    },
    'share' : {
        'position' : 'left',
        'services' : 'facebook,twitter,email,print,more',
        //'numPreferredServices' : 5,
        'postShareTitle' : 'Thanks for sharing!',
        'postShareFollowMsg' : 'Follow us',
        'postShareRecommendedMsg' : 'Recommended for you',
        'desktop' : true,
        'mobile' : true,
        'theme' : 'transparent'
    },
    'follow' : {
        'services' : [
            {'service' : 'facebook', 'id' : 'AddThis'},
            {'service' : 'twitter', 'id' : 'AddThis'}
        ],
        'title' : 'Follow',
        'postFollowTitle' : 'Thanks for following!',
        'postFollowRecommendedMsg' : 'Recommended for you',
        'mobile' : true,
        'desktop' : true,
        'theme' : 'transparent'
    },
    'whatsnext' : {
        'recommendedTitle' : 'Recommended for you',
        'shareMsg' : 'Share to [x]',
        'followMsg' : 'Follow us on [x]',
        'theme' : 'transparent',
        'desktop' : true
    },
    'recommended' : {
        'title' : 'Recommended for you',
        'mobile' : true,
        'desktop' : true,
        'theme' : 'transparent'
    },
    'mobile' : {
        'buttonBarPosition' : 'top',
        'buttonBarTheme' : 'transparent',
        'mobile' : true
    }
});
Smart Layers API
2 (40%) 1 vote

Was this article helpful to you?