Share Buttons

Yes! Since 2007, we’ve been providing free share buttons to power the sharing of content across the open web.

You can install the ShareThis share button on your HTML website in a few easy steps. Navigate to the setup page and choose your preference of Inline Buttons or Sticky Buttons. 

Then, select the share buttons you desire. You can customize your design by choosing the alignment, button size, call to action and share count. Once your button is design-ready, click the “register & get the code” to get the your button code. 

Check out this support post for more details on How to Install Share Buttons on a HTML Website. 

ShareThis share buttons for WordPress give you more control over where and how share buttons appear on your site. Better yet, there’s no need to copy and paste code, since everything is controlled through our platform and the plugin settings. Downloading and installing our plugin on your WordPress site takes less than five minutes. Watch the tutorial on how to install and give it a try today! 

Installing share buttons on Wix takes a few easy steps. Navigate to the setup page to choose your preference of Inline or Sticky Buttons. 

Then, select the share buttons you desire. You can customize your design by choosing the alignment, button size, call to action and share count. Once your button is design-ready, click the “register & get the code” to get the button code. After you design your share buttons, you can click the “register & get the code” button to get the share button code. Copy the code under “Install sharethis.js on your website.” Then log in to your Wix account to enter the HTML code into the text box. 

Check out this support post for more details on How to Install Share Buttons on Wix. 

Installing share buttons on Weebly takes a few easy steps. Navigate to the setup page to choose your preference of Inline or Sticky Buttons.

Then, select the share buttons you desire. After you design the your share buttons, you can click the “register & get the code” button to get the share button code.  Once your button is design-ready, click the “register & get the code” to get the button code. After you design your share buttons, you can click the “register & get the code” button to get the share button code. Copy the code under “Install sharethis.js on your website.” Then log in to your Weebly account to enter the HTML code into the text box. 

Prefer to customize your share buttons? Great! Our sharing code lets you create custom buttons from scratch. We’ll take care of the sharing and counting for you. 

Check out this support post for more details on How to Create Custom ShareThis Share Buttons. 

Currently, some social media platforms (such as Instagram or Tik Tok) restrict their API and therefore it isn’t possible to share content across an endpoint through an application outside their environment. However, we do offer an Instagram Follow Button, Tik Tok Follow Button (and more!) that you can add by enabling Follow Buttons.

No. When no ShareThis account or property is provided, the script automatically initializes using anonymous mode.

Now all you need to do to use our share buttons is place this script in your website code:

<script type="text/javascript" src="https://platform.sharethis.com/sharethis.js" defer></script>

Next, depending on what kind of share buttons you want use, you can simply place the following HTML where you want the buttons to show:

<!-- ShareThis BEGINS -->
<div class="sharethis-share-buttons" data-type="inline-share-buttons">
<span data-network="facebook"></span>
<span data-network="twitter"></span>
<span data-network="linkedin"></span>
<span data-network="email"></span>
<span data-network="sharethis"></span>
</div>
<!-- ShareThis ENDS -->

Notice the “data-type” attribute in the first div. It accepts two values “inline-share-buttons” or “sticky-share-buttons”

The value of the data-type attribute determines the button layout:

-inline-share-buttons renders buttons inline within page content.

-sticky-share-buttons renders floating buttons on the left or right side of the browser window.

Each <span> inside the container represents a social network, defined by its data-network attribute.

To add a social media network button, place a element with a data-network attribute inside the ShareThis wrapper

The value of data-network must be the lowercase identifier of a supported social network.

Example wrapper:

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

Example network button:

<span data-network="facebook"></span>

You can include multiple elements inside the wrapper. The order of the elements determines the order in which the buttons appear.

Complete example:

<div class="sharethis-share-buttons" data-type="inline-share-buttons">
  <span data-network="facebook"></span>
  <span data-network="twitter"></span>
  <span data-network="linkedin"></span>
</div>

Once added, the corresponding social network buttons will automatically render on your website.

The current list of supported social media networks you can place in your share buttons container code are:
‘facebook’
‘x’
’email’
‘whatsapp’
‘linkedin’
‘reddit’
‘tumblr’
‘diigo’
‘digg’
‘flipboard’
‘copy’
‘meneame’
‘fark’
‘facebook-messenger’
‘odnoklassniki’
‘sina-weibo’
‘vk’
‘blogger’
‘snapchat’
‘xing’
‘mail-ru’
‘livejournal’
‘pinterest-pin’
‘buffer’
‘douban’
‘evernote’
‘bookmarks’
‘gmail’
‘hackernews’
‘houzz’
‘instapaper’
‘line’
‘pocket’
‘print’
‘qzone’
‘iorbix’
‘kakao’
‘kindleit’
‘kooapp’
‘microsoftteams’
‘naver’
‘nextdoor’
‘outlook’
‘plurk’
‘pinboard’
‘tencentqq’
‘trello’
‘viber’
‘yummly’
‘diaspora’
‘surfingbird’
‘refind’
‘renren’
‘skype’
‘telegram’
‘threema’
‘yahoomail’
‘wordpress’
‘wechat’

You can change the order of your social network share buttons by reordering the <span> elements inside the ShareThis wrapper <div>.

The buttons will appear on your website in the same order as the <span data-network> elements in your HTML.

For example, if your buttons are initially ordered like this:

<div class="sharethis-share-buttons" data-type="inline-share-buttons">
  <span data-network="facebook"></span>
  <span data-network="twitter"></span>
  <span data-network="linkedin"></span>
</div>

And you want Facebook to appear after LinkedIn, update the order like this:

<div class="sharethis-share-buttons" data-type="inline-share-buttons">
  <span data-network="twitter"></span>
  <span data-network="linkedin"></span>
  <span data-network="facebook"></span>
</div>

After this change, the Facebook button will appear after the LinkedIn button.

To remove a social network share button, delete the corresponding <span> element with the matching data-network attribute from the ShareThis button container <div>.

For example, if your buttons are defined like this:

<div class="sharethis-share-buttons" data-type="inline-share-buttons">
  <span data-network="facebook"></span>
  <span data-network="twitter"></span>
  <span data-network="linkedin"></span>
</div>

To remove the Facebook button, delete the <span> with data-network=”facebook”:

<div class="sharethis-share-buttons" data-type="inline-share-buttons">
  <span data-network="twitter"></span>
  <span data-network="linkedin"></span>
</div>

After removing the span, the Facebook share button will no longer appear on your website.

You can change the size of Inline Share Buttons by adding a data-size attribute to the ShareThis button container <div>.

There are three supported size values:

• small (default)
• medium
• large

By default, inline share buttons use the small size.

Default container

<div class="sharethis-share-buttons" data-type="inline-share-buttons">

Example: setting the buttons to large

<div class="sharethis-share-buttons"
  data-type="inline-share-buttons"
  data-size="large">

After adding the data-size=”large” attribute, the inline share buttons will render in the large size.

The data-size attribute is only supported for inline share buttons.

You can change the labels shown next to each social network icon by adding a data-labels attribute to your share button container <div>.

This works for both inline share buttons and sticky share buttons.

There are three supported label options:

• cta — shows a call-to-action label (for example: “Share”, “Tweet”)
• counts — shows the share count next to each icon
• none — hides labels and shows icons only

By default, share buttons use the cta label option.

Default container (inline or sticky)

<div class="sharethis-share-buttons" data-type="inline-share-buttons">

or

<div class="sharethis-share-buttons" data-type="sticky-share-buttons">

Example: showing share counts as labels

<div class="sharethis-share-buttons"
  data-type="inline-share-buttons"
  data-labels="counts">

Example: hiding labels (icons only)

<div class="sharethis-share-buttons"
  data-type="sticky-share-buttons"
  data-labels="none">

Important notes

Any unsupported value will fall back to the default behavior

The data-labels attribute applies to both inline and sticky share buttons

Only the values cta, counts, and none are supported

By default, ShareThis buttons do not display the total share count for the current page.

To enable the total share count, add the data-show_total=”true” attribute to your share button container <div>.

This works for both inline share buttons and sticky share buttons.

Default container

<div class="sharethis-share-buttons" data-type="inline-share-buttons">

or

<div class="sharethis-share-buttons" data-type="sticky-share-buttons">

Enable total share count

<div
  class="sharethis-share-buttons"
  data-type="inline-share-buttons"
  data-show_total="true">

Result

Once data-show_total=”true” is added, the total number of shares for the current page will appear next to your share buttons.

Important notes

If the attribute is omitted or set to false, the total share count will not be shown

This setting shows the combined total share count, not individual network counts

The attribute works for both inline and sticky share buttons

By default, sticky share buttons float on the left side of the user’s browser window.

To move your sticky share buttons to the right side, add the data-alignment attribute to your share button container and set its value to “right”.

Note: This setting only applies to sticky share buttons.

Default container

<div class="sharethis-share-buttons" data-type="sticky-share-buttons">

Move buttons to the right side

<div
  class="sharethis-share-buttons"
  data-type="sticky-share-buttons"
  data-alignment="right">

Result

After adding data-alignment=”right”, your sticky share buttons will float on the right side of the browser window instead of the left.

Available alignment options

data-alignment="right"

data-alignment="left" (default)