Here’s the technical detail on how I integrated an emoji library to be used in HTML via PHP.
The first obstacle I faced was understanding how the Bytes (UTF-8) were being structured for use as Unicode. If you look through the code and notice references like 0x1f4aa
remove the 0x
and add U+
, and there’s the Unicode, which in this example would be U+1f4aa
. So to modify our code to use different emoji we need to reference a chart with all the Unicode. The best chart I’ve found is at http://unicode.org/emoji/charts/full-emoji-list.html
Process Emoji in PHP
This is a PHP library for dealing with Emoji, allowing you to convert between various native formats and displaying them using HTML. http://code.iamcal.com/php/emoji/ – you can read up on the project here http://www.iamcal.com/emoji-in-web-apps/.
For my lack of experience with some of this stuff, I had to reverse engineer the code. First is calling the library itself include('emoticons/lib/emoji.php');
(the directory you have the library may vary). The next step was to setup the variables which is easy enough. Create your variable $my_emoji_variable
, don’t change anything except the reference to the Unicode i.e. 0x1f4aa
. This is based on the example above where I explain how to get the Unicode value. If you read through my comments in the full code that I used, you will see how it all comes together.
There’s a function that comes next, but I can’t tell you what it does exactly. I will reference it below in a snippet.
Next we need to reference the emoji library assets, only requires two steps. First you see our variable as defined above, foreach ($my_emoji_variable as $unified){
, some fancy stuff happens and we then define the next value, which is the converted Unicode from Bytes UTF-8, $my_emoji = "$bytes";
. The last step to get our emoji to HTML is simple, emoji_unified_to_html($my_emoji);
. I ended up writing a unique variable for this so I could simplify the PHP I wrote, something like this, $tough_guy = emoji_unified_to_html($my_emoji);
. Finally we now have an emoji to use in our code, echo $the_emoji;
.
Let’s look at what we have now.
// First the complicated bit where we setup our emoji magic // Include our emoji script library include('emoticons/lib/emoji.php'); // We need to reference the emoji stylesheet for use in HTML echo '<link href="emoticons/lib/emoji.css" rel="stylesheet" type="text/css" />'; // These are complex emoji variables to use later in our simple variables $my_emoji_variable = array( array(0x1f4aa), // Tough Guy Emoji ); /* I have no idea what this function actually does but if it is not included the script won't work */ function utf8_bytes($cp){ if ($cp > 0x10000){ return chr(0xF0 | (($cp & 0x1C0000) >> 18)). chr(0x80 | (($cp & 0x3F000) >> 12)). chr(0x80 | (($cp & 0xFC0) >> 6)). chr(0x80 | ($cp & 0x3F)); } } /* This code takes those emoji variables and converts it into unified code so we can see the emoji in our HTML. I will create new variables to use in my conditional php output */ foreach ($my_emoji_variable as $unified){ $bytes = ''; $hex = array(); foreach ($unified as $cp){ $bytes .= utf8_bytes($cp); $hex[] = sprintf('U+%04X', $cp); } $my_emoji = "$bytes"; } // We can simplify the use of our emoji variables $tough_guy = emoji_unified_to_html($my_emoji); // Ok, lets do this - first some CSS to make the emoji a little larger than normal echo '<style type="text/css">span.emoji-sizer {font-size: 4.375em;}</style><p>Patience is a virtue - give it a second.</p>'.$tough_guy.'<p><small><a target="_blank" href="https://adopttheweb.com/2016/03/15/using-emoji-tell-cute-story/">- back to adopttheweb.com original write-up -</a></small></p>'; // That should work :D
Let’s see how this looks – https://adopttheweb.com/scripts/test-emoji.php