Table of contents
- 1. Add Connections
- 1.1. Implementation
- 1.2. Working Example
- 1.3. UI Customizations
- 2. Friend Selector
- 2.1. Working Example
- 2.2. Implementation and UI Customizations
- 2.2.1. Code Example:
- 3. Edit Connections
- 3.1. Implementation
- 3.2. UI Customizations
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.
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.
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, Twitter, Yahoo, Microsoft Messenger, LinkedIn, Myspace, Orkut, 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 socialize.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=INSERT-YOUR-APIKEY-HERE" ></script>
<script type="text/javascript">
var params=
{
enabledProviders:"facebook,myspace", // Limiting the Plugin to show only facebook and myspace 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:
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.
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, MySpace, 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, Twitter, Yahoo, Microsoft Messenger, LinkedIn, Myspace, Orkut, 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 socialize.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/socialize.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.
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, Twitter, Yahoo, Microsoft Messenger, LinkedIn, Myspace, Orkut, 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.
Comments