Adding Emoji to a Web Page

I've decided that emoji are the 21st century version of cave wall drawings. What ever happened to using words?

I draw frog pictures online.
Emoji set designed and offered free by Emoji One

Anyway, I wanted to do a comic where the frogs talked to each other using emoji, but I quickly encountered several problems. The native emoji on Windows look terrible, and are incomplete. And knowing exactly what my mobile users would see was impossible due to inconsistencies between the different phone emoji sets. Additionally, I would have to make some code changes to Amphibian.com's editor because it destroys the extended Unicode character values that are required to write in emoji. As it turns out, emoji on the desktop web is a legitimate problem.

But there is a solution! I found Emoji One, open-source emoji engineered for the web. This is a great project that made adding emoji support to Amphibian.com extremely simple.

First, they provide their JavaScript and CSS files via CDN, so I didn't have to really install anything directly into my web application. Just a few lines of code into my header template...

<script
  src="//cdn.jsdelivr.net/emojione/1.5.2/lib/js/emojione.min.js">
</script>

<link rel="stylesheet"
  href="//cdn.jsdelivr.net/emojione/1.5.2/assets/css/emojione.min.css"
/>

Once that was done, I had a few options. They provide functions for converting both Unicode and shorthand (such as :frog:) into pictures. I decided to go with the shorthand version for my site, mainly because it allowed me to more easily write the comics from my desktop browser (Chrome on Windows).

When I write some lines for a frog's speech bubble, I can type

:pizza: + :bowling: @ :clock730: :question:

which is then converted to emoji when the page loads. It's not 100% automatic, though. I had to add a few lines of JavaScript to my site but it was really simple.

// Emojis! (See http://emojione.com/developers)
$(function() {

    $('.bubble, .free-text').each(function() {
        var origText = $(this).html();
        var eText = emojione.shortnameToImage(origText);
        $(this).html(eText);
    });

});

The above code relies on jQuery, which I use on my site. As soon as the page is done loading, it finds every element on the page that has a class of bubble or free-text (the classes I use for speech bubbles and floating text areas) and converts the contents to include emoji images. It happens fast enough that I haven't been able to catch the shorthand text in there, but there could theoretically be some flicker. If I was more serious about this I could do the conversion on the server side instead...but this is just for a comic about frogs.

Make sure you read today's emojinal comic so that you can appreciate all the work I had to do for it. I'm not sure if I'll use emojis in the future, but you never know...

Amphibian.com comic for 30 November 2015