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:

.x2 ._iuz {
background-image: url("chrome-extension://[email protected]@extension_id__/img/[email protected]") !important;
}

._iuz {
background-image: url("chrome-extension://[email protected]@extension_id__/img/trump-reactions.png") !important;
}

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.

You can find the original image sprites used by Facebook here (normal version) and here (high-definition version).

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?

Facebook reaction

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? :)

I share what I learn on Facebook