Socialcast Learn About Socialcast

Customizing the Reach Snippet

The Reach Extensions are powered by JavaScript code that you insert into the target application pages. All three deployment types (HTML, Sharepoint Web Part, and Google Gadget) use the same basic code. In the case of a Sharepoint Web Part and a Google Gadget, that code also includes a deployment-specific wrapper. Here’s an example of the JavaScript code:

ReachRef_2_javascript

Reach Extension Definition Object

Reach Extension definitions are expressed as simple JavaScript objects. The object properties describe the extension and allow developers to specify options. A basic definition object has only two required properties, token and domain. When you create a Reach Extension, Socialcast generates a generic definition object:

{
  container: 'reach_container_id',
  domain: 'https://your-socialcast-domain',
  token: 'xxxxxxxxxxxxxxxxxxxx'
}

This table describes all the required and optional properties for a definition object.

Property Description
clearContainer

Indicates whether the Reach Extension will replace the contents of the specified container or simply append the extension code. (Type: Boolean, Default: false)

container

The ID of the HTML element that will contain the Reach Extension. If you do not specify a container, Reach uses the document body as a container. (Type: String)

domain

The domain for the Socialcast community. (Type: String) Required.

DOMReady

Indicates whether the script will wait for the DOM to be accessible before initializing the Reach Extension. (Type: Boolean, Default: true)

email

The email address for a particular Socialcast user. Reach uses this property to display a profile stream in a Dynamic Extension. (Type: String)

group_name

The name of a group within the Socialcast community. Reach uses this property to display a particular group stream in a Dynamic Extension. You can also use group_id to specify a dynamic group stream. (Type: String)

group_id

The ID of a group within the Socialcast community. Reach uses this property to display a particular group stream in a Dynamic Extension. You can also use group_name to specify a dynamic group stream. (Type: String)

iframeHeight

The height of the iframe containing the Reach Extension HTML. Reach places the frame within the specified container. (Type: String, Default: '100%')

iframeWidth

The width of the iframe containing the Reach Extension HTML. Reach places the frame within the specified container. (Type: String, Default: 100%)

queryString

Indicates whether Reach will use the query string parameters when identifying the page resource. (Type: Boolean, Default: true)
Note: We recommend you set this value to false if the host application contains timestamps or volatile content in the query string, for example www.socialcast.com/test?timestamp=123456789.

token

The alphanumeric unique identifier for a particular Reach Extension. Socialcast generates this ID when you create an extension. (Type: String) Required.

Reach Library

The embed code relies on a JavaScript library called extension.js. This file is designed to have minimal impact on the host page’s JavaScript environment. For this reason, the JavaScript:

  • Supports asynchronous loading by default
  • Is shared by all Reach Extensions
  • Is aggressively cached

The Reach extension.js file creates a global reference to _reach that you can use to create Reach Extensions.

_reach Methods

_reach.push

Description

Initializes Reach Extensions.

Arguments

One or more Reach Extension definition objects.

Syntax

_reach.push(extensionDefinition1, extensionDefinition2, n...);

Multiple Extensions on the Same Page

You can embed more than one Reach Extension on a host page. For example, you might want to include a discussion and a Recommend button on the same page. The push method accepts multiple extension definition object arguments. For example:

var _reach = _reach || [];

_reach.push({
  container: 'reach_discussion',
  domain: 'https://your-socialcast-domain',
  token: 'xxxxxxxxxxxxxxxxxxxx'
},{
  container: 'reach_recommend_button',
  domain: 'https://your-socialcast-domain',
  token: 'xxxxxxxxxxxxxxxxxxxx'
});

(function(){
  var e=document.createElement('script'); e.type='text/javascript'; e.async = true;
  e.src= document.location.protocol + ‘your-socialcast-domain/services/reach/extension.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
})();