Advanced Customizations and Localization

Skip to end of metadata
Go to start of metadata

Description

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>

  

LanguageLanguage Code
English (default)en
Arabicar
Bulgarianbg
Catalanca
Chinese (Mandarin)zh-cn
Chinese (Hong Kong)zh-hk
Chinese (Taiwan)zh-tw
Croatianhr
Czechcs
Danishda
Dutchnl
Dutch Informalnl-inf
Finnishfi
Frenchfr
French Informalfr-inf
Germande
German Informalde-inf
Greekel
Hebrewhe
Hindi (*SMS TFA Only)hi
Hungarianhu
Indonesian (Bahasa)id
Italianit
Japaneseja
Kannada (*SMS TFA Only)kn
Koreanko
Malayms
Marathi (*SMS TFA Only)mr
Norwegianno
Persian (Farsi)fa
Polishpl
Portuguesept
Portuguese (Brazil)pt-br
Romanianro
Russianru
Serbian (Cyrillic)sr
Slovaksk
Sloveniansl
Spanishes
Spanish Informales-inf
Spanish (Lat-Am)es-mx
Swedishsv
Tagalogtl
Thaith
Turkishtr
Ukrainianuk
Vietnamesevi

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

 

Localization Support for Third-Party Plugins

Most of Gigya's plugins support localization based on the lang parameter in the global configuration object, as described in the previous section. However, for some third-party plugins, such as Facebook's Like button, you have to 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 third-party plugins, including Facebook's Like button, add a new query parameter to the socialize JS URL with "lang=" and the code of the desired language. The format of the "lang" query parameter is a 2-letter language code with a 2-letter country code, separated by a hyphen.

Recommended Best Practice example:

<script type="text/javascript" 
src="http://cdn.gigya.com/js/gigya.js?apiKey=[INSERT-YOUR-APIKEY-HERE]&lang=ja-jp"></script> 

Recommended Best Practice for implementing the lang parameter is to append it to the string that loads the gigya.js SDK (as in the above example), rather than including it within the global Conf object.

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: The lang parameter in the global configuration object will override the lang parameter passed in the query string.

 

Managing Screen-Set Locales

For instructions on how to manage and edit the locales available to your site's screen-sets, see UI Builder Localization.

 

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 = "https://cdns.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

Loading Gigya's Script Dynamically Demo - Method B:





After Gigya finishes loading, the Connect UI should appear below...

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 = "https://cdns.gigya.com/js/gigya.js?apikey=<Your-API-Key>";
        document.getElementsByTagName('head')[0].appendChild(s);
    }

    // This function will be called when the Gigya Socialize script has finished loading
    function onGigyaServiceReady(serviceName) {
        // 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>

Notes:

In order to make the above code work in your environment, please note:

  • 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 from 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.
  • If you are using https, be sure to further adjust the JS API url to: https://cdns.gigya.com/js/gigya.js?apikey=<Your_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="https://cdns.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]. The following is the complete list of services that may be loaded: 

  • accounts.screenSet
  • accounts.tfa
  • comments.comments2
  • comments.rating
  • gm.achievements
  • gm.leaderboard
  • gm.notifications
  • gm.userStatus
  • socialize.bookmark
  • socialize.login
  • socialize.minishare
  • socialize.newsfeed
  • socialize.reactions
  • socialize.share
  • socialize.shareMobile
  • socialize.simpleShare

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

<script src="https://cdns.gigya.com/js/gigya.js?apikey=[INSERT-YOUR-APIKEY-HERE]&services=socialize.share,comments.rating,accounts.screenset"></script>

When using Gigya's API's over HTTPS it is important that the script tag in the <head> of your pages reference the HTTPS version of the JS SDK, (note CDNS as opposed to CDN) e.g.,

<script type="text/javascript" src="https://cdns.gigya.com/js/gigya.js?apikey=YOUR-API-KEY-HERE"></script>

When combining services, all pages that load gigya.js must load the same list of services. For example, if one page loads accounts.screenSet, all pages must load accounts.screenSet.