How to Migrate from ShareThis Custom Legacy Share Buttons

By March 14, 2017

Signed up for custom share buttons before March 2017? We’ve redesigned our tools which are now faster, more customizable, and mobile-friendly. To migrate over to the new and improved experience, follow the steps below: 

Note: If you used our standard share buttons, view our How to Migrate from ShareThis Legacy Buttons support page instead. 

  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. Remove the old ShareThis code from your website, which is most likely located between your <head> tags. The code will look similar to this: 
  1. Paste the unique ShareThis code that you copied from step 3 into the header section of your website. 

Updating Placement Code for Inline Share Buttons

Inline share buttons require an extra snippet of code to work on your site. For our legacy share buttons, you would specify which social channel was activated by adding a class. We’ve migrated from classes to modern data-attributes in order to define how the custom code behaves. Follow the steps below to update your placement code: 

  1. Remove the old share buttons placement code, which is normally located in the <body> of your website. The code should look similar to this: 
  1. Update 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;   }
To tinker with the setup, please use this code editor: (Insert Codepen code) 

  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.

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