How to customize the new Facebook Reactions
Two days ago I wrote a Chrome extension that replaces emojis in Facebook Reactions by Donald Trump pictures (sorry).
This has been well shared on social networks, which is pretty cool for a 2-hours project.
Also, several developers asked my to open source the project. Here is the repo on Github: https://github.com/FGrante/trump-reactions/
Actually, the hack is done with only one CSS property:
I dug into Facebook’s DOM and found that the class used for reaction images was
._iuz. The images are displayed with a CSS
background-image which imports an image sprite with all the emojis. The
.x2 class is added for Retina screens to import the sprite with a higher resolution.
Note that there is still the “Yay!” reaction removed by Facebook. Also, I discovered another reaction in the image which is not currently deployed. Maybe will it be added soon?
Let’s improve it!
I built this extension because it was a fun and quick hack, but I don’t have time to work on it. Now that the trick is known, I’m pretty sure other people will be excited to improve it.
I think the winning extension will be the one that will let anyone create its own set of pictures to display, rather than those simply re-published with new pictures. It would require to let users upload images, automatically generate the sprite and then inject it in Facebook’s pages.
Who wants to build it? :)