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’: Mail, Email, 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
- settings for the sharing behavior and UI
The HTML placeholder should be placed wherever you want the sharing widget to appear. Example:
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
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:
- Add a CNAME entry in your DNS for the custom domain pointing to rpx.me.
- Log in to dashboard.janrain.com.
- Click the sharing application’s Manage Engage App button.
- On the Home page under Settings, click General Settings.
- 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.