Functions

Contents

Overview

Note: This topic is for legacy Social Sharing v2 support only. For all new integrations, please see the current Social Sharing documentation.
These functions specify content for the share activity and the styling and state of the Social Sharing solution.

Functions

Content

The Content API calls are used to add additional media (such as images and text) to the activity being shared. For example, you can use the Content API calls to enable a user to share a URL along with a blog post or an image with a video. Such elements will appear along with the shared activity in the social network chosen by the user.

Note: Not all options are available for every provider.

Supported by: All Providers

Field Value Description
setMessage text Adds preset text to the text box used to provide messages with the activity being shared.

Supported by:

Field Value Description
setTitle text The title given to the shared content.

Supported by:

Field Value Description
setUrl URL The URL associated with the content being shared.
setImage URL pointing to image An image associated with the content being shared.

Supported by: Facebook

Field Value Description
setDescription text The description of the shared content. This appears in the preview of the shared object and describes what is being shared. Not to be confused with user-generated content, which appears as the status message.
setMedia URL A media (video or audio) object associated with the content being shared.
setActionLink URL Link that appears below the user-generated message and content fields. In the case of Facebook, this link appears next to the Like and Comment links. The format is JSON with name and link (both properties are required).
{"name":"foo", "link":"http://bar.com"}

Style

The Style settings affect the appearance of the Social Sharing UI. These settings take effect when Social Sharing is launched.

Note: Some settings are available only to higher service levels.

Available to: Basic, Plus, Pro, Enterprise

Field Value Description
setMobile true, false When true, changes the style to one optimized for mobile browsers.
setOrientation “landscape” or “portrait” Changes the orientation of the UI to either “landscape” or “portrait.” Works when mobile is set to “on” or “off.” Note: This is called automatically when screen orientation changes on supported devices.

Available to: Pro, Enterprise

Field Value Description
setModalBackgroundColor Hex color value Sets the background color of the modal border using the webcolor hexadecimal value. The default color is #000000 (black).
setModalOpacity Between 0 and 1 (in tenths) Defines the border opacity of a modal UI. 0 is completely clear, and 1 is completely solid. Use a value expressed in tenths (for example, .04). Default value is .05.
setModalBorderRadius 1-20 Sets the rounding angle of the border of a modal UI. 1 represents square corners, and 20 represents the greatest rounding. Default value is 5.
setModalWidth 1-20 Sets the width of the border on a scale of 1-20 pixels. Default value is 5.
setBodyBackgroundColor Hex color value Determines the background color using the webcolor hexadecimal value. This only affects email unless the bodyBackgroundColorOverride option is set to true. The default color is #009DDC.
setBodyBackgroundColorOverride true, false If true, the bodyBackgroundColor is used regardless of provider. If false, bodyBackgroundColor only affects the email tab.
setBodyColor Hex color value Sets the color of the text (in the body, not user-generated content in text boxes) using the webcolor hexadecimal value. The default color is #333333.
setBodyContentBackgroundColor Hex color value Sets the background color of the internal whitespace using the webcolor hexadecimal value. The default color is #ffffff.
setBodyFontFamily Font name Sets the font. Default is “Helvetica”.
setBodyTabBackgroundColor Hex color value Sets the background color of the navigation menu on the left of the UI using the webcolor hexadecimal value. The default color is #f8f8f8.
setBodyTabColor Hex color value Sets the color of the text in the navigation menu on the left of the UI using the webcolor hexadecimal value. The default color is #000000.
setElementBackgroundColor Hex color value Sets the background color of the input text boxes of the UI using the webcolor hexadecimal value. The default color is #f6f6f6.
setElementBorderColor Hex color value Sets the color of the border of the input text boxes of the UI using the webcolor hexadecimal value. The default color is #cccccc.
setElementBorderRadius 1-10 Sets the rounding angle of the text box borders of the UI. 1 represents square corners, and 20 represents the greatest rounding. Default value is 3.
setElementButtonBorderRadius 1-10 Sets the rounding angle of the buttons of the UI. 1 represents square corners, and 20 represents the greatest rounding. Default value is 6.
setElementButtonBoxShadow 0-3 Sets a drop shadow on buttons. A value of 0 removes the drop shadow, and 3 is the greatest amount of drop shadow on the button. Default value is 3.
setElementColor Hex color value Sets the color of the element using the webcolor hexadecimal value. The default color is #333333.
setElementHoverBackgroundColor Hex color value Sets the background color of the element hover using the webcolor hexadecimal value. The default color is #eeeeee.
setElementLinkColor Hex color value Sets the hyperlink color using the webcolor hexadecimal value. The default color is #009DDC.
setAttributionDisplay true, false If true, displays the “Social Sharing by Janrain” attribution message. If false, the attribution message is hidden.

Widget

Functions in the Widget category interact with the solution as a whole and can be used to show, hide, or sign a user into Janrain.

Field Value Description
show None Displays the UI.
hide None Hides the UI.
reset None Resets all sharing solutions on the page.
showMode “broadcast” or “contact” Shows the desired mode (“broadcast” or “contact”) for the current provider.

Note: showMode works only if that mode is actually supported by the identity provider. Also, you must have Pro- or Enterprise-level service to use the contact mode.

showProvider string Brings the specified provider tab to the front. Valid values include providers such as “facebook,” as well as “email” for the email tab.
createBlankProvider name and position Creates an additional provider button that hosts a client’s own Social Sharing JavaScript. See the Custom Provider section later in this topic for further information.

These features require service level: Pro, Enterprise

Field Value Description
login A comma-separated list of identity providers. Initiates a sign-in to Janrain with the specified providers. The valid values for login are:

  • “email”
  • “facebook”
  • “linkedin”
  • “myspace”
  • “twitter”
  • “yahoo”

Note: This is available only when the custom setting is set to true.

send text Sends data to Janrain to post. The data must be an object that contains all necessary fields. No validation is performed on this object (other than checking that there was a login event for the provider).

Note: This is available only when the custom setting is set to true.

loginAndSend text Similar to send, but automatically spawns the login window (avoiding the need to add the onShareLoginComplete event listener).

Note: This is available only when the custom setting is set to true.

shortenUrl true, false Overrides the default set in the Janrain application. When set to true, shared URLs are shortened using the Janrain URL-shortening service. If false, shared URLs are not modified.

Custom Provider

Some sites have their own sharing functionality. For adding a custom provider button to the Social Sharing UI, the createBlankProvider function is used. This command has no sharing capabilities itself; it only creates a spot in Social Sharing where your sharing code can be added.

createBlankProvider creates placeholder elements into which JavaScript for the sharing functionality is added. It requires two parameters:

This example creates a new provider named “providerName” and places it third on the button list:

Note: The custom provider functionality is not available when the custom setting is set to true. See the previous Settings section for more information.

Once executed, createBlankProvider returns an object with two DOM elements: tab and page.

Multiple custom providers may be added (depending on your needs).