Reactions Plugin Demo

Skip to end of metadata
Go to start of metadata

Choose your reaction - click on one of the buttons below

Text/Icon Buttons Reactions:



Icon Only Reactions:





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 >Choose your reaction - click on one of the buttons below</h3>
	<h4 >Text/Icon Buttons Reactions:</h4>
	<DIV id="textReactionsDiv"></DIV> <!-- Reactions Plugin DIV Container -->
	</br></br>
	<h4 >Icon Only Reactions:</h4>
	<DIV id="iconReactionsDiv"></DIV> <!-- Reactions Plugin DIV Container -->
	<br /><br /><br /><br />
	<h4 >Status:</h4>
	<div id="status"></div>
	<script language="javascript">
		// Textual reactions 
		var textReactions=[
		{
			text: 'Inspiring',
			ID: 'inspiring',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/Inspiring_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/Inspiring_Icon_Down.png',
			tooltip:'This item is inspiring',
			feedMessage: 'Inspiring!',
			headerText:'Your reaction to this post is \'Inspiring\''
		}
		,{
			text: 'Innovative',
			ID: 'innovative',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/Innovative_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/Innovative_Icon_Down.png',
			tooltip:'This item is innovative',
			feedMessage: 'This is innovative',
			headerText:'Your reaction to this post is \'Innovative\''
		}
		,{
			text: 'LOL',
			ID: 'lol',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/LOL_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/LOL_Icon_Down.png',
			tooltip:'This made me LOL',
			feedMessage: 'LOL!',
			headerText:'Your reaction to this post is \'LOL\''
		}
		,{
			text: 'Amazing',
			ID: 'amazing',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/Amazing_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/Amazing_Icon_Down.png',
			tooltip:'This item is amazing',
			feedMessage: 'This is amazing!',
			headerText:'Your reaction to this post is \'Amazing\''
		}
		,{
			text: 'Geeky',
			ID: 'geeky',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/Geeky_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/Geeky_Icon_Down.png',
			tooltip:'This item is geeky',
			feedMessage: 'This is geeky!',
			headerText:'Your reaction to this post is \'Geeky\''
		}
		];
		
		// Icon  only reactions 
		var iconReactions=[
		{
			ID: 'inspiring',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/Inspiring_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/Inspiring_Icon_Down.png',
			tooltip:'This item is inspiring',
			feedMessage: 'Inspiring!',
			headerText:'Your reaction to this post is \'Inspiring\''
		}
		,{
			ID: 'innovative',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/Innovative_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/Innovative_Icon_Down.png',
			tooltip:'This item is innovative',
			feedMessage: 'This is innovative',
			headerText:'Your reaction to this post is \'Innovative\''
		}
		,{
			ID: 'lol',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/LOL_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/LOL_Icon_Down.png',
			tooltip:'This made me LOL',
			feedMessage: 'LOL!',
			headerText:'Your reaction to this post is \'LOL\''
		}
		,{
			ID: 'amazing',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/Amazing_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/Amazing_Icon_Down.png',
			tooltip:'This item is amazing',
			feedMessage: 'This is amazing!',
			headerText:'Your reaction to this post is \'Amazing\''
		}
		,{
			ID: 'geeky',
			iconImgUp:'https://cdns.gigya.com/gs/i/reactions/icons/Geeky_Icon_Up.png',
			iconImgOver:'https://cdns.gigya.com/gs/i/reactions/icons/Geeky_Icon_Down.png',
			tooltip:'This item is geeky',
			feedMessage: 'This is geeky!',
			headerText:'Your reaction to this post is \'Geeky\''
		}
		];
	   
		var defaultUserAction={
			linkBack:'http://www.gigya.com', 
			title:'This is the post title'
		};
		
		var textReactionsParams ={ 
			barID: 'myID',
			containerID:'textReactionsDiv',
			reactions:textReactions,
			//headerText:'You have reacted on this post',
			disabledProviders:'facebook',
			bodyText:'Share it on your favorite social networks:',
			userAction:defaultUserAction,
			showCounts:'top',
			onSendDone:function(a){document.getElementById('status').innerHTML = "Reaction Published!";},
			onError:function(a){alert('error!')},
			onReactionClicked :function(a){document.getElementById('status').innerHTML = "Reaction Clicked!";}
		};
		
		// Reactions Plugin 1 with textual buttons: 
		gigya.socialize.showReactionsBarUI(textReactionsParams);
		var iconReactionsParams ={ 
			//showAlwaysShare:'unchecked',
			barID: 'myID',
			containerID:'iconReactionsDiv',
			reactions:iconReactions,
			//headerText:'You have reacted on this post',
			disabledProviders:'facebook',
			bodyText:'Share it on your favorite social networks:',
			cid: '',
			userAction:defaultUserAction,
			buttonImages:{},  // override the button images, so only the icons will show
			onSendDone:function(a){document.getElementById('status').innerHTML = "Reaction Published!";},
			onError:function(a){alert('error!')},
			onReactionClicked :function(a){document.getElementById('status').innerHTML = "Reaction Clicked!";}
		};
		
		// Reactions Plugin 2 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>.