Legacy: How to Customize which URL, Text and IMG to Share

By March 2, 2017

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 using Open Graph Protocol tags in your content
  2. By specifying additional parameters in tags
  3. By dynamically modifying the shared object through JavaScript.
Note: Option #1, 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.

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:titleSpecifies title that you would like sharednullOptional
og:typeSpecifies type of page that is being sharednullOptional
og:urlSpecifies URL that you would like sharednullOptional
og:imageSpecifies image/thumbnail that you would like sharednullOptional
og:descriptionSpecifies summary that you would like sharednullOptional
og:site_nameSpecifies site that content is shared fromnullOptional

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>

 

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_urlSpecifies URL (can be shortened URL) that you would like shared
st_titleSpecifies title that you would like shared
st_imageSpecifies link to image you would like displayed in the shared content
st_summarySpecifies 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>

Dynamic Specification through JavaScript

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

Property List

NameDefinitionRequirement
serviceSpecifies the social destination to share toRequired
elementSpecifies which sharing button on page. Usually this is the id of span id of the HTML element containing the buttonRequired
urlSpecifies URL that you would like sharedRequired
titleSpecifies title string that is sharedRequired
typeSpecifies the type of button to display. Default is chicklet. Other possible values are: large,custom,fblike(facebook like),vcount(vertical counter) ,hcount(horizontal counter),buttonRequired
textSpecifies optional text to be displayed next to the ShareThis button on your pageOptional
imageSpecifies link to the image to be sharedOptional
summarySpecifies summary text to be sharedOptional

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