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.

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.

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’:  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.

Domain Whitelist

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.

Custom URL Shortening

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

Sharing Methods

Provider Authenticated Share Native Share Direct Share Email
Facebook yes yes no no
Google+ no yes no yes
LinkedIn yes yes yes no
Mixi yes yes no no
Odnoklassniki no yes no no
Pinterest no yes no no
QQ yes yes no no
Reddit no yes no no
Sina Weibo no yes no no
Tumblr no yes no no
Tencent Weibo yes yes no no
Twitter yes yes yes no
VK no yes no no
Xing yes yes yes no
Yahoo no no no yes
Native email client no no no yes

Sharing Features

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 providerFormats setting.

  • 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

Twitter Cards

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.

Sharing Count

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 modifying your shareCountMin global setting or your 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:

  • Facebook
  • LinkedIn
  • Mixi
  • Pinterest
  • QQ
  • Tencent Weibo
  • Twitter
  • Xing
Scroll ↓