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. 

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 Inline Share Buttons and activate it by clicking the Enable tool button. 
  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="button share-button facebook-share-button">share</div> <div class="button share-button twitter-share-button">tweet</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;   }

  1. 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: 

facebookxinginstapaper
twitterprintline
pinterestbloggergetpocket
emailflipboardqzone
smsmeneamerefind
sharethismailrurenren
linkedinlivejournalsurfingbird
messengerwechatskype
redditbuffertelegram
tumblrdiasporathreema
diggdoubanyahoomail
whatsappevernotewordpress
vkgooglebookmarksblm
weibogmail
odnoklassnikihackernews

Data attributes include: 

data-urlSpecifies URL (can be shortened URL) that you would like shared
data-short-urlSpecifies a shortened URL that can be used in conjunction with the data-url
data-titleSpecifies title that you would like shared
data-imageSpecifies link to image you would like displayed in the shared content
data-descriptionSpecifies summary text/description you wish to share
data-usernameSpecifies your Twitter username
data-messageSpecifies the body copy of e-mail shares
  1. 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.

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

Need help? Get in touch with us at support@sharethis.com