Emoji One is a complete set of emojis designed for the web. It includes libraries to easily convert unicode characters to shortnames (:smile:) and shortnames to our custom emoji images. PNG and SVG formats provided for the emoji images.
#
Emoji One
bringing you emojione.com & emoji.codes
The web's first and only complete open source emoji set. It is 100% free and super easy to integrate.
To standardize emojis on the web through the use of common :shortnames:.
User inputted :shortnames: should be stored as-is and then replaced with the matching emoji images when outputting client side. Likewise, Unicode emojis inputted (mainly from mobiles and tablets) should be converted to their corresponding :shortname: before storing in your database.
This allows you to quickly add emoji support to your forums, guestbooks, blogs, and other web applications.
We've provided simple Javascript and PHP libraries for converting :shortnames: to emoji images, and Unicode emojis to :shortnames:. See below for usage instructions.
What Shortnames?
emoji.codes has a complete list of shortnames as well as quick copy & search functions.
There are a couple different ways to implement Emoji One on your website. To make things as easy as possible, we've chosen to host our emoji images and Javascript library on jsDelivr. This makes it so that you never have to worry about updating the emoji images locally, because when we do updates, we'll simply push them to jsDelivr and they'll be updated on your applications.
We recommend using the PHP library for most custom applications, but implementation is completely up to you. You may use only the Javascript or PHP library or a mixture of both. Whatever you decide, we recommend that when you store user-inputted text, you make sure to store only the :shortnames:. The flow is as follows:
Below is an example of a Javascript-only implemention of Emoji One.
Include the Javascript library
<head>
<!-- include via jsDelivr (or download and host locally if you prefer) -->
<script src="//cdn.jsdelivr.net/emojione/1.0.7/lib/js/emojione.min.js" type="text/javascript"></script>
<!-- basic rules for styling the emoji images -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/emojione/1.0.7/assets/css/emojione.min.css" type="text/css" media="all" />
<script type="text/javascript">
// #################################################
// # Optional
// default is PNG but you may also use SVG
emojione.imageType = 'svg';
// default is jsDelivr but you can also change the paths
// if you want to host the images somewhere else
emojione.imagePathPNG = './../images/png/';
emojione.imagePathSVG = './../images/svg/';
// #################################################
</script>
</head>
Before text is sent to your server, convert any Unicode emojis to shortnames:
<form onsubmit="convert();">
<textarea id="myTextarea">Hello World! 😄</textarea>
</form>
<script type="text/javascript">
function convert() {
// get the inputted text
var inputted = document.getElementById('myTextarea').value;
// convert to shortnames to standardize the text
var converted = emojione.toShort(inputted);
// update textarea with new text
document.getElementById('myTextarea').innerHTML = converted;
}
</script>
<textarea id="myTextarea">Hello World! :smile:</textarea>
<script type="text/javascript">
// get the standardized text
var inputted = document.getElementById('myTextarea').value;
// convert shortnames emoji images
var converted = emojione.toImage(inputted);
// update textarea with new text
document.getElementById('myTextarea').innerHTML = converted;
</script>
Below is an example of a PHP only implemention of Emoji One.
# include the PHP library (if not autoloaded)
require('Emojione.class.php');
# $string would normally be text submitted from a form
$string = 'Hello world! 😄';
# convert text to shortnames
$convertedString = Emojione::toShort($string);
###
# This is where you'd now store the standardized text in your database
###
# include the PHP library (if not autoloaded)
require('Emojione.class.php');
################################################
# Optional:
# default is PNG but you may also use SVG
Emojione::$imageType = 'svg';
# default is jsDelivr but you can also change the paths
# if you want to host the iamges somewhere else
Emojione::$imagePathPNG = './../images/png/';
Emojione::$imagePathSVG = './../images/svg/';
################################################
# $string would normally standardized text retrieve from your database
$string = 'Hello world! :smile:';
# convert shortnames to images
$convertedString = Emojione::toImage($string);
###
# This is where you'd now output the converted text to the browser
###
Character Encoding — UTF-8
If you're getting serious about implementing emojis into your website, you will want to consider your web stack's character encoding. You should make sure that all connection points are using the same encoding. There's a lot of options and configuration possibilies here, so you'll have to figure what works best depending on your own situation.
A quick Google search will bring up a lot of information on how to get your entire web stack to use UTF-8, which is needed to properly handle Unicode emojis.
To get you started, here's a nice guide: UTF-8: The Secret of Character Encoding.
If you have any questions, comments, or concerns you are welcome to contact us.
If you discover any bugs, feel free to create an issue on GitHub. We also welcome the open-source community to contribute to the project by forking it and issuing pull requests.
We sincerely hope that you choose to use Emoji One and support our project, but if you feel like it's not for you please have a look at these possible alternatives:
FAQs
EmojiOne is a complete set of emojis designed for the web. It includes libraries to easily convert unicode characters to shortnames (:smile:) and shortnames to our custom emoji images. PNG formats provided for the emoji images.
We found that emojione demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.