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;      &:hover, &:focus {      text-decoration: underline;      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”]

  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: 

blminstapaperskype
bloggerlinesurfingbird
bufferlinkedintelegram
diasporalivejournalthreema
diggmailrutumblr
doubanmeneametwitter
emailmessengervk
evernoteodnoklassnikiwechat
facebookpinterestweibo
flipboardprintwhatsapp
getpocketqzonewordpress
gmailredditxing
googlebookmarksrefindyahoomail
hackernewsrenren

Data attributes include: 

data-networkSpecifies to which social platform the content will be shared
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 (email’s subject in some email channels)
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
data-email-subjectSpecifies the email’s subject
  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.

Example

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