XF 2.1 Reactions 👍😍🤣😲🙁😡

Welcome to the third in our "Have you seen...?" series for XF 2.1. We've had a phenomenal, er, reaction, to what we've shown so far. In case you haven't seen our previous two entries, you can check them out here.

As ever, to ensure you're kept up to date, we strongly recommend giving that "Watch forum" link a poke here and enabling email notifications if you haven't done so already 🙂

Today we're going to show you something that we have been talking about doing internally for quite some time - content reactions. This concept has been popular with XF users for a long time and has spawned some popular add-ons. We have quite possibly been talking about doing it since long before it was popularised by Facebook so, finally, here we are 🙂

Let's first look at how Reactions are set up in the Admin CP:

1539619702913.webp

As you can see, we've not exactly gone overboard in terms of the reactions we're shipping by default, but this felt like a sensible selection. We've added a concept of being able to assign either "Positive", "Negative" or "Neutral" to each reaction and although some of the default reactions have negative connotations, we decided not to assign any of them as "Negative" by default.

But, let's look at adding a new negative "Dislike" reaction:

localhost_21x_admin.php_reactions_add.webp

The process here should be fairly familiar if you have ever added new smilies as it uses a very similar approach for referencing the image/sprite. For your convenience we have included a "Dislike" icon in the sprite sheet should you wish to add it yourselves.

Most of this is self explanatory, but you will see we can also specify a "Text color". You'll see this in action... now!

21reactions.gif

The behaviour of the "Like" button isn't significantly different. You can still just click/tap the button to give a like (or remove the selected reaction) but to access other reactions you can hover over the link (or tap and hold on touch devices) and a tooltip will be displayed with your active reactions.

The "Text color" value we mentioned before is applied here to indicate your selected reaction. It is also displayed in the alert templates for reactions:

Screenshot 2018-10-15 at 18.45.54.webp

We have also redesigned the reaction summary:

Screenshot 2018-10-15 at 18.58.33.webp

And the reaction overlay with a new tabbed design:

Screenshot 2018-10-15 at 19.02.20.webp

And, of course, Reactions are sent through push notifications (if not opted-out):

live.browserstack.com_dashboard (3).webp

We also show a summary of the most popular reactions (up to 3) on the thread list:

localhost_21x_index.php_forums_main-forum.2_.webp

Finally, you'll notice that the primary statistic listed on member list items, member tooltips and member statistics is no longer just a simple "like count" but instead we're now tracking an overall "Reaction score".

This metric is the total number of positive reactions minus the total number of negative reactions.

localhost_21x_index.php_members_&key=highest_reaction_score (1).webp

Most of this is self explanatory so we're probably ok to leave it there without going into too much detail.

Still quite a bit more to go, so we'll see you again later this week for more 🙂

Developers: you may be wondering about a few technical details. We have a special HYS for you guys in a couple of weeks focusing on a bit more detail for some miscellaneous power user/developer changes, so stay tuned for that!
 
Possible to show actual count per reaction on the post itself? For example 2 x likes, 5 x Haha, 7x Angry?
Not beyond the realms of possibility for an add-on to implement, but it's not something we wanted to do.

great work
i like the Dislike option :cool:
keep going :love:
Bear in mind the "Dislike" button was just an example, we're not shipping that by default but the image is in the spritesheet so you can add it yourself if you wish.
 
Is there some sort of limiting feature? I've had some users neg rep every post they can dig up on other people. Having to manually find hundreds of these cases is also incredibly annoying. Please allow looking up all reactions given or received by a member.
 
I'm just guessing the gear icon is a quick way to get to the different settings so you don't have to scroll down if you don't want to. Which makes sense to me, especially if you're on a mobile device.
 
Is there some sort of limiting feature? I've had some users neg rep every post they can dig up on other people. Having to manually find hundreds of these cases is also incredibly annoying. Please allow looking up all reactions given or received by a member.
This is one reason why we don’t ship any negative reactions by default.

You can always just revoke their reaction permissions when it becomes apparent that this is what they’re doing. I don’t think it needs a new way of logging that, the affected user(s) would usually speak up if they feel bothered by such a pattern.

It’s not even a new issue. We’ve had to have words with members before who are going around giving likes to the same users over and over just to be annoying.
 
Excellent, been waiting for this.

Is there any chance you'll support Emoji's as reactions? I.e. rather than having to specify a url/image, it can just be a unicode one? Or are there implications for that?
 
Great feature!

1539687919368.webp


Is this bar displaying last received reactions? Or is it based on the received amount? Maybe add a style option?

Will it be possible to get all the reactions (and received number) within template?

For exapmle, I want to make a Discord like reactions bar so I need an access to an array of all received reactions with counters:
1539688285737.webp


Are gifs supported?

How many default reactions will be available? I think the Reactions system works properly when, well, when there are many different reactions to post):
reactions.gif
 
Last edited:
Great feature!

View attachment 185575

Is this bar displaying last received reactions? Or it is based on the received amount? Or it is controlled by an option?

Will it be possible to get all the reactions (and received number) within template?

For exapmle, I want to make a Discord like reactions bar:
View attachment 185576

Are gifs supported?

How many default reactions will be available? I think the Reactions system works properly when there are many different, well, reactions to post)
Yeah that would be dope, to have it look like discord for the reactions :o
 
This is one reason why we don’t ship any negative reactions by default.

You can always just revoke their reaction permissions when it becomes apparent that this is what they’re doing. I don’t think it needs a new way of logging that, the affected user(s) would usually speak up if they feel bothered by such a pattern.

It’s not even a new issue. We’ve had to have words with members before who are going around giving likes to the same users over and over just to be annoying.

The problem with that is the simple fact that some people say things that aren't always polite or something the community agrees with, even if it isn't breaking any particular rules. This allows the community to bury posts, cause them to be hidden or have other repercussions for the user saying silly things.

Not everything needs to have a heavy moderator hand behind it, and with a potential negative side effect I've found that people care much more about their reputation than when its all just fluff and cherries. Without a negative reaction, the like feature is just cosmetic and really neuters part of the emotional relationship a member can have with the content and forum itself. Its like giving everyone a blue ribbon for participation if that makes any sense.

Now, if you're saying thats nice, an addon dev can tackle this, then I wouldn't disagree with that stance given its a vanilla core feature. I just thought I'd mention this as its an issue I deal with once a month or so. It literally takes hours to undo the damage someone has done sometimes.
 
How this Reactions box below will look when there are, lets say 50 reactions?
21reactions.gif


I my opinion, this box needs some more styling: smaller icons, darker background when hovering reaction, scrollbars in case of many reactions, probably a searchbox... In a few words - would be cool to see something like Discord reactions box:

1539689376942.webp


Can we set a custom +X score for reactions? If so, is there a way (user criteria?) to allow certain users to post certain reactions?
 
Last edited:
Top Bottom