How To Get Thankful Reaction On Facebook

Forever Thankful on FB —Using React to bring the Thankful Reaction back to Facebook 🌸

EDIT: A few hours after the release of my extension on Production Hunt, Facebook has patched this from the server side. It was fun while it lasted. GG, FB.

Facebook brought back its limited edition 'Thankful' Reaction so people could show their thanks and appreciation during Mother'south Solar day this year. People were expressing they gratitude with bouquets of flowers left and right, and everything was a floral bliss.

Just and then came the fateful moment when Mark Zuckerberg took the gratitude from under our feet and left united states of america broken. The bloom is gone again and people are freaking TF out. — Shandukani Mulaudzi

Just because Mother's Mean solar day is over doesn't mean we can't prove our gratitude to others. Every day is a day for thanks. I decided I wanted to restore humanity and bring dorsum the Thankful Reaction.

The only possible manner to bring back the Reaction that was and then all of a sudden stolen from u.s. is by harnessing the power of browser extensions. With my experience in React and building Google Chrome extensions (eastward.g. my Chrome IG Story extension with 370k+ users) I was able to opposite engineer the Facebook Reactions React components (FB is powered past its own React framework) and bring the withered blossom back.

How did I do information technology? Well, I must give a shout-out to Alexandre Kirszenberg for his excellent blog post that details how to inspect and hook into React components. He ended upwards getting a Stop & Desist letter from Facebook though, so hopefully my fate isn't like. I but want to spread thanks y'all.

I started by inspecting the Reactions bill of fare popup that appears when you hover your mouse over the Similar button.

Inspecting the Facebook Reactions menu with React Programmer Tools

As you lot tin see from the screenshot in a higher place, on the right side, 'UFIReactionsMenuImpl.react' is one of the chief components that handles the Reactions-interactions. If you lot look closely, you can see that one of the props is an assortment called supportedReactions . Bingo. From hither I figured out that the numbers map to the Reaction's type ID. 1 is 'Like', ii is 'Love', etc. The final ID is 8, but what happens if information technology's inverse to something else?

Modifying the props of the component allows us to dynamically change its beliefs with little effort

After incrementing the number, I finally got what I was looking for when I reached 11. The beauty of editing the props in React Dev Tools is that once you update it, it propagates to the country and everything works as expected. It'due south not like yous're just editing some HTML in the DOM and then have to alter some JS logic. By simply changing the final index's ID from 8 to xi, the Angry Reaction turned into a Thankful Reaction, and when you click it, it really submits it to the server and sticks. Facebook's server isn't verifying that the Reaction blazon ID you are sending is no longer available, and then you're complimentary to give thanks and be thanked.

If you lot're curious to what Facebook is upwards to, like I was, I experimented with another IDs. There are a few other hidden Reactions that yous tin uncover with this technique, still Facebook is actually verifying these requests and blocks the request if you lot endeavour to submit it.

Through my experimentation, I institute 5 hidden Facebook Reactions: Yay, Confused, Selfie, Fire, and… Airplane? The just ones that had an icon were Burn down and Airplane.

Hidden 'Selfie' Reaction with a missing icon

Subconscious 'Like' Reaction with an Airplane icon

Now, I knew I could post Thankful Reactions myself by manually editing the React component, but would I be able to build a product that others could use to do the same? 🤔

Using the techniques described in the blog post referenced earlier, I started to work on a Chrome extension that could enable Thankful Reactions for the masses.

Now, information technology really took a while to reverse engineer and trace the component tree to notice exactly where I could hook into, intercept, and change the supportedReactions array programmatically, but eventually I establish that everything I needed lived in 2 components called 'UFICentralUpdates' and 'UFIFeedbackTargets'.

Using the 'requireLazy' module exposed on the window object on Facebook, I could require those two components and use their methods.

The sight of a callback being registered is surely a sign of an like shooting fish in a barrel in to hook and mutate data

Inside UFIFeedbackTargets I saw that information technology was subscribing to an event chosen 'update-feedback' which is called once the server responds with an object that so happens to contain the supportedReactions array. If I claw into this subscription, I tin know exactly when I get the supportedReactions array and I could mutate it by appending our Thankful Reaction ID. The simply question now was, after mutating information technology, how practise I get it to propagate and actually reflect in the React app?

Once you lot've hooked into a callback, information technology'due south time to broadcast your changes.

Inside UFICentralUpdates I saw that the aforementioned result I just subscribed to, 'update-feedback' was being emitted by an 'inform' method. This is the final step. From the callback I subscribed to, I can retrieve the supportedReactions array, suspend '11' to it, and broadcast the new object with the modified array. Now, since the code is both subscribing to and emitting the aforementioned event, nosotros need to forestall an infinite callback loop. My logic was to just check the size of the supportedReactions array when nosotros receive it. If its size is vi, which is the current number of default Reactions, we suspend our new Thankful Reaction and emit it. The callback will again receive the array, but this fourth dimension its size is 7, so nosotros don't emit anything. In one case that event is emitted, React operates every bit usual and accepts our new props and now renders our beautiful floral Thankful Reaction. 😀

Temporary Reactions can be fun just I really implore Facebook to offically bring back the Thankful Reaction. All things in life are temporary and it'south non until nosotros lose the things that are important to us that we realize how much we truly appreciated them. Information technology's good to express our gratitude and allow those nosotros dear know how much we intendance. Exist Forever Thankful, on Facebook, and everywhere else. Thanks 🙏✌️

Install Forever Thankful on FB Extension

Are you lot ready to show your cheers on Facebook? You lot can install the Chrome extension from the Chrome Web Store:

Open Source on GitHub

Curious how it actually works? Feel free to cheque out the source code.

Hacker Apex is how hackers starting time their afternoons. Nosotros're a office of the @AMI family unit. Nosotros are at present accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until side by side time, don't have the realities of the world for granted!