How to Create Custom Share Buttons

Would you prefer to design your own share buttons but want to leverage our platform to track social engagement? 

Publishers often design their share buttons from scratch when they want the icons to better align with their brand and color palette or tailor the button configurations for different pages. Then, they’ll leverage our free analytics platform to dive deeper into their top pages, social channels, and social referrals.

Some things you could do with our Custom Share Buttons include:

• Modify their shape and color using CSS any way you want to reflect your brand.
• Write any text you want on the buttons, useful for custom call to actions!
• Display multiple sets/instances of buttons on different sections of the same page.

In order for ShareThis tools to work on your website, follow the steps below to add your unique ShareThis code to the header section of your website: 

1. Log in to your ShareThis Platform account. If you don’t have a ShareThis account, sign up for free here.
2. In the Apps Directory, select Custom Share Buttons. 
3. Select the Activate code button in the top right corner. In the pop-up, click the Copy code button.
4. Login to your HTML website.
5. Paste the unique ShareThis code that you copied from step 3 into the header field and click Save.
6. Create the HTML and CSS for your custom share buttons. The custom button setup for Facebook and Twitter should look similar to this:  

• HTML: 

<div class="st-custom-button" data-network="facebook">share</div> <div class="st-custom-button" data-network="twitter">tweet</div>

• CSS: 

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

For example, if you want to specifically change the look of the Facebook button, the CSS class in your CSS file should be .st-custom-button[data-network=”facebook”]

6. Add data attributes to the div specific to each social channel in order to specify what you want our core code to do when a user clicks or taps on your share buttons. 

Supported social channels include: 

Data attributes include: 

7. Navigate to a page on your website (e.g., blog, product, etc) and paste the placement code that you copied from the ShareThis platform, wherever you want the ShareThis tool to appear.

Note

• If you need to see a worked example of custom share buttons, you can check it out here: https://codesandbox.io/s/amazing-sun-0rrb2?file=/index.html

• ShareThis will look for the <div> code of the buttons along with its data attributes and ShareThis classes on your website’s code, so if you have a custom icon or image you want to set for the buttons, you will have to wrap it inside the <div> mentioned above, like this:

<div class="st-custom-button" data-network="facebook">
<i class="yourIconClass"> </i>
</div>

• One way to display the share count for each social platform is adding a span code with the count class inside the <div> code for the buttons:

<div class="st-custom-button" data-network="facebook">
<span class="count">
</div>