UR - User Reactions

Table of contents:

Description

UR is a Question2Answer plugin that allows users to react to questions, answers and comments.

Features

• Posts (questions, answers and comments) can receive a reaction from a logged in user
• There are two different ways to display reactions: bars and tooltips
• The admin can choose any reaction type for each kind of post, or even none
• Configurable reactions
  • Reaction text
  • Reaction image
  • Order in which reactions are displayed
  • Edition, addition and deletion of reactions
• A default set of reactions is included
• Ability to display the most voted reaction for a question in question lists
• Option to allow or not users to react to own posts
• Users can receive points based on reactions received
• On-Site Notifications plugin integration that allows receiving a notification when a reaction is received
• Amount of reactions received are displayed in the user profile
• LTR and RTL support
• Upgrade system support: the plugin is able to properly upgrade from previous versions
• Internationalization support (Spanish translation included)
• Does not require any core hack and does not modify the core tables in any way (structure and data)

Requirements

These are the technical requirements for the plugin to work properly:

• Q2A core version 1.7.*, 1.8.*

Limitations

• This plugin does not support external users.

Installation

1. Copy the pupi-ur and the pupi-pr directories into the qa-plugin directory (replace any already existing directory).
2. If you are using a Q2A core version greater or equal to 1.8.*, then navigate to admin/plugins and enable the User Reactions and the Point Recalculator plugins.
3. Perform a database initialization by navigating to admin/plugins and following the steps, if prompted.

Sample usage and screenshots

Let's start with a screenshot:

In the screenshot above it is displayed a simple question. Below are the reactions the admin user has configured for the site. Each reaction displayed consists of:

• A text: this is a short expression representing the reaction, e.g., Like, Love, etc.
• An image: it represents the reaction and is a clickable component.
• A count: displays the total amount of users who have reacted in that way on that post.
• A bar: used to draw the percentage of users who voted on that reaction over the total reactions on that post.

A reaction is selected by clicking on the reaction image. This marks the reaction with a light green background:

Reactions can be removed by clicking again on the selected reaction or changed to a new one by clicking on a new reaction.

All users can see the reactions and their counts. However, only logged in users can react to posts.

There is an alternative way of displaying reactions which doesn't use bars but rather a tooltip with reactions to select from:

It is a more compact form of showing the reactions. Hovering the reaction images on the right displays the amount of users who reacted to them. The tooltip also provides a quick way of selecting a reaction which is clicking on the main button. That reaction will be selected without the need to hover and select the reaction from the reaction list. The admin can select which is the default reaction.

The reaction images on the right (available only with in the tooltip display mode) display the reaction counts sorted from most voted reaction to the least.

Finally, the plugin offers an option to display the most voted reaction on the question in question lists:

This setting can be enabled or disabled from the plugin settings, as well as the display of the badge with the count.

Admin section

Here is a screenshot of the admin section:

Here is a description of the main settings the admin can change:

• Enable reactions plugin: allows to enable or disable the plugin. This setting is merely for backward compatibility with Q2A 1.7.x which didn't allow admins to disable plugins. If you're using Q2A 1.8.x+ just leave it enabled and enable or disable the plugin from the main settings.
• Show most voted reaction in question lists: when browsing question lists, this setting adds the image of the most voted reaction on the question. Note it takes the from the question post itself, not from answers or comments.
• Display badge with a count in the most voted reaction: when the Show most voted reaction in question lists setting is enabled this setting determines whether a badge with the count of the most voted reaction should be displayed.
• Allow users to react to their own posts: determines whether a user can react on posts they have created or not.
• Show reactions received in profile: displays the amount reactions a user has received. If a reaction is removed the number is decreased.
• Points per reaction received: defines the amount of point that a user will receive when a user reacts on their post. The reacting user does not lose any points for reacting. Refer to the Points Recalculator section in this document.
• Enable On-Site Notifications plugin integration: enables the integration with the On-Site Notifications plugin. If that plugin is not installed or is disabled, this setting should be disabled. There is more information in the Notifications section.
• Questions/Answers/Comments reaction display: these 3 settings allow the admin to control what kind of reaction should be displayed on each type of post. The possible values are:
  • Tooltip
  • Bars
  • None

Additionally there is a Configure reactions... link which opens a popup to edit the reactions themselves. Here is the screenshot of the modal:

The Add reaction link adds a new form that allows the admin to input the needed fields of a reaction. This will allow the users to react to this new reaction once the settings are saved.

Each reaction has the following fields to be configured:

• Reaction text: this is the short piece of text displayed in the reaction.
• Reaction image link: this is a link to the image that is going to be used to display the reaction. Note this is an absolute link so the admin can upload any image to their server and link it directly to the resource. The easy approach to do this would be to add new images to the public/img/ directory and copy the already existing links and then changing the link to reference the newly uploaded file. No additional support will be given in this regard. If in doubt, ask your server administrator for support.
• Is default: this is only relevant to the tooltip reaction display. This setting defines which is the reaction that is going to be automatically selected when the user clicks on the main reaction button. The default reaction is just a shortcut to hovering on the main button and selecting the same reaction that is the default one. There can only be one default reaction and is shared among all types of posts that are displayed as tooltips.
• Default image link: this is only relevant to the tooltip reaction display and to the reaction selected as default. This setting defines the image that will be used to display the unselected state of the default reaction. Note the reactions never have an unselected state image except the default one.
• OSN plugin class name: this field is only visible if the Enable On-Site Notifications plugin integration checkbox is selected. It is used when adding the CSS of the image notification.

There are 3 actions that can be performed on each reaction in the modal popup:

• Delete reaction: removes a given reaction. Be warned that removing a reaction will remove all the reactions the users voted on it. Even if you delete a reaction and then create a new one with the same name and image, the votes the users cast on the removed reaction will not come back.
• Move up/down: defines the order of the reactions. The order is used when displaying the bars or inside the tooltip of the tooltip reaction. Note when using the tooltip reaction, on the right, the images with the counts are not affected by this order: they are always ordered from most to least votes.

All these settings will take affect once the Save settings button is pressed.

Point Recalculator

This plugin is shipped with the Point Recalculator plugin. You always need this plugin installed. However, you should perform the recalculation in the admin settings of the Point Recalculator plugin only under any of the following conditions:

• You have recalculated points in the admin/stats section
• You changed the Points per reaction received setting
• You are upgrading from version 1.2.2 to 1.3.0 (in this case remember to first set the value for the Points per reaction received setting and then recalculate the points)

Recalculating points this way will make sure all users have the points properly set.

Notifications

Notifications through the On-Site notifications plugin require the plugin to be installed and enabled. The currently supported version of the plugin is v1.3.0. Future versions should also be supported provided there is no radical change in the On-Site Notifications plugin.

Notifications are fired whenever a user receives a reaction in one of their posts. Only the receiving user is notified. When a user removes a reaction, no notification is fired.

The plugin will not display notifications for reactions generated when the plugin integration was disabled.

The notifications can be enabled from the admin settings. This is enough to see the notification. However, some additional configuration steps can be taken. The result would look like this:

Adding notification icon

In order to be able to display the image for each notification these steps need to be followed:

1. In the plugin settings, select the Enable On-Site Notifications plugin integration checkbox
2. Access the reaction configuration and make any changes you need
3. If those changes included adding a new reaction (instead of just editing existing ones), then:
   1. Save plugin settings
   2. Access the reaction configuration again
4. For each reaction you will see the OSN plugin class name field. Copy that value (e.g. pupi_ur_osn-icon-4)

5. In the public/reactons-osn.css file add the following:

   .pupi_ur_osn-icon-4 {
       background-image: url('https://yoursite.com/qa-plugin/pupi-ur/public/img/osn/wow.png');
   }
   

6. Make sure to replace pupi_ur_osn-icon-4 with your corresponding ID

7. Make sure to replace the URL with the the actual URL you are using in your server
8. Repeat this process for all reactions

The previous steps will allow you to see the images for your reactions. It is possible to change the image location, image name or even add new images. The only important thing is to have the reaction configuration and this file in sync.

There is another CSS class that can be used to refer to all reaction icons. The class name is pupi_ur_osn-icon. It is possible to use it to apply styles to all reaction icons in the notifications popup. For example, this will display a background color in all images and apply some transparency to them:

.pupi_ur_osn-icon {
    background-color: red;
    opacity: 0.5;
}

It is possible to add custom reactions. In that case, the notification images will have to have a size of 16x16 and, ideally, have a transparent background.

Changing notification text

In the image above, the notification text is

pupi1985 reacted to this post with a Like

This comes from the language files, which look like this:

^1 reacted to ^2this post^3 with a ^4

It has the following variables:

• ^1: User name of the user who mentioned the current user
• ^2: Open anchor link
• ^3: Close anchor link
• ^4: Reaction text

This is very flexible. For example, it is possible to make reactions anonymous by just removing the user like this:

^2this post^3 received a ^4 reaction

Which would result in:

this post received Like

Or maybe if the image is enough to represent the reaction, the reaction text can be removed:

^2this post^3 received reaction

Which would result in:

this post received a reaction

If the image was properly configured, then the user will know the reaction was a Like from the image.

Support

Technical support must all go through the issues section on this site and be in English.

• Bugs: if you find a bug or error in the plugin, create a bug issue detailing the steps needed to be performed in order to reproduce the issue. Provide the steps from scratch, i.e., starting just after a clean Q2A setup. Attaching screenshots might be useful too. Also include your PHP, MySQL, Q2A and plugin versions. Make sure you have no other plugin in the qa-plugin directory while reproducing it and that you are using the default Q2A theme.
• New features: feel free to request features using the issues section. Select the enhancement kind in the combobox and explain in detail the feature and why you consider it would be useful to others.
• Questions and other technical support: create a task issue explaining the situation in detail.

Administrative (all non-technical) issues should go through private message to my profile in the Q2A site. Make sure to provide your email address.

FAQ

• Do you give refunds in case I end up not liking the plugin?

  No. The reason for this is that not only this wiki is quite descriptive but also the plugin can be seen and interacted with live in the demo site. You can fully test the plugin before buying.

• Can a user react in more than one way to the same post?

  No, only one reaction is allowed for a given user to a given post. If the user tries to react to a post that they have already reacted then the new reaction will overwrite the previous one.

• Do the point changes affect in any way the ability to use bonus points?

  No. Bonus points can be used normally.

• Will this plugin work in my theme?

  This is impossible to tell. If your theme only modifies CSS, most likely, it will. However, you might need to make this plugin's CSS match your theme. No support will be given on that. This plugin works well with the SnowFlat theme released with Q2A 1.8.0.

• Are bug fixes charged separately?

  No. Bug fixes are already included in the price. New features, however, might not be free.

• Would you mind doing some customizations to this plugin?

  Sure. Feel free to get in touch as explained in the Support section.

Get the plugin

Click here to navigate to the main plugin page. From there, you will be able to buy the plugin.