EDIT: A few hours after the release of my , Facebook has patched this from the server side. It was fun while it lasted. GG, FB. extension on Product Hunt brought back its limited edition ‘Thankful’ so people could show their thanks and appreciation during Mother’s Day this year. People were expressing they gratitude with bouquets of flowers left and right, and everything was a floral bliss. Facebook Reaction But then came the fateful moment when Mark Zuckerberg took the gratitude from under our feet and left us broken. The flower is gone again and people are freaking TF out. — Shandukani Mulaudzi _Uh oh. The Facebook flower reaction is gone and now we don't know how to show our gratitude.The flower made a return to…_www.huffingtonpost.co.za The Internet Is Freaking Out Because The Facebook Flower Reaction Has Disappeared Again. Here's Why… Just because Mother’s Day is over doesn’t mean we can’t show our gratitude to others. Every day is a day for thanks. I decided I wanted to restore humanity and bring back the Thankful Reaction. The only possible way to bring back the Reaction that was so suddenly stolen from us is by harnessing the power of browser extensions. With my experience in React and building Google Chrome extensions I was able to reverse engineer the Facebook Reactions React components (FB is powered by its own React framework) and bring the withered flower back. (e.g. my Chrome IG Story extension with 370k+ users) How did I do it? Well, I must give a shout-out to for his that details how to inspect and hook into React components. He ended up getting a Cease & Desist letter from Facebook though, so hopefully my fate isn’t similar. I just want to spread thanks y’all. Alexandre Kirszenberg excellent blog post I started by inspecting the Reactions menu popup that appears when you hover your mouse over the Like button. Inspecting the Facebook Reactions menu with React Developer Tools As you can see from the screenshot above, on the right side, ‘ is one of the main components that handles the Reactions-interactions. If you look closely, you can see that one of the props is an array called . . From here I figured out that the numbers map to the Reaction’s type ID. 1 is ‘Like’, 2 is ‘Love’, etc. The last ID is 8, but what happens if it’s changed to something else? UFIReactionsMenuImpl.react’ supportedReactions Bingo Modifying the props of the component allows us to dynamically change its behavior 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 state and everything works as expected. It’s not like you’re just editing some HTML in the DOM and then have to change some JS logic. By simply changing the last index’s ID from 8 to 11, the Angry Reaction turned into a Thankful Reaction, and when you click it, it actually submits it to the server and sticks. Facebook’s server isn’t verifying that the Reaction type ID you are sending is no longer available, so you’re free to thank and be thanked. If you’re curious to what Facebook is up to, like I was, I experimented with some other IDs. There are a few other hidden Reactions that you can uncover with this technique, however Facebook is actually verifying these requests and blocks the request if you try to submit it. Through my experimentation, I found 5 hidden Facebook Reactions: , , , , and… ? The only ones that had an icon were Fire and Airplane. Yay Confused Selfie Fire Airplane Hidden ‘Selfie’ Reaction with a missing icon Hidden ‘Like’ Reaction with a Fire icon Hidden ‘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, it actually took a while to reverse engineer and trace the component tree to find exactly where I could hook into, intercept, and modify the array programmatically, but eventually I found that everything I needed lived in 2 components called ‘ ’ and ‘ ’. supportedReactions UFICentralUpdates 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 easy in to hook and mutate data Inside I saw that it was subscribing to an event called which is called once the server responds with an object that so happens to contain the array. If I hook into this subscription, I can know exactly when I get the array and I could mutate it by appending our Thankful Reaction ID. The only question now was, after mutating it, how do I get it to propagate and actually reflect in the React app? UFIFeedbackTargets ‘update-feedback’ supportedReactions supportedReactions Once you’ve hooked into a callback, it’s time to broadcast your changes. Inside I saw that the same event 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 array, append ‘11’ to it, and broadcast the new object with the modified array. Now, since the code is both subscribing to and emitting the same event, we need to prevent an infinite callback loop. My logic was to simply check the size of the array when we receive it. If its size is 6, which is the current number of default Reactions, we append our new Thankful Reaction and emit it. The callback will again receive the array, but this time its size is 7, so we don’t emit anything. Once that event is emitted, React operates as usual and accepts our new props and now renders our beautiful floral Thankful Reaction. 😀 UFICentralUpdates supportedReactions supportedReactions Temporary Reactions can be fun but I really implore Facebook to offically bring back the Thankful Reaction. All things in life are temporary and it’s not until we lose the things that are important to us that we realize how much we truly appreciated them. It’s good to express our gratitude and let those we love know how much we care. Be Forever Thankful, on Facebook, and everywhere else. Thanks 🙏✌️ Install Forever Thankful on FB Extension Are you ready to show your thanks on Facebook? You can install the Chrome extension from the Chrome Web Store: _Chrome extension that brings back the thankful reaction because every day is a day for thanks._chrome.google.com Forever Thankful on FB Open Source on GitHub Curious how it really works? Feel free to check out the source code. _Forever-Thankful-On-FB - Chrome extension that brings back the Thankful Reaction because every day is a day for thanks._github.com CaliAlec/Forever-Thankful-On-FB

Facebook

Google

Instagram

Trace

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Companies Mentioned

Alec Garcia

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

Alec Garcia

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES