Skip to main content
Snippets

Using Emoji in HTML using PHP

By March 15, 2016No Comments

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

Contact us to learn more about Adopt the Web for your business

Author Jarod Thornton

More posts by Jarod Thornton