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”]

  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: 

Social Servicedata-network Code
Black Lives Matterblm
Bloggerblogger
Bufferbuffer
Copy Linkcopy
Diasporadiaspora
Diggdigg
Doubandouban
Emailemail
Evernoteevernote
Facebookfacebook
Flipboardflipboard
Gmailgmail
Google Bookmarksgooglebookmarks
Hacker Newshackernews
Instapaperinstapaper
iOrbixiorbix
Kakaokakao
Koo Appkooapp
Lineline
Linkedinlinkedin
LiveJournallivejournal
Mail.Rumailru
Meneamemeneame
Messengermessenger
Odnoklassnikiodnoklassniki
Outlookoutlook
Pinterestpinterest
Pocketgetpocket
Printprint
Push to Kindlekindleit
Qzoneqzone
Redditreddit
Refindrefind
Renrenrenren
Skypeskype
Surfingbirdsurfingbird
Telegramtelegram
Tencent QQtencentqq
Threemathreema
Trellotrello
Tumblrtumblr
Twittertwitter
Viberviber
VKvk
WeChatwechat
ShareThissharethis
Sina Weiboweibo
SMSsms
Snapchatsnapchat
WhatsAppwhatsapp
WordPresswordpress
Xingxing
Yahoo Mailyahoomail
Yummlyyummly

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 a 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.

Note

  • 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>