This page introduces the following add-ons: Add Connections, Friend Selector, Edit Connections

 

This page introduces the following add-ons:

Read the appropriate sections for instructions for integrating and customizing these add-ons.

 

Add Connections

The Add Connections add-on enables you to establish connections to social networks. Establishing a connection with a social network enables you to perform social interaction with that social network - including retrieving information about the user and the user's friends, sharing content, updating the user's status, sending notifications, etc. A user can connect to multiple social networks. The add-on displays the logos of the various social networks and allows the user to select which one they want to connect to:

 

<div id="divConnect0" style="margin: 0px auto;"></div>
        <script type="text/javascript">
	        // show 'Add Connections' add-on in "divConnect"
	        gigya.socialize.showAddConnectionsUI({ 
				height:65
				,width:300
				,showTermsLink:false // remove 'Terms' link
				, hideGigyaLink: true // remove 'Gigya' link
                , requiredCapabilities: "login"//yahoo does not suppor sharing
				, containerID: 'divConnect0' // The component will embed itself inside the divConnect Div
				, shortURLs: 'never'
				, disabledProviders: 'wechat'
			});
        </script>

 

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.

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.

 

Implementation

The API method that displays the Login add-on 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 add-on:

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

 

UI Customizations

The simplest way to customize the Add Connections add-on is through the usage of the Add Connections Wizard. The Wizard lets you customize the visual aspects of the Login 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:

 

Changing the Design - Code Example

In the following example we display on screen an Add Connections add-on 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 add-on to show only facebook and google buttons
    headerText: "My title",  // add a title
    height: 73,                // define size
    width: 147,                
    containerID: "loginDiv",  // 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>" 
};
</script>

</head>
<body>
<div id="loginDiv"></div>

<script type="text/javascript">
   gigya.socialize.showAddConnectionsUI(params);
</script>

</body>
</html>

 

 The output of this code:

 

<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>

 

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.

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 add-on is: socialize.showEditConnectionsUI.

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

 

UI Customizations

Some of the add-on's adjustable parameters: