You are not logged in. Log in | Register

Edit
page

New
page

Print
page

Page last modified 16:28, 16 Feb 2010 by shirly

Page Notifications Off

Redirect

Gigya's Developer Documentation > Developer's Guide > Advanced Customizations

Advanced Customizations

From $1

1. Using Facebook Connect
1. 1.1. Implementation
2. Custom Network Icons
1. 2.1. Implementation
  1. 2.1.1. Step 1 - Create a SWF file which contains your custom icons
    1. 2.1.1.1. Adobe Flash:
    2. 2.1.1.2. FlashDevelop:
  2. 2.1.2. Step 2 - Update the UI for the Login or Connect Widget
  3. 2.1.3. Last Logged-in Icons
2. 2.2. Running Example:
  1. 2.2.1. The Example Code:
  2. 2.2.2. The CustomButtons.swf Source

This chapter discusses the following subjects:

1. Using Facebook Connect

2. Custom Network Icons

3. Languages Support

4. Loading GS script Dynamically

Using Facebook Connect

Gigya Socialize supports using the Facebook Connect user interface as the login mechanism or as a method for connecting users to their Facebook accounts.
There are several advantages to using Facebook Connect. Facebook Connect optimizes the user flow by combining authentication and application authorization in one dialog - thus providing an improved user experience and increasing conversion.

Note: the Facebook Connect feature is not supported in ActionScript environment.

Implementation

To start using Facebook Connect, please perform the following steps:

Facebook External Application - Facebook Connect Settings:
During your Gigya Setup process, your were instructed to open an external application in Facebook. Please make sure you have followed steps 18-20 and have configured the Facebook Connect Settings:
Please make sure you enabled wall updates in Facebook while setting up Gigya Socialize .
Add the useFacebookConnect parameter to the params object which is passed to the relevant API method and assign the parameter with the value "true".

For example:
```
var params =  
{ 
   ...
   useFacebookConnect: 'true'   
}  

gigya.services.socialize.showLoginUI(conf, params); 
```
The API methods that support the useFacebookConnect parameter are:

Note: If you use the Widget Setup Wizards to integrate Gigya Socialize's Widgets in your website, Facebook Connect will be displayed by default. The reason for this behavior is - since the code generated by the Widget Setup Wizards includes the useFacebookConnect parameter by default.

Custom Network Icons

Gigya socialize enables replacing the icons of the network buttons in the Login and Connect Widgets.

The following is an example shows the Login Widget with both the MySpace and the Facebook icons replaced (see also running example below):

Implementation

To implement, please follow these steps:

Step 1 - Create a SWF file which contains your custom icons

Adobe Flash:

Create a new AS3 FLA.
Add your custom social network icons to the library as MovieClips (CTRL+F8). Check the "Export for ActionScript" checkbox.
For each social network icon - set the movie clip identifier to be: library.WFSIcons.SN.btn[Social-network-name]. For example: library.WFSIcons.SN.btnFacebook, library.WFSIcons.SN.btnMyspace, etc.
Change the "Publish Settings": under File > Publish Settings > Flash Tab, set the "Local Playback Security" parameter to be Access network only.
Add the following lines of code to the main "Actions - Frame":
```
Security.allowDomain("*");
Security.allowInsecureDomain("*");
```
Build the SWF and host it on a server.

FlashDevelop:

Create a new AS3 project.
Add your custom icons to the project as "Library Assets".
For each social network icon - set the identifier to be: library.WFSIcons.SN.btn[Social-network-name]. For example: library.WFSIcons.SN.btnFacebook, library.WFSIcons.SN.btnMyspace, etc.
Add the following lines of code to the main method of the Main class :
```
Security.allowDomain("*");
Security.allowInsecureDomain("*");
```
Build the SWF and host it on a server.

Step 2 - Update the UI for the Login or Connect Widget

Add the parameter SNButtonsURL to the params object which is passed to showLoginUI() or showConnectUI(). The parameter should be set with the URL of the SWF file that you created in step 1.

For example:

gigya.services.socialize.showLoginUI(conf,{SNButtonsURL: 'http://wikifiles.gigya.com/Socialize/CustomButtons.swf' });

Last Logged-in Icons

The Login Widget give an indication of the last provider the user was logged into, so as to provide an improved user experience. The Widget will display the specific provider's icon first (the position will precede the rest of the icons) and will display an alternative highlighted icon.

You may provide resources and specify your custom "Last Logged-in" highlighted icons:

1. Add your social network highlighted icons to the library as MovieClips.

2. For each social network highlighted icon - set the movie clip identifier to be: library.WFSIcons.SN.btn[Social-network-name].LastLogin. For example: library.WFSIcons.SN.btnFacebook.LastLogin, library.WFSIcons.SN.btnMyspace.LastLogin, etc.

Running Example:

<html>
<head>
<!-- including the socialize.js script -->
<SCRIPT type="text/javascript" lang="javascript" 
  src="http://cdn.gigya.com/JS/socialize.js?apikey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N">
</SCRIPT>
<script type="text/javascript">
var conf =
{
    APIKey: "2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N"
}

var params =
{
    // set the SNButtonsURL parameter with the URL of the SWF file containing the alternative icons:
    SNButtonsURL: 'http://wikifiles.gigya.com/Socialize/CustomButtons.swf'
}
</script>
</head>
<body>
<div id="loginDiv"></div>
<script type="text/javascript">
    gigya.services.socialize.showLoginUI(conf, params);
</script>
</body>
</html>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="383" height="269" applicationComplete="init()">
	<mx:Canvas x="36" y="56" id="loginCanvas" width="325" height="200">
	</mx:Canvas>
	<mx:Script>
		<![CDATA[

			private var conf:Object = { 
				// gigya key
			        APIKey: '2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N'
			}	

			// This method is executed on applicationComplete				
			private function init():void {			
				// Initialize the "mcRoot" attribute of the conf object - should refer to the root of the flash container.
				this.conf.mcRoot=this.root;
				
				// Load socialize service
				var loadParams:Object = {
				    services:'socialize',
				    callback:onGigyaInit
				}
				gigya.load(conf,loadParams);				
			}
			
			// Wait for the load to complete and handle failures/success
			private function onGigyaInit(response:*):void {
			    if (response.hadError) {
			        // handle failure
					trace('An error has occurred while attempting to load Socialize service');
			    } else {					
					showLoginUI();
				}
			}
			
			private function showLoginUI(): void {
				// Define parameters object:
				var params:Object =
				{				    				    
				    // set the SNButtonsURL parameter with the URL of the SWF file containing the alternative icons.
				    SNButtonsURL: 'http://wikifiles.gigya.com/Socialize/CustomButtons.swf'				    				  
				};
	   
			    // Call the Socialize API method - showLoginUI:
			    gigya.services.socialize.showLoginUI(conf, params);
			}			
			
		]]>
	</mx:Script>
	
</mx:Application>

Note:
In order to make this code work in your environment, please:

Click the "Copy sample code" (link located above code) - This will open a popup window with a text version of the code, which you may copy.
The API key in the sample will only work on http://localhost/...
To load the page from your domain, modify the value of the "APIKey" field in the code, to your own Gigya API Key. A Gigya API Key can be obtained on the Site Setup page on Gigya's website. Please make sure that the domain you are loading the page from is the same domain name that you used for generating the API Key.

The CustomButtons.swf Source

You may download here the FLA containing the custom icons which we use in the running example (the source of CustomButtons.swf).

< Back to 'Server Side API' | Next to 'Loading GS Script Dynamically' >

Retrieved from "http://wiki.gigya.com/020_Developer_Guide/90_Advanced_Customizations"

Tags:

Edit tags

Files (0)

Advanced Customizations

From $1

Table of contents

Using Facebook Connect

Implementation

Custom Network Icons

Implementation

Step 1 - Create a SWF file which contains your custom icons

Adobe Flash:

FlashDevelop:

Step 2 - Update the UI for the Login or Connect Widget

Last Logged-in Icons

Running Example:

The Example Code:

The CustomButtons.swf Source

Table of contents

Recent pages

Advanced Customizations

From $1

Table of contents

Using Facebook Connect

Implementation

Custom Network Icons

Implementation

Step 1 - Create a SWF file which contains your custom icons

Adobe Flash:

FlashDevelop:

Step 2 - Update the UI for the Login or Connect Widget

Last Logged-in Icons

Running Example:

The Example Code:

The CustomButtons.swf Source

Table of contents