Reactions Plugin - Voting Demo

Skip to end of metadata
Go to start of metadata

 

See it in Action

Vote:


Status:

 

Read More

Developer Guide
API Reference

Check Out the Code

<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://s3.amazonaws.com/wikifiles.gigya.com/images/down.png',
			href:'https://s3.amazonaws.com/wikifiles.gigya.com/images/down.png',
			type:'image'
		};
		
		// The image to show in share when voting for
		var image_up = {
			src:'https://s3.amazonaws.com/wikifiles.gigya.com/images/up.png',
			href:'https://s3.amazonaws.com/wikifiles.gigya.com/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://demo.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://demo.gigya.com");   
		UA_up.addMediaItem(image_up);
		
		// Icon only reactions 
		var iconReactions=[
		{
			ID: 'vote_down',
			iconImgUp:'https://s3.amazonaws.com/wikifiles.gigya.com/images/down.png',
			iconImgOver:'https://s3.amazonaws.com/wikifiles.gigya.com/images/down_iconImgOver.png',
			iconImgDown:'https://s3.amazonaws.com/wikifiles.gigya.com/images/down_iconImgDown.png',
			tooltip:'I vote against this',
			userAction:UA_down,
			headerText:'You voted against this'
		}
		,{
			ID: 'vote_up',
			iconImgUp:'https://s3.amazonaws.com/wikifiles.gigya.com/images/up.png',
			iconImgOver:'https://s3.amazonaws.com/wikifiles.gigya.com/images/up_iconImgOver.png', 
			iconImgOver:'https://s3.amazonaws.com/wikifiles.gigya.com/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>

 

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>.