Page History

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 400px; display: block; height: auto;">
	<h3 >Vote:</h3>
		<DIV id="iconReactionsDiv"></DIV> <!-- Reactions Plugin DIV Container -->
	<br />
	<h4 >Status:</h4>
	<div id="status"></div>
	<script language="javascript">
		
		// The image to show in share when voting against
		var image_down = { 
			src:'https://demogigyademo.gigya.com/bin/resources/images/down.png',
			href:'https://demogigyademo.gigya.com/bin/resources/images/down.png',
			type:'image'
		};
		
		// The image to show in share when voting for
		var image_up = {
			src:'https://demogigyademo.gigya.com/bin/resources/images/up.png',
			href:'https://demogigyademo.gigya.com/bin/resources/images/up.png',
			type:'image'
		};
		
		// UserAction to use when voting against
		var UA_down = new gigya.socialize.UserAction();
		UA_down.setTitle("I vote against this");
		UA_down.setLinkBack("https://developers.gigya.com/display/GD/Reactions+Plugin+-+Voting+Demo");   
		UA_down.addMediaItem(image_down);
		
		// UserAction to use when voting for
		var UA_up = new gigya.socialize.UserAction();
		UA_up.setTitle("I vote for this");
		UA_up.setLinkBack("https://developers.gigya.com/display/GD/Reactions+Plugin+-+Voting+Demo");   
		UA_up.addMediaItem(image_up);
		
		// Icon only reactions 
		var iconReactions=[
		{
			ID: 'vote_down',
			iconImgUp:'https://demogigyademo.gigya.com/bin/resources/images/down.png',
			iconImgOver:'https://demogigyademo.gigya.com/bin/resources/images/down_iconImgOver.png',
			iconImgDown:'https://demogigyademo.gigya.com/bin/resources/images/down_iconImgDown.png',
			tooltip:'I vote against this',
			userAction:UA_down,
			headerText:'You voted against this'
		}
		,{
			ID: 'vote_up',
			iconImgUp:'https://demogigyademo.gigya.com/bin/resources/images/up.png',
			iconImgOver:'https://demogigyademo.gigya.com/bin/resources/images/up_iconImgOver.png', 
			iconImgOver:'https://demogigyademo.gigya.com/bin/resources/images/up_iconImgDown.png', 
			tooltip:'I vote for this',
			userAction:UA_up,
			headerText:'You voted for this'
		}
		];
		
		var iconReactionsParams ={ 
			itemID: 'myID',
			containerID:'iconReactionsDiv',
			showCounts:'top',
			reactions:iconReactions,
			bodyText:'Share it on your favorite social networks:',
			cid: '',
			userAction:UA_down, // The userAction must be defined, even though it is overriden in each reaction button
			buttonImages:{},  // Override the button images, so only the icons will show
			multipleReactions: false, // 
			onSendDone:function(a){document.getElementById('status').innerHTML = "Reaction Published!";},
			onReactionClicked :function(a){document.getElementById('status').innerHTML = "Reaction Clicked!";}
		};
		
		// Reactions plugin with icon buttons: 
		gigya.socialize.showReactionsBarUI(iconReactionsParams);
	</script> 
</div>

...

Code Block
languagexml
linenumberstrue
<html>
<head>
	<SCRIPT type="text/javascript" lang="javascript" 
	src="https://cdns.gigya.com/js/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W">
	</SCRIPT>
</head>
<body>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 400px; display: block; height: auto;">
	<h3 >Vote:</h3>
		<DIV id="iconReactionsDiv"></DIV> <!-- Reactions Plugin DIV Container -->
	<br />
	<h4 >Status:</h4>
	<div id="status"></div>
	<script language="javascript">
		
		// The image to show in share when voting against
		var image_down = { 
			src:'https://demogigyademo.gigya.com/bin/resources/images/down.png',
			href:'https://demogigyademo.gigya.com/bin/resources/images/down.png',
			type:'image'
		};
		
		// The image to show in share when voting for
		var image_up = {
			src:'https://demogigyademo.gigya.com/bin/resources/images/up.png',
			href:'https://demogigyademo.gigya.com/bin/resources/images/up.png',
			type:'image'
		};
		
		// UserAction to use when voting against
		var UA_down = new gigya.socialize.UserAction();
		UA_down.setTitle("I vote against this");
		UA_down.setLinkBack("https://demogigyademo.gigya.com");   
		UA_down.addMediaItem(image_down);
		
		// UserAction to use when voting for
		var UA_up = new gigya.socialize.UserAction();
		UA_up.setTitle("I vote for this");
		UA_up.setLinkBack("https://demogigyademo.gigya.com");   
		UA_up.addMediaItem(image_up);
		
		// Icon only reactions 
		var iconReactions=[
		{
			ID: 'vote_down',
			iconImgUp:'https://demogigyademo.gigya.com/bin/resources/images/down.png',
			iconImgOver:'https://demogigyademo.gigya.com/bin/resources/images/down_iconImgOver.png',
			iconImgDown:'https://demogigyademo.gigya.com/bin/resources/images/down_iconImgDown.png',
			tooltip:'I vote against this',
			userAction:UA_down,
			headerText:'You voted against this'
		}
		,{
			ID: 'vote_up',
			iconImgUp:'https://demogigyademo.gigya.com/bin/resources/images/up.png',
			iconImgOver:'https://demogigyademo.gigya.com/bin/resources/images/up_iconImgOver.png', 
			iconImgDown:'https://demogigyademo.gigya.com/bin/resources/images/up_iconImgDown.png', 
			tooltip:'I vote for this',
			userAction:UA_up,
			headerText:'You voted for this'
		}
		];
		
		var iconReactionsParams ={ 
			itemID: 'myID',
			containerID:'iconReactionsDiv',
			showCounts:'top',
			reactions:iconReactions,
			bodyText:'Share it on your favorite social networks:',
			cid: '',
			userAction:UA_down, // The userAction must be defined, even though it is overriden in each reaction button
			buttonImages:{},  // Override the button images, so only the icons will show
			multipleReactions: false, // 
			onSendDone:function(a){document.getElementById('status').innerHTML = "Reaction Published!";},
			onReactionClicked :function(a){document.getElementById('status').innerHTML = "Reaction Clicked!";}
		};
		
		// Reactions plugin with icon buttons: 
		gigya.socialize.showReactionsBarUI(iconReactionsParams);
	</script> 
</div>
</body>
</html>

...