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.png

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.png

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.png

We have also redesigned the reaction summary:

Screenshot 2018-10-15 at 18.58.33.png

And the reaction overlay with a new tabbed design:

Screenshot 2018-10-15 at 19.02.20.png

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

live.browserstack.com_dashboard (3).png

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_.png

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).png

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!
 

PageT

Member
@Chris D Is there a way to pull a particular reaction type score into a widget so it can be displayed on the members page?
eg: Most "Funny" or most "helpful"?

Also, prior to upgrading to 2.2 we were using Content Ratings for XF add-on. Is there a way to import those into the new XF core reactions system so we don't lose those old ones?
 

raytrails

Well-known member
Any easy way to implement the default 'out of the box' reactions shown in the first post? We have a long range of other reactions, but would like to downscale it to the basic ones.
 

Kempol

Member
I have a two questions:
Is there a possibility to differences the points behind the reaction for example "like" +1point, but "love" +3 points?
It is possible that in the first post in the thread all reaction form all post of the owner of this thread will be accumulated?
This will show how attract is this thread.
 

Brogan

XenForo moderator
Staff member
If you require support, you will need to associate your forum user name with your account and post in the appropriate forum.
 

ShikiSuen

Well-known member
I just tested it locally and it works for me.

Post in the support forum if you need help getting it working.
I found the issue again (on my friend's site).

Please try these two files (one is HiDPI and one is not)... see DMed gifs.

They don't loop their animation...
 
Last edited:

Bram

Well-known member
@Bram you can build your own sprite
I am too much of an idiot to understand that I fear :) But thanks for sharing @nicodak, much appreciated
 

aussiefooty

Well-known member
This reminds me of the reputation thing we used to have.

It's a real ripper now. Because we can make it look cool.

Should be able to add some really cool things.
 

WRIST.xxx

Member
So I see above how to create and/or add a custom sprite sheet, and that looks cool. We've added some already and I think we have plenty of reactions.

But, our smilies are old and with thousands of them out there, I'd certainly like to add to them. Is there a similar way or perhaps some great big list of smiles? I mean, my phone (iPhone) has hundreds and hundreds. There's got to be a way to add them or create a new list...?
 

WRIST.xxx

Member
Smilies are added at admin.php?smilies/
Um, just to clarify, since I'm absolutely not a programmer, and struggle with this stuff at times, I see the emoji.png sheet, which has hundreds of images, and I see how to figure out the positioning of them, so I can grab the ones I want and add to the system.

If I wanted to create another sheet like this, called emoji2.png and put it in the same directory and when I list the image replacement URL I use emoji2.png, I should be able to use that additional "sheet"?
 
Top