Smart Layers API

Overview

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
 

Share  Layer Configuration Options
 

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
 

What's Next Layer Configuration Options
 

Recommended Layer Configuration Options
 

Mobile Specific Configuration Options
 

​Adding and Removing Layers Dynamically
​

// 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
    }
});

Was this article helpful to you?