How to upgrade your custom legacy ShareThis buttons

By March 14, 2017

Have a fully custom implementation of ShareThis from before 2017? Want to use our new, lightning fast share code? Here’s the step-by-step guide to migrating from your legacy custom implementation to our new and improved interface.

Note: If you are looking to migrate from our standard button set, take a look at How to Migrate from ShareThis Legacy Buttons to Inline Buttons. Just looking to get buttons? Use our simple design tool.

Step 1: Replace the core legacy ShareThis code

The key to a successful migration is removing the legacy code and replacing it with the new format. First, identify where the old code lives on your site and delete it. It will look something like this:

Once you’ve removed that code, you’ll want to install our new code. If you’re on WordPress, simply install the ShareThis Platform Plugin and make sure it’s activated. Not on WordPress? Just add this line of code to your site’s header:

<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#product=custom-share-buttons"></script>

Step 2: Update your button code

Your custom button code probably looks something like this:

In the legacy code, you would specify which social channel was activated by adding a class like st_facebook_custom. We’ve migrated away from using classes and now use modern data-attributes to define how your custom code behaves. Now, instead of st_facebook_custom, you define a data attribute called data-network=”facebook”.

The list of available share channels is as follows:

  • blogger
  • delicious
  • digg
  • email
  • facebook
  • flipboard
  • googleplus
  • linkedin
  • livejournal
  • mailru
  • meneame
  • odnoklassniki
  • pinterest
  • print
  • reddit
  • sharethis
  • sms
  • stumbleupon
  • tumblr
  • twitter
  • vk
  • weibo
  • whatsapp
  • xing

We also offer the following custom attributes that you can use to customize how your buttons function:

data-url
Specifies URL (can be shortened URL) that you would like shared
data-short-url
Specifies a shortened URL that will be shared
data-title
Specifies title that you would like shared
data-image
Specifies link to image you would like displayed in the shared content
data-description
Specifies summary text/description you wish to share
data-username
Specifies your Twitter username (was previously st_via and st_username)
data-message
Specifies the body copy of e-mail shares (was previously st_summary)

Putting it all together, your Facebook button might now look like this:

<div data-network="facebook" data-short-url="https://bit.ly/your-short-url" class="your-facebook-button-styles your-share-button-styles"><span class="count"></span>share</div>

The optional <span class=””> specifies where our code will inject share counts.

And that’s all there is to it!