Facebook stores multiple images in an image atlas and loads them using CSS padding in order to reduce loading times. Some of these atlases contain images, notably emotes, that are not present in the default pop-up and this article shows how to extract them.

Facebook uses Akamai as a CDN to deliver assets such as scripts, css and images. By typing an emoticon, it can be inspected in Safari in order to see the CSS rules that apply to that emoticon.

The same can be achieved by browsing the source-code of the page but Safari offers a convenient method of tracing all the CSS rules that apply to some element. In this case it seems that all the emoticons are generated using spans, each span marked with a certain class that is encoded in a CSS delivered from the Akamai CDN.

For example, the fireball in the image above is placed in a span:

<span class="_1az _1a- _492"></span>

where _1az displays the emoticon as a block, with top vertical alignment and the _1a- class contains the following:

._1a- {
height: 16px;
width: 16px;
margin: 0 1px 0 1px;
}

This indicates that all the emoticons are 16x16 pixels.

The last referenced class _492 contains the following:

._492._1a- {
background-image: url(/rsrc.php/v2/yL/r/p6FV-SxbpZT.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -51px -833px;
}

and gives away the location of the image atlas. Following the link:

http://fbstatic-a.akamaihd.net/rsrc.php/v2/yL/r/p6FV-SxbpZT.png

we find the image atlas. and from the _492 class we can see that the coordinates of the fireball are -51px -833px.

All of the images, are referenced in the C487-H7KI3R.css at:

http://fbstatic-a.akamaihd.net/rsrc.php/v2/yH/r/C487-H7KI3R.css

where, if we look for _492, we find the CSS class:

._492._1a-{background-image:url(/rsrc.php/v2/yL/r/p6FV-SxbpZT.png);background-repeat:no-repeat;background-size:auto;background-position:-51px -833px}

which is applied to the span and hence generates the image from the image atlas.

Looking at the UTF code for the fire emoticon, we find it at U+1F525 and notice that it corresponds to the decimal HTML entity 128293. This means that we can start search scripts on Facebook to locate the number 128293, or any reference to UTF where Facebook would map UTF characters to either emoticons or CSS classes called _492.

We can now look at the ikBZ96hTyHA.js Javascript file and establish a map from CSS classes such as _492 to UTF codes like 128293 using a PHP script. The difficulty lies in extracting the j= after the SupportedEmojis in the javascript file such that it does not conflict with the other j= tokens in the javascript file.