Page History

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Social networks which have been connected to are displayed as disabled buttons with a checkmark (see screenshow below). In addition, an "Edit" link appears automatically below the buttons, to allow the user to edit their connections and to disconnect. Clicking the Edit link opens the Edit Connections add-on. The Edit Connections add-on is displayed only when the user is logged in.

...

HTML
<div id="loginDiv3" style="margin: 0px auto;"></div>
<script type="text/javascript">
var params = {
    enabledProviders:"facebook,google",  // Limiting the add-on to show only facebook and google buttons
    headerText: "My title",  // add a title
    height: 73,                // define size
    width: 147,
	hideGigyaLink: true,             
    containerID: "loginDiv3",  // The add-on will be embedded inside the application HTML
    // background color is set to gray:
    UIConfig: "<config><body><background background-color=\"#BFBFBF\"></background></body></config>" 
};
gigya.socialize.showAddConnectionsUI(params);
</script>

...

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

Image Removed

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 add-on allows the user to select a list of friends. The list could be mixed with friends from different social networks (Facebook, Twitter, etc.). The add-on indicates the network from where the friend originates.
  • The add-on allows the user to filter different social networks, thus displaying individually the available friends from each network to which the user is connected.
  • The add-on includes a search option.

 

Working Example

The Send Notifications demo page you will find a working example that uses the Friend Selector add-on. 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 add-on is through the usage of the Friend Selector Wizard. The Wizard lets you customize the visual aspects of the Friend Selector add-on design, view, and grab the customized code.
Alternatively, you may customize the add-on through the use of the socialize.showAddConnectionsUI method parameters (see the params table in the reference page).

Some of the add-on's adjustable parameters:

...

...

 

Code Example

The following example combines both the Add Connections and the Friend Selector add-ons:

Code Block
languagejs
linenumberstrue
<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>
<hr />
<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>

 

The output of the above code:

HTML
<div id="loginDiv9" style="margin: 0px auto;"></div>
<script type="text/javascript">
    var params = {
        "showTermsLink": true,
        "height": 73,
        "width": 147,
hideGigyaLink: true,
        "containerID": "loginDiv9"
    };
    gigya.socialize.showAddConnectionsUI(params); 
</script>
<hr />
<div id="Div19" style="margin: 0px auto;"></div>
<script type="text/javascript">
    var params2 = {
        "showTermsLink": true,
        "height": 500,
        "width": 400,
hideGigyaLink: true,
        "containerID": "Div19"
    };
    gigya.socialize.showFriendSelectorUI(params2);
   </script>

 

Edit Connections

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

...