Was this article helpful?

Additional Plugins

Last modified 10:38, 15 Sep 2014

This page introduces the following plugins:

You will find in this page guidance for integrating and customizing these plugins.

 

Add Connections

The Gigya Add Connections plugin enables establishing connections to social networks. Establishing a connection with a social network enables an on-going social interaction with that social network, which includes: retrieving information about the user and his friends, sharing content, updating a status, sending notifications, etc. A user can connect to multiple social networks. The plugin displays all the available social network' logos as options for adding connections.

AddConnectionsUI1.gif

After the user adds a connection successfully, the onConnectionAdded global event is fired. Please refer to the Events page, to learn how to handle events.
The plugin displays the connected social network as disabled marked buttons (see screenshot below). In addition, an "Edit" link appears automatically below the buttons, to allow the user to edit his connections and to disconnect. Clicking the Edit link opens the Edit Connections plugin. The Edit Connections plugin is displayed only when the user is logged in.

AddConnectionsUI.gif

 

Implementation

The API method that displays the Login plugin is: socialize.showAddConnectionsUI.

Please read the Adding Connections to Social Networks guide, which provides the best practices and a step-by-step guide for connecting users to their social network accounts in your site.

 

Working Example

Check out some of our Working Code Examples that use the Add Connections Plugin:

You may view the code, run it and view the outcome.

 

UI Customizations

The simplest way to customize the Add Connections plugin is through the usage of the Add Connections Wizard. The Wizard lets you customize the visual aspects of the Login plugin design, view, and grab the customized code. Alternatively, you may customize the plugin through the use of the socialize.showAddConnectionsUI method parameters (see the params table in the reference page).

Some of the plugin's adjustable parameters:

  • Plugin size.
  • Which social networks' buttons appear will on the plugin. The options are:  Facebook, TwitterYahoo, Microsoft MessengerLinkedIn, FourSquare, Renren, Vkontakte.
  • Buttons size.
  • Display: can be shown either as a popup dialog (default) or embedded in the application.
  • Colors: the plugin's background, frame, text, link, navigation arrow, caption background, caption text, button text.

 

Changing the Design - Code Example:

In the following example we display on screen an Add Connections plugin with modified design and settings:

<html>
<head>
<!-- Including the gigya.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/gigya.js?apikey=INSERT-YOUR-APIKEY-HERE" ></script>

<script type="text/javascript">

var params=
{
    enabledProviders:"facebook,google",  // Limiting the Plugin to show only facebook and google buttons
    headerText: "My title",  // add a title
    height: 73,                // define size
    width: 147,                
    containerID: "loginDiv",  // The Plugin will be embedded inside the application HTML
    // background color is set to gray:
    UIConfig: "<config><body><background background-color=\"#BFBFBF\"></background></body></config>" 
}

</script>
</head>
<body>
<div id="loginDiv"></div>
<script type="text/javascript">
   gigya.socialize.showAddConnectionsUI(params);
</script>
</body>
</html>

 The output of this code:

Connect_change_default.gif

 

Friend Selector

The Friends Selector plugin displays the current user's friends and lets him select one or more for application-related interaction. The plugin will present a list of confirmed friends from which the user can browse and select friends.

FriendSelectorUI-html.gif

The Friends Selector can easily be integrated with any action on your page, returning the user’s list of friends as the result.

Supported use cases:

  • The plugin allows the user to select a list of friends. The list could be mixed with friends from different social networks (Facebook, Twitter, etc.). The plugin indicates the network from where the friend originates.
  • The plugin allows the user to filter different social networks, thus displaying individually the available friends from each network to which the user is connected.
  • The plugin includes a search option.

 

Working Example

The Send Notifications demo page you will find a working example that uses the Friend Selector plugin. You may view the code, run it and view the outcome.

 

Implementation and UI Customizations

The simplest way to integrate and customize the Friend Selector plugin is through the usage of the Friend Selector Wizard. The Wizard lets you customize the visual aspects of the Friend Selector plugin design, view, and grab the customized code.
Alternatively, you may customize the plugin through the use of the socialize.showAddConnectionsUI method parameters (see the params table in the reference page).

Some of the plugin's adjustable parameters:

  • Limiting the number of friends the user may select.
  • Select which social networks are included in the plugin (the plugin will show only friends from the included social networks). The options are:  Facebook, TwitterYahoo, Microsoft MessengerLinkedIn, FourSquare, Renren, Vkontakte. By default, all social networks are included.
  • Can be shown as either as a popup dialog (default) or embedded in the application.
  • Plugin size.
  • Colors: Plugin background, frame, text, link, etc.

 

Code Example:

The following example combines both the Add Connections and the Friend Selector plugins:

<html>
<head>
<!-- Including the gigya.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/gigya.js?apikey=INSERT-YOUR-APIKEY-HERE" ></script>

</head>
<body>
<div id="loginDiv"></div>
<script type="text/javascript">
    var params =
    {
        "showTermsLink": true,
        "height": 73,
        "width": 147,
        "containerID": "loginDiv"
    }
    gigya.socialize.showAddConnectionsUI(params);
    
</script>
<div id="Div1"></div>
<script type="text/javascript">
    var params2 =
    {
        "showTermsLink": true,
        "height": 500,
        "width": 400,
        "containerID": "Div1"
    }
    gigya.socialize.showFriendSelectorUI(params2);
    
   </script>
</body>
</html>

 

Edit Connections

The Edit Connections plugin enables users to connect to additional destinations and disconnect from their existing connections.
In addition, the plugin enables users to view their basic identity information for each destination to which they are connected. The Edit Connections plugin is displayed only when the user is logged in.

EditConnectionsUI.gif

When the user hovers over a connection, they will see a link that enables them to access their installed app in each social network ("My App" link).

 

Implementation

The API method that displays the Edit Connections plugin is: socialize.showEditConnectionsUI.

The 'Edit Connections' plugin may also be opened by clicking the Edit link on the Add Connections plugin.

 

UI Customizations

Some of the plugin's adjustable parameters:

  • Plugin size.
  • Select which social networks' buttons will appear on the plugin. The options are:  Facebook, TwitterYahoo, Microsoft MessengerLinkedIn, FourSquare, Renren, Vkontakte.
    Note: if the user has logged in with an Open ID provider, then the component will also show the provider's icon, enabling the user to log out.
  • Can be shown as either as a popup dialog (default) or embedded in the application.
  • Colors: Plugin background, frame, text, link, caption background, caption text, button text.
  • “Terms” link: show or hide.
Was this article helpful?
Pages that link here
Page statistics
7138 view(s) and 8 edit(s)
Social share
Share this page?

Tags

This page has no custom tags.

Comments

You must to post a comment.

Attachments