Social Sharing Quick Start Guide

The Social Sharing widget gives users the ability to share selected activities with their friends, through a social network, or directly to the user’s contacts using email.

The purpose of this Quick Start Guide is to implement a no-frills proof of concept of the Social Sharing Widget on a website. For a complete overview of the implementation process, see the Social Sharing Widget User Guide.

When completed, the destination website will launch a pop-up window offering to share a link, as illustrated in Figure 1.

Figure 1: Social Sharing Widget.

To configure and administer the widget, sign in to your application and use the Dashboard. In this example, you’ll design the look and feel in the Dashboard as well. If you don’t have an application, please see Creating Applications before continuing.

When adding a Social Sharing Widget to a page, you must:

Configure the Widget — Configure and design the widget using the Dashboard.
Get the Code — Add code generated in the Dashboard to the destination website.

Step 1: Configure the Widget ¶

Configure the widget through your application:

Launch your Janrain Engage application at rpxnow.com.
When presented with your Dashboard, use the Deployment menu in the top navigation bar to select Social Sharing for Web.
On the Configure Widget page, choose Sharing Widget from the drop-down menu at the top of the page.

Configure the Share Providers before other aspects of the widget, such as the appearance. The Share Providers are the Identity Providers that your widget presents to the user when sharing activities.

Share Providers require that the widget be registered with their development network before allowing sharing functionality. Click on the gear icon of the Share Provider, or drag the icon to the preview. This will open a dialog box to guide you through the process. For more information on configuration, see the Providers section of the Configure Widget page.

Figure 2: Configure Share Providers

Next, set the behavior for the widget:

Select Share and Direct Share from the Share Mode menu.
Note: The style menus are available only for Pro and Enterprise service levels. If you are a Basic or Pro user, skip to step 5.
To demonstrate how to change the style and appearance of the Widget, select the Modal Styles menu.
Drag the Border Width slider to 10. The increase in border pixels will dynamically appear in the preview window to the right.
Change the Border Color value to #0C0C0C, changing the color of the border to silver.
Depending on your service level, you may be given a choice on how you would like to save the widget. For this example, choose Save this configuration on the Engage servers. Then, click Save.

Step 2: Get the Code ¶

The application generates code to be placed on the destination website. You can also create a blank HTML file to host the code. Select Get the Code from the top navigation menu. There are two snippets of code to place:

Copy the script code and place it in the <head> of the application webpage.
Copy the <div> element, and use the tag to define what page element launches the widget.

Testing:

The Social Sharing Widget is now enabled on the website. Visit the webpage, and click the activity tagged by the code.

If successful, the Social Sharing Widget will appear. See Figure 1.

Next Steps ¶

This is a bare-bones implementation of the Social Sharing Widget. There are many additional features and customizations available to provide the user with the best possible experience. See the Social Sharing Widget User’s Guide for more information.

Adding Different Activities ¶

Now that the widget is operational, you may want to test different activities to share. Share different URLs by changing the default URL text in Step 2: Get the Code. Additionally, share images, movies, and more by using the API. Adding JavaScript from the Content API section allows even greater flexibility.

Note: Not all providers support sharing movies, music, or other types of media. Please see the Provider Sharing Support page for information on what features are supported by what provider.

To share a video named interesting.mov:

Edit the widget code in the <head> of the website.
Add the setMedia call to the area of the script marked as _ can edit below this line _.

<script type="text/javascript">
(function() {
    if (typeof window.janrain !== 'object') window.janrain = {};
    if (typeof window.janrain.settings !== 'object') window.janrain.settings = {};
    if (typeof window.janrain.settings.share !== 'object') window.janrain.settings.share = {};
    if (typeof window.janrain.settings.packages !== 'object') janrain.settings.packages = ['share'];
    else janrain.settings.packages.push('share');

    /* _______________ can edit below this line _______________ */

    janrain.settings.share.message = "";
    janrain.settings.share.title = "";
    janrain.settings.share.url = "";
    janrain.settings.share.description = "";

    janrain.settings.share.media = "http://shared_video.com/interesting.mov";

    /* _______________ can edit above this line _______________ */

    function isReady() { janrain.ready = true; };
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", isReady, false);
    } else {
        window.attachEvent('onload', isReady);
    }

    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.id = 'janrainWidgets';

    if (document.location.protocol === 'https:') {
      e.src = 'https://rpxnow.com/js/lib/<your rp name>/share_beta.js';
    } else {
      e.src = 'http://cdn.rpxnow.com/js/lib/<your rp name>/share_beta.js';
    }

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(e, s);
})();
</script>

Social Sharing Quick Start Guide

Step 1: Configure the Widget ¶

Step 2: Get the Code ¶

Next Steps ¶

Adding Different Activities ¶

Help Us Improve!

Is our documentation unclear or confusing? Help us improve.