● 【emoji表示ライブラリその1】jQueryEmoji による絵文字の表示

表示したい絵文字を、Aopple絵文字、Twitter絵文字、Microsoft絵文字から選択できます。
https://github.com/rodrigopolo/jqueryemoji
デモ : https://rodrigopolo.github.io/jqueryemoji/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jQueryEmoji.js"></script>
<link href="css/style.css" rel="stylesheet">

<script>
$(function(){
    $('p').Emoji({
        path:  '/emoji/jqueryemoji/img/apple72/',
        class: 'emoji',
        ext:   'png'
    });
});
</script>

● 【emoji入力ライブラリその1】wedgies/jquery-emoji-picker による絵文字の入力

https://github.com/wedgies/jquery-emoji-picker

デモ : http://wedgies.github.io/jquery-emoji-picker/demo.html

使い方

<link rel="stylesheet" type="text/css" href="./jquery-emoji-picker/css/jquery.emojipicker.css">
<link rel="stylesheet" type="text/css" href="./jquery-emoji-picker/css/jquery.emojipicker.a.css">
<script type="text/javascript" src="./jquery-emoji-picker/js/jquery.emojipicker.js"></script>
<script type="text/javascript" src="./jquery-emoji-picker/js/jquery.emojis.js"></script>
<script>
$(document).ready(function(){
	$('.emoji').emojiPicker({
	height: '300px',
	width:  '450px'
	});
});
</script>

inputタグを下記のように変更します。

<input type="text">

　　↓

<input type="text" class="emoji">

● 【emoji入力ライブラリその2】OneSignal/emoji-picker による絵文字の入力

https://github.com/OneSignal/emoji-picker
デモ : http://onesignal.github.io/emoji-picker/

特徴

• ＜input type="text"＞ タグの上の表示用レイヤーを作成するのでブラウザによる見え方の違いがありません。
• 上記理由により動的に入力タグのサイズを変更するスクリプトとは相性が良くないです。

・使い方

<link  href="{$config.root_uri}/emoji-picker/lib/css/nanoscroller.css" rel="stylesheet">
<link  href="{$config.root_uri}/emoji-picker/lib/css/emoji.css" rel="stylesheet">

<script src="{$config.root_uri}/emoji-picker/lib/js/nanoscroller.min.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/tether.min.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/config.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/util.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/jquery.emojiarea.js"></script>
<script src="{$config.root_uri}/emoji-picker/lib/js/emoji-picker.js"></script>

<script>
$(function() {
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath        : './lib/img/',
    popupButtonClasses: 'fa fa-smile-o' ,
    xoffset : 500 ,
  });
  window.emojiPicker.discover();
});
</script>

inputタグを下記のように変更します。

<input type="text">

　　↓

<input type="text" data-emojiable="true">