Deploy Social Sharing

This topic is for deploying Social Sharing v3 on a website.

Note:  If you are using a pre-built integration, Social Sharing v3 currently is only supported in the Drupal – Social Login Integration.


Social Sharing functionality is deployed by adding three code elements to a webpage:

1.  Build DIV Element

The first step is to add a DIV element with a CSS class of janrainSocialPlaceholder. Apply the desired data-janrain-* definition settings to define the activity, description, and type of sharing to be enabled. See the Social Sharing JavaScript API Definition Settings section for detailed information about what settings are available, and how to use them.

Example #1:

2. Add JavaScript Library

Insert the JavaScript library as a script to enable Janrain’s sharing functionality.

Example #2:

3. Add Configuration Script Block

The configuration script block holds the settings that define the sharing behavior and UI. See the Social Sharing JavaScript API Configuration Settings section for detailed information about what settings are available, and how to use them.

Note: The janrain.settings.appUrl setting needs to be added to the script block unless social login is already configured on the page. If social login is already on the page, the configuration already lists the appUrl setting. The appUrl is your Application Domain, which can be found in the settings for your social login application.

Example #3:

The settings in the configuration script block can be overridden in the DIV janrainSocialPlaceholder class, to support different configurations of Social Sharing on one page. See the Social Sharing JavaScript API Definition Settings section for details on which configuration settings can be overridden.

4. Design UI

A web-based Style Gallery is available to help you design the UI for the sharing functionality.

  1. Choose the overall theme for your UI using the first wizard by making selections from the drop-down menu, and adding the resulting JavaScript to the Configuration Script Block.
  2. For further customization of the UI, a second wizard lets you hovering over an example of the UI and select corresponding CSS code from a text box. Use this functionality to define the desired identity provider elements, and add the resulting CSS to the Configuration Script Block.