How to create custom ShareThis share buttons
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:
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:
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:
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