Configure social sharing

๐Ÿ“˜

The content on this page deals with a legacy feature of the Akamai Identity Cloud (in this case, social sharing). If you are currently an Identity Cloud customer and are using social sharing, that feature is still supported. However, if youโ€™re new to the Identity Cloud, social sharing is no longer available.


A Social Login application is required for implementing social sharing. After 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.


๐Ÿ“˜

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 Social login configuration guides. 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.

After 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.


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 allow listed 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="http://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>

๐Ÿ“˜

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 social sharing JavaScript API global settings). 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 social sharing JavaScript API 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.


๐Ÿ“˜

The CNAME must be in place on the domain and fully propagated 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.

Appendix: Social sharing shares types

Authenticated share

An Authenticated Share is an activity shared to a userโ€™s wall or status, a friendโ€™s wall, the wall of a group to which the user belongs, or other social network update using theย UI and the providerโ€™s sharing APIs. This functionality requires the provider to be configured with your Social Login application.


Native share

A Native Share is an activity shared to a userโ€™s wall or status, a friendโ€™s wall, the wall of a group to which the user belongs, or other social network update using the providerโ€™s native sharing UI and APIs. This functionality does not require any configuration in your Social Login application since it does not display theย Identity Cloud sharing interface or require the user to authorize the application to share. Note that native sharing will not be reported to the analytics dashboard.


Email share

An Email Share is an activity shared directly to another user via a designated email service. Email sharing may be completed through a supported provider configured with your Social Login application or through a userโ€™s native email client.