Social Sharing Overview
Social Sharing v3 supports a variety of ways to share information across social networks. By adding a simple, streamlined bar of providers, users may share a URL within a social network, directly with friends on the network, or via email. Sharing may be configured to use the Janrain UI, the social provider’s native UI, or a mixture of both. Each provider supports different sharing methods and features, so refer to the following sections for detailed information on the sharing configurations available to each provider.
Social Sharing requires a Social Login application. If you are already utilizing a Social Login solution, you may use the same application for sharing. See a demo of Social Sharing.
Authenticated Share (Broadcast)
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 Janrain UI and the provider’s sharing APIs. This functionality requires the provider to be configured with your Social Login application.
Native Share (Broadcast)
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 Janrain sharing interface or require the user to authorize the application to share. Note that native sharing will not be reported to the Janrain analytics dashboard.
Direct Share (Contact)
A Direct Share is an activity shared directly to another user via the social provider’s existing messaging system. Direct sharing may be supported for both authenticated and native shares depending on the provider.
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.
Implementing Social 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’: Mail, Email, and Contacts.
Update Application Settings
From the Settings section on your application home page, click domains.
*.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
- 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:
<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’stag. 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
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
Customize Provider Icons
You may configure your own social provider icons with 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
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
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.
Sharing Support by Provider
|Provider||Authenticated Share||Native Share||Direct Share|
|Native email client||no||no||no||yes|
A social share may contain the following features depending on what each
identity provider supports for each sharing method. These features may be set
on a per provider basis using the
- Message – The comment that will be pre-populated into the sharing message text box; may be replaced with user-generated content.
- Title – The title/subject of the shared content.
- Description – The description of the shared content.
- URL – The link associated with the shared content.
- Image – Image associated with the shared content.
- Media – Additional media such as video or audio files associated with the shared content.
- ActionLink – A 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.
|Provider and Share Method||Message||Title||URL||Description||Image||Media|
|Facebook (Broadcast Share)||yes||yes||yes||yes||yes||yes|
|LinkedIn (Broadcast Share)||yes||yes||yes||yes||yes||no|
|LinkedIn (Direct Share)||yes||yes||no||no||no||no|
|Mixi (Broadcast Share)||yes||yes||no||no||yes||yes|
|Mixi (Direct Share)||yes||yes||no||no||no||no|
|QQ (Broadcast Share)||yes||yes||yes||yes||yes||yes|
|Tencent Weibo (Broadcast Share)||yes||no||no||no||yes||yes|
|Twitter (Broadcast Share)||yes||no||no||no||no||no|
|Twitter (Direct Share)||yes||no||no||no||no||no|
|Xing (Broadcast Share)||yes||no||no||no||no||no|
|Xing (Direct Share)||yes||yes||no||no||no||no|
Social sharing supports Twitter Cards. When Twitter Card code is enabled on a site, a share via Twitter will include the Twitter Card metadata, which will display expanded information such as title, summary, or image data.
The Social Sharing widget will display a share count by default. It can be
removed entirely or made to appear after a minimum threshold is reached by
shareCountMin global setting
share-count-min instance setting.
Not all providers support the share count for any sharing method. Native shares will not be included in the share count at all since they do not require a user to interact with the Janrain application. The total share count will include any shares completed through the following providers when using the Janrain UI:
- Tencent Weibo