• Example Configurations
• General Configuration Options
• Share Layer Configuration Options
• Smart Layers & Preferred Services
• Follow Layer Configuration Options
• What's Next Configuration Options
• Recommended Layer Configuration Options
• Mobile Configuration Options
• Adding and Removing Layers Dynamically
• Complete Example Configuration
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'} ] } });
Name | Description | Type | Default value |
---|---|---|---|
theme | The default theme for all layers. Possible values are:
|
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:
|
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:
|
boolean | true |
desktop | Specify if you want the desktop version of this layer:
|
boolean | true |
theme | Override the theme for this layer only. Possible values are:
|
string | none |
offset | Specify the vertical offset for the layer, using standard CSS units Possible values are, for example:
|
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:
|
boolean | true |
desktop | Specify if you want the desktop version of this layer:
|
boolean | true |
theme | Override the theme for this layer only. Possible values are:
|
string | none |
offset | Specify the vertical offset for the layer, using standard CSS units Possible values are, for example:
|
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:
|
string | none |
offset | Specify the horizontal offset for the layer, using standard CSS units Possible values are, for example:
|
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:
|
boolean | true |
theme | Override the theme for this layer only. Possible values are:
|
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:
|
string | bottom |
buttonBarTheme | Override the theme for the button bar only. Possible values are:
|
string | none |
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 } });
Last modified: November 16th, 2016