Page History

Versions Compared

Key

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

...

Quick Start Implementation

Include Page
Template_gigya setup sn app
Template_gigya setup sn app

Implementation Overview

Adding the Reactions add-on is simple, and involves only adding a few lines of code:

  • Step 1: Define an array of Reaction objects, representing the buttons to display in the reactions bar.
  • Step 2: Construct a UserAction object, which represents the action taken by a user on your site. The newsfeed that is published to the social networks is constructed from the fields of this object. All the fields of this object are optional.
  • Step 3: Define the Reactions add-on's parameters.
  • Step 4: Call the socialize.showReactionsBarUI API to activate the Reactions add-on.

Code Example

Add the following code snip to the of your page to activate the Reactions add-on that is presented in the screenshot above:

Code Block
languagejs
linenumberstrue
<DIV id=reactionsDiv></DIV> <!-- Reactions add-on DIV Container -->

<script language="javascript">
    // Step 1: Define an array of reaction objects
    var textReactions=[
	{
	    text: 'Inspiring',
        ID: 'inspiring',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Inspiring_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Inspiring_Icon_Down.png',
        tooltip:'This item is inspiring',
        feedMessage: 'Inspiring!',
		headerText:'You think this post is inspiring,'
	}
	,{
	  	text: 'Innovative',
        ID: 'innovative',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Innovative_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Innovative_Icon_Down.png',
        tooltip:'This item is innovative',
        feedMessage: 'This is innovative',
		headerText:'You think this post is innovative,'
	}
	,{
	    text: 'Amazing',
        ID: 'amazing',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Amazing_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Amazing_Icon_Down.png',
        tooltip:'This item is amazing',
        feedMessage: 'This is amazing!',
		headerText:'You think this post is amazing,'
	}
	,{
	   	text: 'LOL',
        ID: 'lol',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/LOL_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/LOL_Icon_Down.png',
        tooltip:'This made me LOL',
        feedMessage: 'LOL!',
		headerText:'This post made you LOL,'
	}
	,{
	    text: 'Geeky',
        ID: 'geeky',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Geeky_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Geeky_Icon_Down.png',
        tooltip:'This item is geeky',
        disabledTooltip:'You found this geeky',
        feedMessage: 'This is geeky!',
		headerText:'You think this is geeky,'
	}
	];

    // Step 2: Define UserAction object and fill it with data
    var defaultUserAction = new gigya.socialize.UserAction();
    defaultUserAction.setTitle("This is the post title");
    defaultUserAction.setLinkBack("http://www.gigya.com");

    // Step 3: Define the Reactions add-on's params object   	
    var reactionParams = { 
        barID: 'today-story', //  Identifier of the content to which this reaction refers        
        containerID: 'reactionsDiv',  // Reactions add-on DIV Container 
        reactions: textReactions,  // The reaction array from Step 1
        userAction: defaultUserAction,  // The UserAction object from Step 2
        bodyText: 'Share it with your friends:', // optional - text that appears in the Share popup
        showCounts: 'top', // optional - displays the counters on top of the buttons
        cid:''
    };

    // Step 4: Load the Reactions add-on: 
    gigya.socialize.showReactionsBarUI(reactionParams);
</script> 

 

...

Code Block
languagejs
linenumberstrue
    var textReactions = [
	{
	    text: 'Inspiring',
        ID: 'inspiring',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Inspiring_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Inspiring_Icon_Down.png',
        tooltip:'This item is inspiring',
        feedMessage: 'Inspiring!',
		headerText:'You think this post is inspiring,'
	}
	,{
	  	text: 'Innovative',
        ID: 'innovative',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Innovative_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Innovative_Icon_Down.png',
        tooltip:'This item is innovative',
        feedMessage: 'This is innovative',
		headerText:'You think this post is innovative,'
	}
	,{
	    text: 'Amazing',
        ID: 'amazing',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Amazing_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Amazing_Icon_Down.png',
        tooltip:'This item is amazing',
        feedMessage: 'This is amazing!',
		headerText:'You think this post is amazing,'
	}
	,{
	   	text: 'LOL',
        ID: 'lol',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/LOL_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/LOL_Icon_Down.png',
        tooltip:'This made me LOL',
        feedMessage: 'LOL!',
		headerText:'This post made you LOL,'
	}
	,{
	    text: 'Geeky',
        ID: 'geeky',
        iconImgUp:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Geeky_Icon_Up.png',
		iconImgOver:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/Geeky_Icon_Down.png',
        tooltip:'This item is geeky',
        disabledTooltip:'You found this geeky',
        feedMessage: 'This is geeky!',
		headerText:'You think this is geeky,'
	}
	];

...

 

Code Block
languagejs
linenumberstrue
   // The image to show in share when reaction is "love it"
   var image_love_it = {
       src:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/LoveIt_Icon_Up.png',
       href:'httphttps://cdncdns.gigya.com/gs/i/reactions/icons/LoveIt_Icon_Up.png',
       type:'image'
    };

   // UserAction to use when reaction is "love it"
   var UA_love_it = new gigya.socialize.UserAction();
   UA_love_it.setTitle("I love it");
   UA_love_it.setLinkBack("http://www.gigya.com");
   UA_love_it.addMediaItem(image_love_it); 

 

...