Displays the Reactions plugin, which allows users to react to content in your site and share their reaction to social networks. The Reactions plugin is built out of one or more buttons, arranged horizontally in a bar. Each button represents a "reaction" to the content, such as 'LOL', 'OMG', etc.
Once a user clicks on a reaction button, a mini Share plugin will popup to suggest to him to share his reaction to the social networks.
The Mini Share popup displays, by default, the first 6 providers that support share by default; in this case: Facebook, Twitter, LinkedIn, Renren, QQ and VKontakte.
You may customize this list using the enabledProviders and disabledProviders parameters. The supported social networks are: Facebook, Twitter, Microsoft, LinkedIn, Tencent QQ, Renren, VKontakte and Sina Weibo (the plugin may show a maximum of six network buttons).
The following table lists the available parameters:
|||reactions||array||An array of Reaction objects, representing the buttons to display in the reactions bar. No more than ten reaction buttons can be displayed.|
|||containerID||string||The ID of the <div> element in which to display the plugin.|
|||userAction||UserAction object||The user action to publish. The UserAction object enfolds newsfeed data, including text, media, link, etc.|
When Twitter is the provider, only the Title and Link Back are posted.
|||barID||string||A unique identifier that identifies the content item to which the user reacted. This will be used for associating counts with the reaction. Limited to 100 characters.|
|||actionAttributes||JSON object||In Gamification your users receive points for actions they perform on your site, in this case clicking a reaction grants the user points. Action Attributes may be used to annotate actions with additional information, such as the section of the web site that generated the action. If you set here the actionAttributes, each time a user clicks a reaction, the action also receives an attribute, for example "tv-show":"glee", which can mean that the action was performed on the "Glee" page of the site. |
actionAttributes contain a JSON object comprised of a series of attribute keys (categories) with associated values. You can also use a generic "tags" key.
No more than three values can be given, they can be with a single key or each have their own key.
For more information see Variants and Action Attributes. Action attributes are later used to filter GM Plugins by a certain attribute.
|||bodyText||string||This text will be presented as the second line of text in the mini-share that pops-up when clicking one of the reaction buttons.|
|||buttonImages||JSON object||Using this object you may override the default design of a reaction button. Specify your alternative button images using the object fields. The following fields are supported:|
buttonLeftImgUp, buttonLeftImgDown, buttonLeftImgDisabled, buttonLeftImgOver, buttonCenterBGImgUp, buttonCenterBGImgDown, buttonCenterBGImgDisabled, buttonCenterBGImgOver, buttonRightImgUp, buttonRightImgDown, buttonRightImgDisabled, buttonRightImgOver.
Read more in the Applying a New Button Design guide.
Note: The images are specified separately from the buttonTemplate in order to be pre-loaded. If pre-loading is not required the images may also be specified directly in the buttonTemplate.
|Using this parameter you may override the default design of a reaction button. Defines an HTML template representing the design of a single button. The HTML template supports the following placeholders: $iconImg, $text, $count, $onClick.|
|||cancelReactions||Boolean||This parameter determines whether a user is allowed to cancel a reaction that he previously clicked. The default value is of this parameter is 'true'.|
A string of maximum 100 characters length. The CID sets categories for transactions that can be used later for filtering reports generated by Gigya in the "Context ID" combo box. The CID allows you to associate the report information with your own internal data. For example, to identify a specific widget or page on your site/application. You should not define more than 100 different context IDs.
|||context||object||A reference to a developer created object that will be passed back unchanged to the event handlers as one of the fields of the eventObj (see extended explanation in the "Plugin Events" section below).|
|||countType||string||This parameter determines the type of the counter. The options are:|
|||disabledProviders||string||A comma delimited list of providers that should not be displayed on this plugin. Valid provider names include: 'facebook', 'twitter', 'microsoft', 'linkedin', 'qq', 'renren', 'sina'. For example, if you would like this plugin to show all providers icons but LinkedIn and Twitter, define: disabledProviders: "linkedin,twitter". (Note: messenger has been replaced by microsoft, however, for backward compatibility, either can be used). |
|||enabledProviders||string||A comma delimited list of providers that should be displayed on this plugin. Valid provider names include: 'facebook', 'twitter', 'microsoft', 'linkedin', 'qq', 'renren', 'sina'. For example, if you would like this plugin to show only the icons of Facebook and Twitter, define: enabledProviders: "facebook,twitter". (Note: messenger has been replaced by microsoft, however, for backward compatibility, either can be used). |
Note: the Share plugin may show up to six social network buttons on its main screen (more social destinations may be shown in the "More" screen).
|||headerText||string||This text will be presented as the first line of text in the mini-share that pops-up when clicking one of the reaction buttons.|
|||layout||string||Sets the arrangement of buttons in the bar. May be:|
|||multipleReactions||Boolean||This parameter determines whether the user is permitted to click on multiple reaction buttons on the same reaction bar, or click on one reaction button only. If set to false, the user is allowed to click only one button, after which all other buttons are disabled. The default value of this parameter is 'true' (allowing multiple reactions).|
|||noButtonBorders||Boolean||This parameter determines whether the reaction is displayed without borders. The default value of this parameter is 'false' (the reaction button is displayed with borders).|
|||promptShare||Boolean||This parameter determines whether the user is prompted to share his reaction to social networks. The default value of this parameter is 'true'.|
|||sessionExpiration||integer||This parameter defines the time in seconds that Gigya should keep the social network session valid for the user. To end the session when the browser closes, please assign the value '0'. If this parameter is not specified, the session will be valid forever.|
Using this parameter you may determine whether to use Gigya's URL shortening service for URLs passed in the status parameter. The optional values for this parameter are:
To determine your data center see Finding Your Data Center.
When Gigya's URL shortening service is active, Gigya tracks all the traffic coming from the distributed URLs. In such case, 'Referred Traffic' reports will be available to you.
|||showCounts||string||This parameter determines if and where to display the share counts in relation to the reaction button. The options are:|
|||showSuccessMessage||Boolean||Provides the user with success feedback on sharing. The default value of this parameter is 'false'. When this parameter is set to 'true', a success message is displayed with the following wording: |
|Auto Share related Parameters:|
To learn more about this feature, please read the Automatic Sharing guide.
|||showAlwaysShare||string||This parameter determines whether to show an "Always share" checkbox at the bottom of the Share plugin. If the user checks this checkbox and presses "Publish", Gigya will turn on an automatic share for this user. Each time this user repeats the same type of action, Gigya will automatically share the action without prompting the user with the Share plugin. The type of action is determined using the barID parameter (see above). The action will be shared on the Social Networks which the user selected when he checked the "Always share" checkbox. If a Network is no longer connected, the share will fail without notifying the user.|
The optional values for this parameter are:
|||autoShareActionID||string||Use this parameter to specify a unique identifier for the type of action that the user has performed on your site. For example: "Reacted", "Liked", etc.|
The user selection (Always Share) will apply only to this ID.
|||autoShareExpiration||string||Using this parameter, you may assign an expiration date/time for the user selection for the specific barID. The default is never expire. The expected format is the Unix time format (i.e. the number of milliseconds since Jan. 1st 1970).|
|Events Registration Parameters:|
|||onReactionClicked||function ref||A reference to an event handler function that will be called when one of the reaction buttons is clicked.|
|||onReactionUnclicked||function ref||A reference to an event handler function that will be called when one of the reaction buttons is unclicked.|
|||onSendDone||function ref||A reference to an event handler function that will be called when the process of publishing the newsfeed to all selected social networks has finished.|
|||onLoad||function ref||A reference to an event handler function that will be called when the plugin has finished drawing itself.|
|||onError||function ref||A reference to an event handler function that will be called when an error occurs.|
A JSON-encoded object representing a single button in the reactions bar:
|||ID||string||An identifier for this reaction button. The identifier should be unique within the scope of this method call. Limited to 100 characters.|
|||text||string||The text to display on the button.|
|||iconImgUp||string||Path to an image file to display on the reaction button.|
|||iconImgOver||string||Path to an image file to display on the reaction button on mouse over.|
|||iconImgDown||string||Path to an image file to display on the reaction button when the button is pressed.|
|||tooltip||string||Tooltip to show when mouse over.|
|||headerText||string||If defined, this parameter overrides the parallel method param for this reaction button.|
|||bodyText||string||If defined, this parameter overrides the parallel method param for this reaction button.|
|||feedMessage||string||If defined, this parameter's value is added to the title of the feed displaying the reaction.|
|||enableCount||Boolean||Allows to enable/disable a counter for a specific reaction.|
|||noButtonBorders||Boolean||If defined, this parameter overrides the parallel method param for this reaction button.|
|||userMessage||string||Deprecated. If defined, this parameter overrides the userMessage field of the default userAction method param for this reaction button.|
The single argument, eventObj, contains information about the event and has different fields for different events.
The following tables specify the list of fields available in the eventObj for each event:
onLoad Event Data
onError Event Data
|errorCode||integer||The result code of the operation. Code '0' indicates success, any other number indicates failure. For a complete list of error codes, see the Error Codes table.|
|errorMessage||string||A short textual description of an error, associated with the errorCode, for logging purposes.|
|errorDetails||string||This field will contain the exception info, if available.|
onReactionClicked Event Data
|reaction||Reaction object||The object representing the reaction button that has been clicked.|
onReactionUnclicked Event Data
|reaction||Reaction object||The object representing the reaction button that has been unclicked.|
onSendDone Event Data
|providers||string||A comma separated list of social networks to which the newsfeed was successfully published.|
|userMessage||string||The textual message that the user entered in the editable text box of the Share plugin (see screenshot above).|
|targetURL||string||The URL that was shared.|
|providerPostIDs||array||An array of JSON objects representing the social network's post ID. Each object has the following fields:|
Global Event Triggered
By using this plugin, the following global event may be triggered: onConnectionAdded.
To register an event handler use the socialize.addEventHandlers API method. Refer to the onConnectionAdded event data. Refer to Events to learn more about how to handle events generated by the Gigya service.
In the Reactions Plugin demo you will find a complete working example which uses the socialize.showReactionsBarUI method. You may view the code, run it and view the outcome.