Additional Plugins

Skip to end of metadata
Go to start of metadata

 

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:

 

 

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:

  • Add-on size.
  • Which social networks' buttons appear will on the add-on. The options are: 
    Facebook, TwitterYahoo, MicrosoftLinkedIn (Note: messenger has been replaced by microsoft, however, for backward compatibility, either can be used) 
    , FourSquare, Renren, Vkontakte.
  • Buttons size.
  • Display: can be shown either as a popup dialog (default) or embedded in the application.
  • Colors: the add-on'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 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:

 

 

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:

  • Add-on size.
  • Select which social networks' buttons will appear on the add-on. The options are: 
    Facebook, TwitterYahoo, MicrosoftLinkedIn (Note: messenger has been replaced by microsoft, however, for backward compatibility, either can be used) 
    , 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: add-on background, frame, text, link, caption background, caption text, button text.
  • “Terms” link: show or hide.