AddThis Blog

Customize Your Share Layer in Time for Halloween

One of the great things about Smart Layers is that there are lots of options that’ll let your site’s personality shine through. These examples of additional configurations will allow you to change things like the position of the buttons, which services show up, and even the hover color. Here are some of the styling options for the Share Layer that I frequently see publishers asking about, accompanied with ghouly examples. :)

Show Me The Services!

By default, the services that are displayed within the Share Layer 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.

Here’s an example of how you could modify your Smart Layers code:

addthis.layers({
   'share' : {
   'services' : 'facebook,twitter,tumblr,pinterest_share,more'
  }
});

Which will show up like this:

But, I Want Them Over There!

Smart Layers also allows you to specify whether you want the share buttons to appear at a fixed position on either the left or right side of your website. To change the position, you would modify your Smart Layers code to look like this:

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

Although this change made the buttons appear on the left, suppose your Halloween-themed site with a banner that spans across the top. It would be better if you could also move the position down just a bit. That’s why the ‘offset’ option was added. With ‘offset’ you can specify the relative position from the top or bottom of the browser window. Here’s an example of how to add it to your code:

addthis.layers({
   'share' : {
   'position' : 'left',
   'offset' : {'top':'300px'}
  }
});

Turning Into a Pumpkin

Once you have the share buttons in the right spot, you might think to yourself that the hover color would look cooler if it were pumpkin-orange to match your jack o’lanterns rather than the default blue.

To change the color, all you need to do is apply some CSS. Here’s the class selector that’s needed to make that change:

.at-vertical-menu a:hover{
	background-color: #FF9100;
}

The Smart Layers API provides many other configuration options for the share buttons. For example, you can choose whether you want the Layer to appear only on desktops or mobile devices. You can also change the theme, or change the text displayed after sharing a page. If you have any suggestions for additional options that should be included in a future release, we’d be interested in hearing about them!