Was this article helpful?

socialize.showAddConnectionsUI

Last modified 11:38, 15 Sep 2014

Description

Displays an "Add Connections" plugin, which enables establishing connections to social networks. The plugin presents the available social network logos as connect options.
Currently the plugin displays, by default, the logos of the following social networks: Facebook, TwitterYahoo, Microsoft MessengerLinkedIn, InstagramGoogle+FourSquare, Renren, Kaixin, Vkontakte, Odnoklassniki.

You may customize this list using the requiredCapabilities parameter or by using the enabledProviders and disabledProviders parameters. You may also set the requiredCapabilities parameter to login in order to add more providers such as Google and AOL. 
The Add Connections plugin may be embedded in the page or displayed as a popup at the center of the page.

Connecting to a Social Network

When a user clicks a social network logo, a small dialog box will open asking for the user name and password and then the window will close.
This will connect the user to the specific social network. Technically speaking a connection is equivalent to an established session with the social network and it may expire according to the social network policy. A valid and active connection will give your site access to the user's social graph and ability to perform various social actions, such as publishing a newsfeed report to the connected social network.  Some providers, such as Facebook, will require that the user give permission to access their data on the first login. Yahoo will require permission for every login.

 

An example of this plugin can be viewed on the Get Friends Info example page.

 

Note:
If the user is logged into the Gigya service:

  • The Gigya service will automatically link between the connected social network account and the user's site account. As a consequence, from now on the user will be able to log into his site account using this social network.

  • The Gigya service will associate the connection with the user's account. This means that if the user logs in on different computers using the same account, the connection will be automatically available.

If the user is not logged in, the connection will be associated with the current user on the current computer using a cookie.

Plugin's Default Design:

ConnectUI.gif

 

The plugin's design is customizable through the use of the parameters listed below.

 

Note: If you plan on integrating the Add Connections plugin, we highly recommend reading the Adding Connections page, which is a step-by-step guide for integrating the Add Connections plugin in your site. 

 

Syntax

gigya.socialize.showAddConnectionsUI(params)

 

 

Method Parameters

The following table lists the params object members:

Required Name Type Description
Optional width integer Determines the width you desire for the plugin.
  height integer Determines the height you desire for the plugin.

containerID string An ID of a <DIV> element on the page in which you want to display the plugin.
If this parameter is not provided then the plugin will be displayed as a popup at the center of the page. Please refer to Dialog or Embedded section for extended explanation.
  captionText string Sets the caption text. This parameter is relevant only when the plugin is in a popup mode (i.e. if the containerID/container parameter is not provided). If the plugin is embedded in the page then the caption is not presented.
  context object A reference to a developer created object that will be passed back unchanged to the event handlers of any event triggered as a consequence of using this plugin. The context object will be passed as one of the fields of the eventObj received by the event handler (see extended explanation in the "Plugin Events" and in the "Global Event Triggered" sections below).
  actionAttributes JSON object In Gamification your users receive points for actions they perform on your site, in this case adding a connection grants the user points. Action Attributes may be used to annotate actions with additional information, such as the section of the web site that generated the action. If you set here the actionAttributes, each time a user adds a connection, the action also receives an attribute, for example "tv-show":"glee", which can mean that the action was performed on the "Glee" page of the site. 
actionAttributes contain a JSON object comprised of a series of attribute keys (categories) with associated values. You can also use a generic "tags" key. No more than three values can be given, they can be with a single key or each have their own key. For more information see Variants and Action Attributes. Action attributes are later used to filter GM Plugins by a certain attribute.
Example:  {"<attribute key1>": ["<attribute value1>", "<attribute value2>"],  "<attribute key2>": "<attribute value3>" }
  authFlow string Using this parameter you may specify that the adding connection flow will use page redirects instead of using a popup. This gives a solution for environments where popups are unavailable (e.g. mobile web view controls). This parameter accepts two values:
  • "popup" (default)
  • "redirect" - the adding connection flow uses page redirects. When the adding connection process completes successfully, the user is redirected to the URL specified by the redirectURL parameter (see below). If the redirectURL parameter is not specified, the user will be redirected to the original page from which the adding connection process started.
    Notes: This option will only work if CNAME is configured.
    When using this mode, the onConnectionAdded event is not fired .
  cid string A string of maximum 100 characters length. The CID sets categories for transactions that can be used later for filtering reports generated by Gigya in the "Context ID" combo box. The CID allows you to associate the report information with your own internal data. For example, to identify a specific widget or page on your site/application. You should not define more than 100 different context IDs.
Note: the value of this parameter overrides the value of the identical parameter in the global configuration object.
  disabledProviders string A comma delimited list of providers that should not be displayed on this plugin. Valid provider names include: 'facebook', 'twitter', 'yahoo', 'messenger', 'linkedin''instagram', 'googleplus', 'foursquare', 'renren', 'kaixin', 'vkontakte', 'mixi', 'yahoojapan', 'odnoklassniki'.
For example, if you would like this plugin to show all providers but LinkedIn and Twitter, define: disabledProviders:"linkedin,twitter".
Note: the value of this parameter overrides the value of the identical parameter in the global configuration object.
  enabledProviders string A comma delimited list of providers that should be displayed on this plugin. Valid provider names include: 'facebook', 'twitter', 'yahoo', 'messenger', 'linkedin', 'instagram', 'googleplus', 'foursquare', 'renren', 'kaixin', 'vkontakte', 'mixi', 'yahoojapan', 'odnoklassniki'.
For example, if you would like this plugin to show only the icons of Facebook and Twitter, define: enabledProviders:"facebook,twitter".
Note: the value of this parameter overrides the value of the identical parameter in the global configuration object.
  extraFields string This parameter accepts a comma-separated list of additional data fields to retrieve. The current valid values are: languages, address, phones, education, honors, publications, patents, certifications, professionalHeadline, bio, industry, specialties, work, skills, religion, politicalView, interestedIn, relationshipStatus, hometown, favorites, likes, followersCount, followingCount, username, locale, verified, irank, timezone, and samlData.

Note: Before your application can retrieve Facebook data, the user must grant your application with access. Please make sure you have checked the check boxes that enable retrieving the relevant fields from Facebook in the Permissions page on Gigya's website. You may find more information in the Facebook Permissions section of our guide.

  forceAuthentication Boolean The default value of this parameter is 'false'. If set to 'true', the user will be forced to provide her social network credentials during the login, even if she is already connected to the social network. This parameter is currently supported by Facebook, Twitter, Renren, and LinkedIn. Please note that the behavior of the various social networks may be slightly different: Facebook expects the current user to enter their password, and will not accept a different user name. Other networks prompt the user to re-authorize the application or allow a different user to log in. 
  headerText string Sets the plugin's header text.
  redirectURL string This parameter is relevant only if the authFlow parameter is set to "redirect" (see above). Set this parameter with a URL to which to redirect the user when they log-in with the adding connection process. Users who have already logged-in with another connection will not be redirected.
The following additional parameters are appended to the URL string:
UID, UIDSig, timestamp, loginProvider, loginProviderUID, nickname, photoURL, thumbnailURL, firstName, lastName, gender, birthDay, birthMonth, birthYear, email, country, state, city, zip, profileURL, proxiedEmail, provider.
These parameters are equivalent to the User object fields. Please find the parameters' description in the User object reference page.
If the redirectURL parameter is provided the callback function is not called and the onConnectionAdded event is not fired.
Note: we strongly advise providing a secure HTTPS URL.
  requiredCapabilities string A comma separated list of any of the following capabilities: Login, Notifications, Actions, Friends, Status, Photos, Contacts. Only providers that are available and support all the required capabilities will be visible.
The default required capability is: 'friends'.
You can set the requiredCapabilities parameter to login in order to add more providers such as Google and AOL. 
  sessionExpiration integer This parameter defines the time in seconds that Gigya should keep the social network session valid for the user. To end the session when the browser closes, please assign the value '0'. If this parameter is not specified, the session will be valid forever.
  showEditLink Boolean Show or hide the "Edit" link. Clicking the "Edit" link opens a popup dialog that enables the user to edit his connection status to each of the social networks. Note: The "Edit" link only appears when connected to a social network. 
  showTermsLink Boolean Show or hide the "Terms" link. Clicking the "Terms" link opens Gigya's Legal Notices page.
  showTooltips Boolean This parameter's default value is 'true'. When set to 'true', a tooltip will be displayed when mouse hover over a social network icon. The tooltip presents the social network's full name.
  showWhatsThis Boolean Indicates whether to show or hide a "What's this" link. When the user rolls over the link, a hint will pop up describing the Add Connection plugin. By default the value of this parameter is 'false'. In order for the "What's this" link to appear, you must specify a width of at least 150px and a height of at least 100px on the UI component.
addConnection.gif
  UIConfig string (XML) An XML string describing changes to the default design of the plugin.
For example:
UIConfig:"<config><body><texts color=\"#00006D\"></texts><background background-color=\"#CACACA\" frame-color=\"#2424FF\"></background></body></config>";
For more information contact us by filling in a support form on our site. You can also access the support page by clicking "Support" on the upper menu of Gigya's site.
  whatsThisText string This parameter is relevant only if the showWhatsThis parameter is set to 'true'. Using this parameter you may define the text that will appear in the pop-up hint (see screenshot above). The default text is: "Add more connections to your account.".
 Events Registration Parameters  
  onLoad function ref A reference to an event handler function that will be called when the plugin has finished drawing itself.
  onError function ref A reference to an event handler function that will be called when an error occurs.
  onClose function ref A reference to an event handler function that will be called in one of the following scenarios:
  • If the plugin is displayed as a popup the event will be fired when the plugin is closing.
  • If the plugin is embedded in page the event will be fired when the user clicks a button that indicates the dialog should be closed. In this case the dialog will not hide itself automatically.
  onConnectionAdded function
ref
A reference to a function that is called when the user is successfully connected to a provider.
  onButtonClicked function
ref
A reference to an event handler function that will be called when one of the plugin's buttons is clicked.
  useHTML Boolean Deprecated. The Add Connections plugin is available in both Flash and HTML versions. By default, the HTML version is used. You may override the default behavior. Setting this parameter with the value 'false', will force Gigya to use the Flash version.

customButton Object

A JSON-encoded object representing a single custom button:

Required Field Name Type Description
Required providerName string The provider name to display in the login popup window and to remember as the last login. 
  iconURL string The URL of the provider icon to display on the button (the icon will be resized to fit the selected size).
  lastLoginIconURL string The URL of the provider icon to display on the button when this provider was the last one used for login.
Optional type string Can be either "OpenID" or "eventOnly". The default value is "eventOnly", which means that only an onButtonClicked event will be fired.
  position integer The index of the button within the plugin. The regular provider buttons should be organized to fill the gaps between custom buttons. The default is 1.
  logoURL string  The URL of the provider to display in the login dialog.
  openIDURL string A URL template representing an OpenID user where $USERNAME$ represents the placeholder for the username. For example: http://aol.com$USERNAME$. When this parameter is provided it should be passed on to the server login call. Required if type='openID'.

 

Plugin Events

An Event Handler is a JavaScript function with the following signature:

functionName(eventObj)

The single argument, eventObj, contains information about the event and has different fields for different events.

The following tables specify the list of fields available in the eventObj for each event:

 

onLoad Event Data

Field Type Description
eventName string The name of the event.
sourcestringThe source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g. 'showLoginUI', 'showCommentsUI', etc.
context object The context object passed by the application as parameter to the API method, or null if no context object has been passed.

 

onError Event Data

Field Type Description
eventName string The name of the event.
sourcestringThe source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g. 'showLoginUI', 'showCommentsUI', etc.
context object The context object passed by the application as parameter to the API method, or null if no context object has been passed.
errorCode integer The result code of the operation. Code '0' indicates success, any other number indicates failure. For a complete list of error codes, see the Error Codes table.
errorMessage string A short textual description of an error, associated with the errorCode, for logging purposes.
errorDetails string This field will contain the exception info, if available.
 

 

onClose Event Data

Field Type Description
eventName string The name of the event.
sourcestringThe source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g. 'showLoginUI', 'showCommentsUI', etc.
context object The context object passed by the application as parameter to the API method, or null if no context object has been passed.

 

onConnectionAdded Event Data

Field Type Description
eventName string The name of the event: 'connectionAdded'.
source string The source plugin that generated this event. The value of this field is the name of the plugin's API method, in this case 'showAddConnectionUI'.
Note: this field will not be available if the source of this event is not a plugin (e.g. if the source is a socialize.addConnection API call)
context object The context object passed as a parameter to the plugin/method that triggered this event, or null if no object was passed.
user User object User object with updated information for the current user.
provider string The name of the social network to which the user connected.
 

 

onButtonClicked Event Data

Field Type Description
eventName string The name of the event.
sourcestringThe source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g. 'showLoginUI', 'showCommentsUI', etc.
context object The context object passed by the application as parameter to the API method, or null if no context object has been passed.
button customButtons object The object representing the custom button that has been clicked. If the clicked button is not a custom button, no CustomButton object will be returned.

 

Global Event Triggered

By using this plugin, the following global event may be triggered: onConnectionAddedand - indirectly, if the 'Edit' link is displayed and the user opens the Edit Connections plugin, onConnectionRemoved might also be triggered.

The onLogin event may be fired if the connectWithoutLoginBehavior parameter is used. Read more in Add Connections without Logging-in.
To register an event handler use the socialize.addEventHandlers API method. Please refer to the onConnectionAdded event data. Refer to the Events page in the Developer's Guide - to learn more about how to handle events generated by the Gigya service.

Code Sample

var context = {
	msg:'This is my params.context.msg'
};
	
var params = { 
    captionText:'This is my caption text',
    headerText:'This is my header content',
    showTermsLink:false,
    showEditLink:false,
    context:context
};

function myOnClose(evt) {
	evt['msg'] = 'The plugin has just been closed';
	var msg = 'Event name is : ' + evt.eventName +'\n';
	msg+= 'evt[\'msg\'] is : ' + evt['msg']+'\n';
	msg+= 'context.msg is : ' + evt['context']['msg'];            
	alert(msg);   
}

params['onClose'] = myOnClose;

gigya.socialize.showAddConnectionsUI(params);

Notes:
  • This sample is not meant to be fully functional code. For brevity's sake, only the code required for demonstrating the API call itself is presented.
  • To run the code on your own domain, add your Gigya API key to the socialize.js URL. A Gigya API key can be obtained on the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API key.

Was this article helpful?
Pages that link here
Page statistics
534 view(s) and 2 edit(s)
Social share
Share this page?

Tags

This page has no custom tags.
This page has no classifications.

Comments

You must to post a comment.

Attachments