|
 |
Using WidgetsFrom $1Table of contents
Contents
The Socialize Widgets are pre-built Web GUI elements that can be used to perform common tasks which are related to Social Networks.
Widget Setup WizardsThe Widget Setup Wizards may be accessed from the "Widgets" section in Gigya's website. These Wizards are the best way to get started with Gigya Socialize and to get a basic integration up and running as quickly as possible. The Setup Wizards let you modify some basic settings, while previewing the changes as you make them. Based on your modifications, the Wizards generate code that you can insert into your own application with minimal modifications.
Step 1 of the setup lets you modify some common visual and behavioral properties of the Widget. These settings take effect immediately so you can see a preview of your design in step 2, and finally step 3 you can grab the generated code to use in your application.
Subsequent:The Wizards allow you to easily perform modifications in the Widgets' visual aspects. The generated code is actually constituted of code fragments which simply display the Widget. In addition, to fully integrate a Widget and use its full functionality, you may wish to:
Note: the Setup Wizards currently generate only JavaScript code. If you are developing an ActionScript application you may customize the Widgets manually, by altering the Widget's parameters in the code (as shown in the examples further ahead in this page).
Dialog or EmbeddedAll Widgets may be displayed as dialogs (pop-up) at the center of the browser screen / Flash widget. They may also be embedded inside the application. This behavior is controlled by the presence of the containerID (for JS) /container (for AS3) parameter, which is passed to the Widgets' method calls (as part of the 'params' object). JavaScriptTo embed a Widget in a certain DIV?, set the containerID parameter with the specific DIV id (see usage examples below). If the containerID parameter is provided, the Widget will embed itself in the corresponding DIV - in which case the application must hide the Widget when it is no longer required. If the containerID parameter is not provided (or if it is set to 'null' value), the Widget will be displayed as a dialog and will disappear when the relevant user interaction is completed. ActionScriptTo embed a Widget in a certain container (e.g. Canvas), set the container parameter with the specific container object reference (see usage examples below). If the container parameter is provided, the Widget will embed itself in the corresponding container - in which case the application must hide the Widget when it is no longer required. If the container parameter is not provided (or if it is set to 'null' value), the Widget will be displayed as a dialog and will disappear when the relevant user interaction is completed.
Available WidgetsThere are currently five available Widgets:
LoginThe Login Widget is Gigya's user authentication Widget. It should be used by sites that wish to use Gigya as their authentication service or that wish to add Gigya as an authentication option for users. The Widget displays all the available providers' logos as login options, enabling the user to login to your site via his social network / webmail account. After the user logs in successfully, the onLogin global event is fired. The next page - Events, explains how to handle events.
The Login Wizard - Lets you customize the visual aspects of the Login Widget design, view, and grab the customized code.
Default look of the Widget:
The following parameters are adjustable:
Usage Example:<html>
<head>
<!-- Including the socialize.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=INSERT-YOUR-APIKEY-HERE" ></script>
<script type="text/javascript">
//Define a configuration object. Insert your Gigya APIKey below:
var conf =
{
APIKey: "INSERT-YOUR-APIKEY-HERE"
}
// Changing the default look and behavior of the Widget using the 'params' object:
var params =
{
showTermsLink:false, // 'terms' link is hidden
headerText:"Please Login using one of the following providers:", // adding header text
height:105, // changing default Widget size
width:360, // changing default Widget size
containerID:"loginDiv", // The Widget will embed itself inside the "loginDiv" DIV (will not be a popup)
// Changes to the default design of the Widget's UI
// Background color is changed to pale blue and button size is set to 40 pixels:
UIConfig:"<config><body><background background-color=\"#ADC8FF\"></background><controls><snbuttons buttonsize=\"40\"></snbuttons></controls></body></config>",
// Change the buttons design style to the 'blue' style:
buttonsStyle:'blue',
// After successful login - the user will be redirected to "www.MySite.com/welcome.html" :
redirectURL: "www.MySite.com/welcome.html",
useFacebookConnect: true
}
</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="401" height="365" applicationComplete="init()">
<mx:Canvas x="36" y="108" id="loginCanvas" width="325" height="200">
</mx:Canvas>
<mx:Script>
<![CDATA[
// Step 2 - Define a configuration object. Insert your Gigya APIKey below:
private var conf:Object = {
APIKey: "INSERT-YOUR-APIKEY-HERE"
}
// 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;
// Step 3 - Load socialize service
// 3.1 Create the load-parameters object
var loadParams:Object = {
services:'socialize',
callback:onGigyaInit
}
// 3.1 Load the services
gigya.load(conf,loadParams);
}
// 3.2 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 {
// Step 4 - Define parameters object:
var params:Object =
{
showTermsLink:false, // 'terms' link is hidden
headerText:"Please Login using one of the following providers:", // adding header text
height:105, // changing default Widget size
width:360, // changing default Widget size
container:loginCanvas, // The Widget will embed itself inside the loginCanvas container (will not be a popup)
// Changes to the default design of the Widget's UI
// Background color is changed to pale blue and button size is set to 40 pixels:
UIConfig:"<config><body><background background-color=\"#ADC8FF\"></background><controls><snbuttons buttonsize=\"40\"></snbuttons></controls></body></config>"
// Change the buttons design style to the 'blue' style:
buttonsStyle:'blue'
};
// Step 5 - Calling the Socialize API method - showLoginUI:
gigya.services.socialize.showLoginUI(conf, params);
}
]]>
</mx:Script>
</mx:Application>
The output of this code:
In the JavaScript implementation: http://www.MySite.com/welcome.html?zip=&
photoURL=http%3A%2F%2Fprofile%2Eak%2Efbcdn%2Enet%2Fprofile5%2F1719%2F30%2Fs722723209%5F4728%2Ejpg&
nickname=Assaften%20Esh&profileURL=http%3A%2F%2Fwww%2Efacebook%2Ecom%2Fprofile%2Ephp%3Fid%3D722723209&
birthMonth=10&loginProvider=&country=&thumbnailURL=&lastName=Esh&signature=XGcp4tmIVvQNCqG9pET7XbHaies%3D&
firstName=Assaften&provider=twitter&gender=&birthYear=1965×tamp=2009%2D12%2D01%2011%3A05%3A33&UIDSig=&state=&
UID=123&email=&city=&birthDay=11&
proxiedEmail=apps%2B51244333578%2E722723209%2Edb978474083d884bcb0ba35d313c4c8f%40proxymail%2Efacebook%2Ecom
The parameters are equivalent to the User object fields. Please find the parameters' description in the User object reference page. Note: redirect URL is not supported in ActionScript environment.
Last Logged InThe 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 logo first (the position will precede the rest of the logos) and will be ornamented with a star. This is demonstrated in the following screenshot (in this example, user has previously logged-in to MySpace):
Note: You may change this default behavior by using the lastLoginIndication parameter (see the socialize.showLoginUI API method parameters reference) .
ConnectThe Gigya Socialize Connect Widget enables establishing connections to Social Networks. Establishing connection with a Social Network enables an on-going social interaction with that SN, which includes: retrieving information about the user and his friends, updating status, sending newsfeed items and notifications. A user can connect to multiple SNs, regardless of using / not using Gigya Socialize for logging in.
The Connect Wizard - Lets you customize the Connect Widget visual design, view, and grab the customized code.
Default look of the Widget:
The following parameters are adjustable:
After the user connects to social networks, the connected social network buttons are marked and grayed out (see screenshot below). In addition, an "Edit" link appears automatically below the buttons, to give the user the ability to edit his connections and disconnect. Clicking the Edit link opens the Edit Connections widget.
Usage Example:<html>
<head>
<!-- Including the socialize.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=INSERT-YOUR-APIKEY-HERE" ></script>
<script type="text/javascript">
var conf=
{
APIKey: "INSERT-YOUR-APIKEY-HERE"
}
var params=
{
enabledProviders:"facebook,myspace", // Limiting the Widget to show only facebook and myspace buttons
headerText: "My title", // add a title
height: 73, // define size
width: 147,
containerID: "loginDiv", // The Widget will be embedded inside the application HTML
buttonsStyle:'blue', // Change the buttons design style to the 'blue' style
// 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.services.socialize.showConnectUI(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[
// Step 2 - Define a configuration object. Insert your Gigya APIKey below:
private var conf:Object = {
APIKey: "Put Your APIKey here"
}
// 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;
// Step 3 - Load socialize service
// 3.1 Create the load-parameters object
var loadParams:Object = {
services:'socialize',
callback:onGigyaInit
}
// 3.1 Load the services
gigya.load(conf,loadParams);
}
// 3.2 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 {
showConnectUI();
}
}
private function showConnectUI(): void {
// Step 4 - Define parameters object:
var params=
{
enabledProviders: 'facebook,myspace', // Limiting the Widget to show only facebook and myspace buttons
headerText: "My title", // add a title
height: 73, // define size
width: 147,
container: loginCanvas, // The Widget will be embedded inside the application HTML
buttonsStyle:'blue', // Change the buttons design style to the 'blue' style
// background color is set to gray:
UIConfig: "<config><body><background background-color=\"#BFBFBF\"></background></body></config>"
}
// Step 5 - Calling the Socialize API method - connect:
gigya.services.socialize.showConnectUI(conf, params);
}
]]>
</mx:Script>
</mx:Application>
The output of this code:
Friend SelectorThe Friends Selector Widget displays the current user's friends and lets him select one or more for application-related interaction. The Widget will present a list of confirmed friends from which the user can browse and select friends. The Friends Selector can easily be integrated with any action on your page, returning the user’s list of friends as the result. Supported Use cases:
The Friend Selector Wizard - Lets you customize the Widget's visual design, view, and grab the customized code.
Default look of the Widget:
The following parameters are adjustable:
API Method:The API method which displays the Friends Selector Widget is: socialize.showFriendSelectorUI
Usage Example:The following example combines both the Connect and the Friend Selector Widgets: <html>
<head>
<!-- Including the socialize.js script: -->
<script type="text/javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=INSERT-YOUR-APIKEY-HERE" ></script>
<script type="text/javascript">
var conf =
{
APIKey: "INSERT-YOUR-APIKEY-HERE"
}
</script>
</head>
<body>
<div id="loginDiv"></div>
<script type="text/javascript">
var params =
{
"showTermsLink": true,
"height": 73,
"width": 147,
"containerID": "loginDiv"
}
gigya.services.socialize.showConnectUI(conf, params);
</script>
<div id="Div1"></div>
<script type="text/javascript">
var params2 =
{
"showTermsLink": true,
"height": 500,
"width": 400,
"containerID": "Div1"
}
gigya.services.socialize.showFriendSelectorUI(conf, params2);
</script>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="750" applicationComplete="init()">
<mx:Canvas x="36" y="56" id="loginCanvas" width="325" height="100"></mx:Canvas>
<mx:Canvas x="36" y="180" id="friendsCanvas" width="400" height="500"></mx:Canvas>
<mx:Script>
<![CDATA[
// Step 2 - Define a configuration object. Insert your Gigya APIKey below:
private var conf:Object = {
APIKey: "Put Your APIKey here"
}
// 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;
// Step 3 - Load socialize service
// 3.1 Create the load-parameters object
var loadParams:Object = {
services:'socialize',
callback:onGigyaInit
}
// 3.1 Load the services
gigya.load(conf,loadParams);
}
// 3.2 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 {
showConnectUI();
showFriendSelectorUI()
}
}
private function showConnectUI(): void {
// Step 4 - Define parameters object:
var connectParams:Object=
{
showTermsLink: true,
height: 73, // define size
width: 147,
container: loginCanvas // The Widget will be embedded inside the application HTML
}
// Step 5 - Calling the Socialize API method - connect:
gigya.services.socialize.showConnectUI(conf, connectParams);
}
private function showFriendSelectorUI(): void {
// Step 4 - Define parameters object:
var friendsParams:Object=
{
showTermsLink: true,
height: 500, // define size
width: 400,
container: friendsCanvas // The Widget will be embedded inside the application HTML
}
// Step 5 - Calling the Socialize API method - connect:
gigya.services.socialize.showFriendSelectorUI(conf, friendsParams);
}
]]>
</mx:Script>
</mx:Application>
ShareThe "Share" Widget gives the user an option to publish a newsfeed to various social networks. Default look of the Widget:
The Widget presents:
To learn more about the Share widget and how to publishing feed items, please read the Share Widget page of this guide. API Method:The API method which displays the "Share" Widget is: socialize.showShareUI. Usage Example:In "The "Share" Widget demo" you will find a complete working example which uses the "Share" Widget. You may view the code, run it and view the outcome.
NewsfeedThe Newsfeed Widget displays recent user activities in a feed stream. The stream can be filtered according to different groups: "Everyone", "Friends", and "Me". Default look of the Widget:
The Widget presents: A tab per each group. The groups are: Everyone, Friends, Me. The Widget is highly customizable. To learn more about the widget and how to integrate and customize it, please read the Newsfeed Widget designated guide.
API Method:The API method which displays the Newsfeed Widget is: socialize.showNewsfeedUI. Usage Example:In The Newsfeed Widget Demo you will find a complete working example which uses the Newsfeed Widget. You may view the code, run it and view the outcome.
Edit ConnectionsThe Edit Connections Widget enables users to connect to additional destinations and disconnect from their existing connections. Default look of the Widget:
The following parameters are adjustable:
API Method:The API method which displays the Edit Connections Widget is: socialize.showEditConnectionsUI The 'Edit Connections' Widget may also be opened by clicking the Edit link on the Connect Widget.
What's Next?To complement the usage of the Socialize Widgets, we encourage you continue to the next page and learn how to register for Events which are generated by Gigya Socialize.
Tags:
Files (0) |
||||
|
