How to Migrate from ShareThis Legacy Buttons to Inline Buttons

By March 2, 2017

[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ width=”1/1″ tablet_text_alignment=”default” phone_text_alignment=”default”][vc_column_text]We have just released a completely redesigned sharing button experience, rebuilt from the ground up to be fast, beautiful and mobile-first! The best part is that it’s simple to migrate from our old buttons (Legacy) to the new Inline buttons. Read all about our new buttons here.[/vc_column_text]

[vc_column_text]Before following this guide, we recommend creating a new set of buttons with our visual configuration tool. On the last step, we’ll provide you the code you will use to replace your old buttons with the new ones.

Step 1: Remove the old ShareThis code to make way for the new

Once you finish creating your new buttons, the next step for migration is removing the Legacy button javascript. The script is most likely located between your <head> tags and will look something like this:

<script type="text/javascript"src=""></script> 
<script type="text/javascript">stLight.options({publisher:'12345'});</script>

HINT: Since there is a lot of customization with our code, the easiest way to find the core portion is searching (by CTRL + F) for “buttons.js”.

Remove those lines of HTML. Before saving, go ahead and paste in the new code you received when customizing your brand new Inline Share Buttons.

After you remove the Legacy javascript you should now go into your platform and use the code given after finalizing your new Inline buttons.

That new code should look like this:

<script type="text/javascript" src="//"></script>

Step 2: Replace old inline code with new one:

Now that you’ve replaced the core code, you need to update the inline portion. For this portion you’ll need to find where you place your share buttons. Normally this is placed within the <body> of your website. The Legacy button code looks something like this:

<span class="st_twitter_large" displayText="Tweet"></span>
<span class="st_facebook_large" displayText="Facebook"></span>
<span class="st_linkedin_large" displayText="LinkedIn"></span>
<span class="st_googleplus_large" displayText="Google+"></span>
<span class="st_email_large" displayText="Email"></span>
<span class="st_sharethis_large" displayText="ShareThis"></span>

HINT: Since there is a lot of customization with our Legacy buttons code, the easiest way to find the core portion is searching (by CTRL + F) for the social network you have activated. For example, “st_facebook”.

Once you find the Legacy code, look for all buttons that start with st_ and remove all them.

The final step is the easiest: In the spot that you removed the old inline code, paste in the new code that tells our core script where you want your buttons.

That code is:

<div class="sharethis-inline-share-buttons"></div>

Step 3: Enjoy!

So now you have these awesome, brand new share buttons on your site, and the best part has yet to come. You’re now able to reconfigure your buttons without ever changing the code on your site! Simply head over to your dashboard, make changes, and click update. That’s all there is to it.[/vc_column_text][/vc_column][/vc_row]