How to Customize Sticky Share Buttons (Image, URL, and more)

Looking to customize the title, description, image, or URL that’s displayed when a user shares content on your website? You came to the right place! (If you want to learn how to customize your Inline Share Buttons, go here)

Oftentimes, the Open Graph Protocol tags will populate this information with content from your page but you can tailor it to make it more relevant if it’s not extracting the information you want it to. For example, if a user shares your homepage, you may want to add an image of your product or provide a more compelling description. 

Due to the way Sticky Share Buttons are designed (i.e. they don’t need a placement code) you will need to manually add the following code inside the <body> of your site, preferably before the closing of the </body> tag (our script will deal with moving the div where it needs to go):

<div class='sharethis-sticky-share-buttons' ></div>

Properties in <div> tags

Depending on whether you want to simply set a universal URL or shortened URL, add the following tags in the tool placement code <div class=”sharethis-sticky-share-buttons”></div>. 

data-networkSpecifies to which social platform the content will be shared
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 (email’s subject in some email channels)
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
data-email-subjectSpecifies the email’s subject

Example: This button is set to share the ShareThis home page with the title “Sharing is great!” <div class='sharethis-sticky-share-buttons' data-url="https://sharethis.com" data-title="Sharing is great!"></div> 

Notes

  • This customization is not available for all social channels. For example, Facebook will always use og: meta tags for the URL instead of these values.
  • The data-url attribute will help you set a specific URL (despite which page users are sharing) or add a tracked link.

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)

Hot tip

ShareThis offers you the ability to have the Share Buttons in web and mobile versions. By default, on the mobile version, Sticky Share Buttons will display at the bottom, however, if you prefer to have them displayed as on the web version, simply follow the steps below:

  1. Go to Sticky Share Buttons product page
  2. Go down to the customization section and scroll to Mobile Breakpoint
  3. Enter number 0
  4. Click Update