Implementing Social Sharing

A Social Login application is required for implementing social sharing. If you do not already have one, see Creating a Social Login Application. Once you have a Social Login application, click the app’s Manage Engage App button to configure it and generate the HTML and JavaScript code to place on your site to enable sharing.

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

Configure Providers and Permissions

From the Widgets and SDKs section of your application home page, click Sharing to configure the providers to be used for sharing. Click the gear icon next to any providers that will be used for authenticated or email sharing. Follow the instructions as prompted in the dashboard or as listed in the Provider Setup Guide. Note that providers regularly change or update their developer tools. We try to keep directions as up-to-date as possible, but some steps may differ slightly from the current documentation.

Once a provider has been set up with all required fields, the gear icon will turn green, and you will be able to select the provider to add to your code. If you are using only native share providers, no configuration is required before you will be able to add them to your code.

If you are configuring Google+ for sharing through Gmail, you must also request the Contacts and Email Sharing scopes. From the Providers section of your application home page, click the pencil icon and then select Google+. In the list of provider features, make sure the following features are are ‘on’:  MailEmail, and Contacts.

Update Application Settings

From the Settings section on your application home page, click domains. Add *.janrain.com to the Domain Whitelist and click Save.

This is required for authenticated or email sharing. If this domain is not whitelisted, you will see the following error message: “The token URL or xdReceiver has not been whitelisted.”

Get the Sharing Code

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

  • a DIV element with a CSS class of janrainSocialPlaceholder and attributes
  • defining the activity, description, and type of sharing to be enabled the
  • Social Sharing JavaScript library a configuration script block defining
  • settings for the sharing behavior and UI

The HTML placeholder should be placed wherever you want the sharing widget to appear. Example:


<div
 class="janrainSocialPlaceholder"
 data-janrain-url="http://www.google.com/"
 data-janrain-title="Share this!"
 data-janrain-description="This is a cool thing"
 data-janrain-image="http://www.coolmath.com/fractals/images/fractal11.gif"
 data-janrain-message="Hey come look at this amazing thing!"
></div>
The scripts should be placed at the bottom of your site’s tag. Example:
<script src="//cdn-social.janrain.com/social/janrain-social.min.js"></script>
<script type="text/javascript">
 janrain.settings.social = {
 providers: [
 "facebook",
 "twitter",
 "native-pinterest"
 ]
 };
 janrain.settings.appUrl = "https://my-app.rpxnow.com";
</script>

Note: If you are also using Social Login, janrain.settings.appUrl may already be defined on the page. If so, do not include it in the sharing configuration script.

Customize Sharing Settings

See the Social Sharing JavaScript API for detailed information about the settings available for customizing the sharing widget. These settings will enable you to configure how providers are used, what content is shared, and the design of the UI.

Global Settings defined in the sharing JavaScript will be applied to all instances of the sharing widget unless overridden by Instance Settings defined in the HTML placeholder element. Global Settings use camelCase notation (settingName). Instance Settings use dash notation and begin with data-janrain-\* (data-janrain-setting-name).

Customize Provider Icons

You may configure your own social provider icons with the providerIcons setting. The default provider icons used in the sharing widget are approved by the identity providers, so check with the providers before changing the images to ensure you are not violating their Terms of Service.

Configure Multiple Instances of Sharing

The HTML placeholder may be included in multiple places if different configurations for the sharing widget are desired on the same page. Apply the janrainSocialPlaceholder class to each div and configure the Instance Settings as needed.

Configure URL Shortening

All links included in a share to a social network will be automatically shortened using the rpx.me domain by default. Shares made by email will include the full-length URL.

Disable URL Shortening

For Pro and Enterprise customers, URL shortening may be toggled on and off in the share configuration using the shorten-url attribute. Set this to false to turn URL shortening off.

Use a Custom URL Shortener

If you would like to use a third party URL shortening service so that your links use a custom domain rather than rpx.me, follow these steps:

  1. Add a CNAME entry in your DNS for the custom domain pointing to rpx.me.
  2. Log in to dashboard.janrain.com.
  3. Click the sharing application’s Manage Engage App button.
  4. On the Home page under Settings, click General Settings.
  5. On the Application Settings page under Custom URL Shortening, enter the custom domain to be used for sharing and click the Save button.

Note: The CNAME must be in place on the domain and fully propogated for the new URL shortener to work.

Twitter Character Counts

The Twitter count displayed when typing in the message text box takes into account the shortened URL that is being shared. This remains constant no matter what URL shortening service is used, as Twitter uses the same processing for each. A preview of the formatted message will display just below the textbox.