How to Reinitialize ShareThis Buttons With Specific Sharing Parameters

In this guide, we’ll teach you how to reinitialize (reload) our ShareThis buttons to use specific sharing parameters. By default the ShareThis widget loader loads as soon as the browser encounters the JavaScript tag; typically in the tag of your page. ShareThis assets are generally loaded from a CDN closest to the user. However, if you wish to change the default setting so that the widget loads after your web page has completed loading then you simply set a parameter in the page.

Reinitializing the buttons would allow you to:

• Take control of when to display the buttons, for example, until a modal or pop-up opens up.
• Have different instances of the buttons on the same page with different configurations, for example, if you want to display only the Twitter button on a specific part and the Facebook one on another. Or if you want to have different languages on different sets of buttons.
• Auto refresh share button properties when new links are loaded with share buttons (infinite scroll).

Note: If you don’t want to reinitialize the buttons with specific parameters, you could just use the window.__sharethis__.initialize() function as it is whenever your modal, pop-up, etc. activates. Please note that you may have to set a delay of around 0.3 to 1 second before adding the line of code above to give time for the container to appear, otherwise, the function will be called too soon

Add <div> and Javascript code

// render the html
<div id="my-inline-buttons"></div>

// load the buttons
window.__sharethis__.load('inline-share-buttons',
{/* this is where your configurations must be, read the Configuration section */

Once you’ve added the above portion of the code, you’re now able to include any or all of the following configuration options below.

Configuration Options

 config = { 
   alignment: STRING, // left, right, center, justified.
   container: STRING, // id of the dom element to load the buttons into
   enabled: BOOLEAN,
   font_size: INTEGER, // small = 11, medium = 12, large = 16.
   id: STRING, // load the javascript into a specific dom element by id attribute
   labels: STRING, // "cta", "counts", or "none"
   language: STRING   // IETF language tag in which the buttons' labels are,
   min_count: INTEGER, // minimum amount of shares before showing the count
   padding: INTEGER, // small = 8, medium = 10, large = 12.
   radius: INTEGER, // in pixels
   networks: ARRAY[STRING],
   show_total: BOOLEAN,
   show_mobile_buttons: BOOLEAN, // forces sms to show on desktop
   use_native_counts: BOOLEAN, // uses native facebook counts from the open graph api
   size: INTEGER, // small = 32, medium = 40, large = 48.
   spacing: INTEGER, // spacing = 8, no spacing = 0.
};

Example

// render the html
<div id="my-inline-buttons"></div>
// load the buttons
window.__sharethis__.load('inline-share-buttons', {
  alignment: 'left',
  id: 'my-inline-buttons',
  enabled: true,
  font_size: 11,
  padding: 8,
  radius: 0,
  networks: ['messenger', 'twitter', 'pinterest', 'sharethis', 'sms', 'wechat'],
  size: 32,
  show_mobile_buttons: true,
  spacing: 0,
  url: "https://www.sharethis.com", // custom url
  title: "My Custom Title",
  language: "en",
  image: "https://18955-presscdn-pagely.netdna-ssl.com/wp-content/uploads/2016/12/ShareThisLogo2x.png", // useful for pinterest sharing buttons
  description: "My Custom Description",
  username: "ShareThis" // custom @username for twitter sharing
});

//state variable for scrolling
let scrolling = false;

//in case of scrolling, change the state of the scrolling variable to true
window.onscroll = function() {
scrolling = true;
}
/*create an interval that checks every 3 seconds the state of the scrolling variable, if any scrolling has been done in that interval, reinitialize the buttons*/

setInterval(() => {
if (scrolling) {
scrolling = false;
window.sharethis.initialize()
}
}, 3000);

Notes

• Please keep in mind that Open Graph tags will take precedence when sharing on Facebook and other social channels. If linking to a custom URL, please be sure to have Open Graph tags filled out for that page as well.
• As with our other tools, we recommend moving the site to live production before giving it a try as there are some resources that aren’t passed during a local/test environment.

Order of Precedence

It is important to remember the order of precedence by which the ShareThis code processes share properties. Generally, we recommend using one approach by which sharing properties are specified on your pages to prevent errors.

1. Any dynamically specified JavaScript properties (i.e. highest precedence)
2. Properties specified in tags (i.e. second precedence)
3. Open Graph Protocol tags (i.e. lowest precedence)