How to create custom ShareThis share buttons

By March 2, 2017

Prefer to design your own buttons? Great! Our sharing code lets you design fully customized buttons from scratch. We’ll take care of the sharing and counting for you. Here are a few reasons you may want to design your own buttons from scratch:

  • You want the design to match your website’s exactly.
  • You want to have different button configurations on different pages.
  • Maybe you really need the Facebook button to be a pink oval.

This page details how to customize your ShareThis share buttons using option two: building your own buttons from scratch, which requires only two simple steps.

Step 1: Create your HTML, CSS and images, and add a specific ShareThis data attribute to each button that corresponds to the social channel.

For example, your custom button setup for Facebook and twitter button would look like this:

HTML:

<div data-network="twitter" class="st-custom-button">Twitter</div>
<div data-network="facebook" class="st-custom-button">Facebook</div> 


CSS:

.st-custom-button[data-network] {
   background-color: #0adeff;
   display: inline-block;
   padding: 5px 10px;
   cursor: pointer;
   font-weight: bold;
   color: #fff;
   
   &:hover, &:focus {
      text-decoration: underline;
      background-color: #00c7ff;
   }

The portion of the HTML above that tells our code to trigger a share is the attribute: data-network=”facebook”.

If you’re interested in tinkering with the setup, feel free to check out our setup here:

Supported social channels and their corresponding data-network attributes are as follows:

  • blogger
  • delicious
  • digg
  • email
  • facebook
  • flipboard
  • googleplus
  • linkedin
  • livejournal
  • mailru
  • meneame
  • odnoklassniki
  • pinterest
  • print
  • reddit
  • sharethis
  • sms
  • stumbleupon
  • tumblr
  • twitter
  • vk
  • weibo
  • whatsapp
  • xing

Including an optional <span class=”count”></span> tells our code where to insert the share count for that channel.

Other data attributes you can specify include:

data-url
Specifies URL (can be shortened URL) that you would like shared
data-short-url
Specifies a shortened URL that can be used in conjunction with the data-url
data-title
Specifies title that you would like shared
data-image
Specifies link to image you would like displayed in the shared content
data-description
Specifies summary text/description you wish to share
data-username
Specifies your Twitter username
data-message
Specifies the body copy of e-mail shares

Place your code, along with the optional attributes above, where you want your share buttons to appear.

Step 2: Once you have your custom HTML / CSS buttons designed and positioned where you’d like them to appear, all that’s left is to add the ShareThis core JS to the header of your site, and your buttons will be up and running. To get the ShareThis.js click the button below to register an account and download the JS.

Register and Get The Code