For those who don't spend all day working with Facebook (hi application deveopers!) or obsessively follow Web 2.0 news, Facebook has rolled out a limited release of their chat service.
I'll save the editorializing for another day and keep my hacker hat on. I was chatting with another friend when I noticed that the client supports emoticons and smilies. "Hmm, that's interesting," I thought. "I wonder what emoticons and smilies it supports?"
The List
Some people probably just want the complete list of smilies, so here it is. If you want to see how I figured it out (some of them are less than guessable), keep on readin'.
| :) | :( | :P | :D | :O | ;) | 8) | 8| | >:( | :\ | :'( | 3:) | O:) | :-* | <3 | ^_^ | -_- | O.o | >:o | :v | :3 | :|] | :putnam: |
Probing the Packets
I learned to program by hacking on an IM client, so play around with Facebook's chat brought back some fond memories. With Pidgin (or Gaim, as it was called at the time), I implemented the Yahoo! privacy controls by using Ethereal and analyzing the packets sent and received by the official Yahoo! IM client.
The closest we get to Ethereal for Javascript is Firebug, which lets you do all sorts of wonderful things. Looking at what was being sent back and forth I noticed the following image being bandied about:
![]()
Most of those emoticons are easy enough to figure out, but some, like the Pac-man and devil icons, aren't easily guessable. That meant it was time to dig through the source and see if I could find the icons.
The first thing I did was look for the function that controlled the chat. This is right in the source and looks like
So I started up Firebug and did a console.log(fbChatDisplay), which showed me that I could find it in common.js.pkg.php. Note: This JS file is versioned. You'll have to view the Facebook source to get the latest URL.
From there it was pretty easy. I just searched for the emoticons which revealed the complete list, including the :putnam: icon which is an Easter Egg. I'm guessing it's an icon of Chris Putnam, a Facebook engineer.
I showed this to some of my friends who work in customer support and engineering at Facebook and none of them knew about this stuff, so I thought getting it out in public might be worthwhile.
If you find anything else interesting about Facebook chat feel free to share it with me. I'm all ears.
Errata
Since writing this article Facebook changed one emoticon and added two new ones. Pac-man is now :v instead of :V: and there is now a robot emoticon, :|] and a moustache-man emoticon, :3. They're included in the list above.
Also, one of the commenters informed me that the :putnam: icon is a shout-out to the SomethingAwful forums, where Chris Putnam used to be a regular.
[…] Facebook recently rolled out their chat application to a few limited networks. According to the writers over at 20bits.com the new chat supports emoticons. Pictured above are the emoticons (minus the bunny and arrow) that […]
[…] this week, Jesse Farmer notified me of a post he wrote about some interesting findings after hacking around with the new […]
The pacman one got removed… licensing issue? lol
Satish,
Yeah, I need to update the article. :v is now Pac-man, and there’s also a robot emoticon: :|]
:3
Putnam lives!!
the :putnam: and :v at least are from Something Awful, a forum Chris Putnam used to post on (before he got run out for being basically retarded).
evan,
Good to know! I wondered why this thread was getting so much traffic from the SA forums.
all the icons
:) :( :’( :D ;) :P :-/ :-( >:o O.o -_- 3:)
:putnam: :v :|] :3
the best,
Yep. I added them to the blog post. Thanks!
“The closest we get to Ethereal for Javascript is Firebug”
You might want to take a look at Charles ( http://www.xk72.com/charles/ ) - it’s an excellent debugging proxy that allows you to see exactly what’s going on with ajax-y applications
umm two of your symbols were wrong.
it should be ;) not ;(
and :’( not :’)
but other than that you guys are freaking awesome!
Cazcade,
Good catch. I changed it.
thx, but honestly this site is amazing! I wish eveything was just this straightforward.. if only physics were that easy…. everything in logical order on one site…