How to Customize which URL, Text and IMG to Share

Overview

Specifying what you want your share buttons to share is one of the most important aspects for your audience. It's simple to control and easy to implement. 

There are three ways to target within our widget to specify how your share is sent:
  1. By specifying additional parameters in tags
  2. By using Open Graph Protocol tags in your content 
  3. By dynamically modifying the shared object through JavaScript.

Note: Option #2, Open Graph Protocol, is the most common way that the properties are defined. Facebook crawls your the content of a given URL to determine the properties to be included for sharing. You can explicitly define the properties by including og:tags in the head code of your page; otherwise, Facebook will infer the properties after it completes the page crawl on a given URL.  ShareThis then uses those properties to assemble the share box for the service selected; it uses these properties for most services supported by ShareThis, including Twitter, LinkedIn and Pinterest, along with Facebook.

Properties in <Span> Tags

You can specify the URL, title, and image to be shared by adding the following codes into <span> which is stored within the <header>.

NameDefinition
st_url Specifies URL (can be shortened URL) that you would like shared
st_title Specifies title that you would like shared
st_image Specifies link to image you would like displayed in the shared content
st_summary Specifies summary text/description you wish to share

Example
This button is set to share the ShareThis home page with the title "Sharing is great!"

		<span class="st_sharethis" st_url="http://sharethis.com" st_title="Sharing is great!"></span>


Open Graph Tags

Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects.

Put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). In order to make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.

NameDefinitionDefaultRequirement
og:title Specifies title that you would like shared null Optional
og:type Specifies type of page that is being shared null Optional
og:url Specifies URL that you would like shared null Optional
og:image Specifies image/thumbnail that you would like shared null Optional
og:description Specifies summary that you would like shared null Optional
og:site_name Specifies site that content is shared from null Optional

Example:

 

Source Code:

<head>
<meta property="og:title" content="Join the best company in the world!" />
<meta property="og:url" content="http://www.sharethis.com" />
<meta property="og:image" content="http://sharethis.com/images/logo.jpg" />
<meta property="og:description" content="ShareThis is its people. It's imperative that we hire smart,innovative people who can work intelligently as we continue to disrupt the very category we created. Come join us!" />
<meta property="og:site_name" content="ShareThis" />
</head> 

Dynamic Specification through JavaScript

You can modify the stWidget JavaScript object's properties dynamically to specify the content that is shared.

Property List

NameDefinitionRequirement
service Specifies the social destination to share to Required
element Specifies which sharing button on page. Usually this is the id of span id of the HTML element containing the button Required
url Specifies URL that you would like shared Required
title Specifies title string that is shared Required
type Specifies the type of button to display. Default is chicklet. Other possible values are: large,custom,fblike(facebook like),vcount(vertical counter) ,hcount(horizontal counter),button Required
text Specifies optional text to be displayed next to the ShareThis button on your page Optional
image Specifies link to the image to be shared Optional
summary Specifies summary text to be shared Optional

Example
This example creates a button that connects to a large format ShareThis button and shares the ShareThis home page with a description. It shares a custom image.

		<head>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
        stLight.options({
                publisher:'12345',
        });
</script>
</head>
<body>
<span id="button_1"></span>
<script>
         stWidget.addEntry({
                 "service":"sharethis",
                 "element":document.getElementById('button_1'),
                 "url":"http://sharethis.com",
                 "title":"sharethis",
                 "type":"large",
                 "text":"ShareThis" ,
                 "image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png",
                 "summary":"this is description1"
         });
</script> 

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 <span> tags i.e. second precedence
  3. Open Graph Protocol tags i.e. lowest precedence