Was this article helpful?

Advanced Customizations and Localization

Last modified 05:44, 13 May 2014

This chapter explains the following subjects:

 

Language Support

The Gigya platform supports localization. Gigya's default language is English. You may change the language to one of the supported languages by assigning a string language code to the lang field of the global configuration object.

For Example:

<script type="text/javascript" src="http://cdn.gigya.com/js/gigya.js?apiKey=INSERT-YOUR-APIKEY-HERE">
{
  lang: "da"  // This will change Gigya's language to Danish!
}
</script>

  

Language Language Code
English "en" (default)
Arabic "ar"
Catalan "ca"
Chinese "zh-cn"
Chinese (Hong Kong) "zh-hk"
Chinese (Taiwan) "zh-tw'
Czech "cs"
Danish "da"
Dutch "nl"
Dutch Informal "nl-inf"
Finnish "fi"
French "fr"
French Informal "fr-inf"
German "de"
German Informal "de-inf"
Greek "el"
Hebrew "he"
Hungarian "hu"
Indonesian "id"
Italian "it"
Japanese "ja"
Korean "ko"
Malay "ms"
Norwegian "no"
Persian (Farsi) "fa"
Polish "pl"
Portuguese "pt"
Portuguese (Brazil) "pt-br"
Romanian "ro"
Russian "ru"
Slovenian "sl"
Spanish "es"
Spanish Informal "es-inf"
Spanish (Lat-Am) "es-mx"
Swedish "sv"
Tagalog (Philippines) "tl"
Thai "th"
Turkish "tr"
Ukrainian "uk"
Vietnamese "vi"

 

Note: to learn how to define and use the global configuration object, please refer to Gigya Basics section.

 

Localization Support for 3rd Party Plugins

Most of Gigya's plugins support localization by settings the lang parameter in the global configuration object, as described in the previous section. However, for some 3rd party plugins, such as Facebook's Like button, you need to be set the parameter before the plugin is loaded. In such cases, the language needs to be set in the socialize JS URL, which is loaded before the plugin's parameters are initiated.
To support localization for 3rd party plugins, including Facebook's Like button, add a new query string to the socialize JS file called lang, with the code of the desired language. The format of the lang query string should be a 2-letter language code with a 2-letter country code, separated by a hyphen:

For Example:

<script type="text/javascript" 
src="http://cdn.gigya.com/js/gigya.js?apiKey=2_PJyEzhzTt8qij6EkBRgVKbyktNXXl939JIg8NpgrkibOi9-m_3hXDEh4qCz7BrN6&lang=ja-jp"></script>

In this example the language is set to Japanese, with the 2-letter language code 'ja' representing Japanese, and the 2-letter country code 'jp' representing Japan.

The 2-letter language codes are defined in ISO 639-1, and the 2-letter country codes are defined in ISO 3166-1

Note: If the lang querystring is set, the lang parameter in the global configuration object overrides the lang parameter passed in the query string.

 

Loading Gigya's Script Dynamically

The Gigya service allows loading its JS script dynamically using document.write, or DOM manipulation.

This can be useful in case your web-page uses Gigya only in some circumstances, and it might be more efficient to load gigya.js only if needed.

 

Implementation

Step 1 - Load Gigya's Script

Method A - Using document.write:

document.write('<SCR'+'IPT type="text/javascript" src="http://cdn.gigya.com/js/gigya.js?apiKey=PUT-YOUR-APIKEY-HERE"></SCR'+'IPT>');

The document.write method can be activated only while loading the page. The implication of choosing method A is that you must decide while loading the page whether to load gigya.js or not. This decision can be done on the server side.

 

Method B - DOM Manipulation:

    function loadGigya() {
        var s = document.createElement('script');
        s.type='text/javascript';
        s.async=true;
        s.src = "http://cdn.gigya.com/js/gigya.js?apiKey=PUT-YOUR-APIKEY-HERE";
        s.text = '{siteName: "mySite.com"}'
        document.getElementsByTagName('head')[0].appendChild(s);
    }

Using this method, you can load gigya.js when the page is already displayed.

 

Note: Replace "PUT-YOUR-APIKEY-HERE" in the code, to your Gigya API-Key, which can be obtained on the Site Setup page on Gigya website.

 

Step 2 - Receive Notification when Gigya's Script has Finished Loading

Define a function with the following signature:

onGigyaServiceReady(serviceName) 

This function will be called when the Gigya's script has finished loading. Note, you can use Gigya API methods only after Gigya's script has finished loading.

 

Note: If you implement dynamic Gigya's script loading, you should omit the code that statically loads Gigya's script. That is to say, in all of our code examples, remove the following line of code:
<script type="text/javascript" src="http://cdn.gigya.com/JS/gigya.js?apiKey=PUT-YOUR-APIKEY-HERE" ></script>

 

Working Example

The Example Code:

<html>
<head>
    <title>Gigya Socialize Example</title>
    <script type="text/javascript" >

    // Load Gigya dynamically - Method B 
    function loadGigyaB() 
    {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = "http://cdn.gigya.com/js/socialize.js?apikey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N";
        document.getElementsByTagName('head')[0].appendChild(s);
    }

    // This function will be called when the Gigya Socialize script has finished loading
    function onGigyaServiceReady(serviceName) {
        alert(serviceName + " loaded successfully");
        
        // Disable the "Load Gigya" button
        document.getElementById('loadBtn').disabled = true;

        // show connect UI in "divConnect"
        gigya.socialize.showConnectUI({ containerID: "divConnect", width: 150 });
    }

    </script>
 
</head>
<body >
   
    <h2>Loading Gigya's Script Dynamically Demo - Method B:</h2>
    <br />
    <input type="button" id="loadBtn" onclick="loadGigyaB()" value="Load Gigya"  />
    <br /><br /><br />
    After Gigya finishes loading, the Connect UI should appear bellow...<br /><br />
    <div id="divConnect"></div>

    
</body>
</html>
 

Note:
In order to make this code work in your environment, please:
  • Click the "view source" icon (link located above code on the right hand side) - 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 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.

 

Passing Multiple Parameter Objects

Currently our API methods are called only with params, but we support calling our API methods with multiple arguments. The arguments passed to the method are merged into a single params object. If a property is defined in several objects, the latest argument property will override the previous one. 

In the following example five parameter objects are defined: 

<script type="text/javascript" src="http://cdn.gigya.com/js/gigya.js?apiKey=INSERT-YOUR-APIKEY-HERE">  
{      //Defining a global configuration object
  autoLogin: true,  
  enabledProviders: 'facebook,twitter'  
}  
</script>  

var socializeConfig = {
enabledProviders:'facebook,google'
};

var gmConfig = {
includeChallenges:'challengeA,challengeB'
};

var params1 = {
onLoad: function() {alert('loaded')}
}

var params2 = {
containerID: 'myContainer'
}

 

If you now call a method with three parameter objects (arguments), they will merge to form one. For example, if you call gigya.socialize.showLoginUI(socializeConfig,params1,params2), the merged params objects that the method will use is:

{
    autoLogin:true, // From the global configuration object
    enabledProviders:'facebook,google', // From socializeConfig, overriding the enabledProviders in the global configuration object
    onLoad: function() {alert('loaded')}, // From params1
    containerID: 'myContainer' // From params2
}

 

Another example, if you call gigya.gm.showUserStatusUI(gmConfig, params2), the two parameter objects merge into the following params object that the method will use:

{
    autoLogin:true, // From the global configuration object
     enabledProviders:'facebook,twitter', // From the global configuration object    
    includeChallenges:'challengeA,challengeB', // From gmConfig
    containerID: 'myContainer' // From params2
}

 

Combining Gigya Services

Gigya offers the option for partners to combine services in order to reduce requests to the server.

You can list the services you may want to use later and load them in advance, and in this way you save requests to the server.

It is done by adding a "services" query string parameter to gigya.js, which can accept a comma-separated list of predefined services to load in gigya.js.

Each service is defined as follows: [service name].[plugin name], for example: 

  • socialize.share
  • comments.rating
  • accounts.screenset

​​Each of these examples is a service. You can add the comma-separated list of predefined services to load in gigya.js in the following manner: 

<script src="http://cdn.gigya.com/js/gigya.js?apikey=...&services=socialize.share,comments.rating,accounts.screenset"></script>

Tags

This page has no classifications.

Comments

You must to post a comment.

Attachments