Configure Widget

The first step in deploying the Social Sharing Widget is to design how it appears on the web page, and to select which Identity Providers the user will be able to choose from.

The Dashboard provides several tools for making the widget look and act as you desire. A live preview displays any changes made to the settings in one of three formats: Landscape, Portrait, and Optimized for Mobile. These are the formats the widget will appear on the website, depending on the context. You need to design the widget only once, and the format will change automatically to one of these three formats when needed.

Once designed in the Dashboard, the finished widget will open modally as a pop-up, overlaying the website.

Using the Widget ¶

The activity to be shared is included in the code of the widget. When sharing a video, for example, the url of the file to be shared is defined in the javascript with the setMedia API call.

When a user clicks on the <div> element, also generated and added to the webpage, a pop-up window launches in which they can choose where to share the activity, and what to say about it.

Note: URLs are automatically shortened when shared using Janrain’s rpx.me service. If the URL is already shortened, it will be reformatted using the rpx.me domain.

Designing the Widget with the Dashboard ¶

If you haven’t logged into your application, and navigated to the Share Widget, do so now. You will arrive on the Configure Widget page, as shown in Figure 1.

Figure 1: Configure Widget Page

As shown on the menu bar on the left, there are six steps to creating the widget. The Share Providers section must be configured first, to inform the rest of the configuration selections.

You can toggle the live display view by clicking the Preview icons on the top right of the window.

Share Mode ¶

The Share Mode menu defines the behavior of the Social Sharing Widget. Your widget may allow three different types of sharing:

• Share + Direct Share — Allows a user to share content with everyone on a social network (for example: tweeting), or with specific friends and contacts (for example: direct messages, email).
• Share Only — Allows a user to share content with everyone on a social network (for example: tweeting).
• Direct Share Only — Allows a user to select specific contacts to share content with directly (for example: direct messages, email)

Select which mode the widget will allow from the menu (see Figure 2).

Note: Not all providers support all of the features of the Share Widget. See Provider Sharing Support for more information.

Email Providers ¶

Google, Google+, and Yahoo! require that your site be granted additional permissions before allowing sharing by email. Click on the gear icon, or drag the Provider to the preview to launch a dialog box that will guide you through the process. For Google, you must use the Dashboard’s Provider Configuration page to enable the Contacts and Google Mail settings to use sharing with Google through email.

In this release, we support email sharing for Google, Google+, and Yahoo! only.

Share Providers ¶

Use this menu to select which providers will be available for users. All the Identity Providers require that sites sharing content sign up with their developers network. Clicking the gear icon, or dragging the Provider to the preview will launch a dialog box to guide you through the entire process. Once completed, the Identity Provider gear icon will turn green, and you can add it as a choice in the widget.

Providers may already be configured if Engage is set up for your application.

Modal Styles ¶

Available to:  

The Modal Styles menu alters how the widget appears when it pops up over the original website. There are several settings to choose from:

Note: Clicking the Reset Styles button at the bottom of the menu returns all of these values to their default state.

Body Styles ¶

Available to:  

The Body Styles menu offers settings that change the appearance of the body of the widget.

Note: Clicking the Reset Styles button at the bottom of the menu returns all of these values to their default state.

Element Styles ¶

Available to:  

The Element Styles menu offers settings that change the look and feel of the buttons and other elements used in the widget.

Note: Clicking the Reset Styles button at the bottom of the menu returns all of these values to their default state.

Saving the Configuration ¶

Available to:   

When your configuration is complete, click the Save button at the bottom. This saves the configuration of the widget on Janrain’s servers. You can make changes by revisiting the Configure Widget screen and re-saving.

For Service level:   

If your application has a Pro or Enterprise level, an option box appears next to the Save/Generate the Code button. This gives you two options to choose before saving your configuration.

• Save this configuration on the Engage servers — This allows for a single, central configuration located on the Janrain Engage servers. Changes made on the dashboard automatically propagate to deployed widgets on the client websites. Click Save.
• Embed this configuration on the JavaScript code — The settings for the configuration are included in the generated code as JavaScript, which can be modified independently of the Dashboard. This is useful for maintaining multiple widgets with different configurations. Click Generate the Code.

Figure 3: Select Configuration

Next Step ¶

Once you have saved your widget, continue on to Get the Code.