{"id":340,"date":"2017-11-27T20:01:00","date_gmt":"2017-11-27T20:01:00","guid":{"rendered":"http:\/\/www.infotheme.in\/blog\/?p=340"},"modified":"2022-08-10T11:44:06","modified_gmt":"2022-08-10T11:44:06","slug":"add-emoji-emoticons-to-website-without-coding","status":"publish","type":"post","link":"https:\/\/infotheme.net\/blog\/add-emoji-emoticons-to-website-without-coding\/","title":{"rendered":"How to Add Emoji Emoticons to your Website Without any Coding?"},"content":{"rendered":"<p>Hey How are you <a href=\"https:\/\/en.wikipedia.org\/wiki\/Emoji\" target=\"_blank\" rel=\"nofollow noopener\"><strong>Emojis<\/strong><\/a> \ud83d\ude42 So everyone using Emoticons&nbsp;in their every life. Even my GirlFriend send me&nbsp;:kissing: instead of real kiss over my website, oh sorry over my Whatsapp. Is it fair Guys! I think not, but as we all love these emoticons. And here you want to learn how to add emoji without any coding skills to your website. So guys just follow some steps to make it possible and get emoji emoticons on your website as i use it in this blog.<\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><ul><li><a href=\"#What_are_emoji_Emoticons\"><span class=\"toc_number toc_depth_2\">0.1<\/span> What are emoji Emoticons:<\/a><\/li><\/ul><\/li><li><a href=\"#How_to_Add_Emoji_Emoticons_to_Website\"><span class=\"toc_number toc_depth_1\">1<\/span> How to Add Emoji \/ Emoticons to Website<\/a><\/li><li><a href=\"#Conclusion\"><span class=\"toc_number toc_depth_1\">2<\/span> Conclusion:<\/a><\/li><\/ul><\/div>\n<h3><span id=\"What_are_emoji_Emoticons\">What are emoji Emoticons:<\/span><\/h3>\n<p>Emojis are some smileys which used in electronic or digital messages. It is also used in webpages. Emojis and emoticons are totally based on facial emotions and other objects as Mobile, Home, Temple Etc.&nbsp;In 1990 an Japanese Company found emojis. Hmm! I can understand why it&#8217;s name&nbsp;as emoji. It was also called as pictograph as the word emoji derived from japanese language. Now we will learn how to add emojis in our website.<\/p>\n<figure id=\"attachment_341\" aria-describedby=\"caption-attachment-341\" style=\"width: 650px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"size-full wp-image-341\" src=\"http:\/\/www.infotheme.in\/blog\/wp-content\/uploads\/2016\/11\/Add-Emojis-and-Emoticons-to-website.png\" alt=\"Add Emojis and Emoticons to website\" width=\"650\" height=\"350\"><figcaption id=\"caption-attachment-341\" class=\"wp-caption-text\">How to Add Emojis to my website<\/figcaption><\/figure>\n<h2><span id=\"How_to_Add_Emoji_Emoticons_to_Website\">How to Add Emoji \/ Emoticons to Website<\/span><\/h2>\n<p>Step 1: Open Notepad , Copy below code &amp; paste to notepad, and save it as <strong>emoticons.js<\/strong><\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">&amp;lt;\/pre&amp;gt;\n&amp;lt;pre&amp;gt;(function($, exports, window, name) {\n\nif (!exports) {\nexports = {};\n\nif ($) {\n$[name] = exports;\n} else {\nwindow[name] = exports;\n}\n}\n\nvar emoticons,\ncodesMap = {},\nprimaryCodesMap = {},\nregexp,\nmetachars = \/[[\\]{}()*+?.\\\\|^$\\-,&amp;amp;#\\s]\/g,\nentityMap;\n\nentityMap = {\n'&amp;amp;': '&amp;amp;amp;',\n'&amp;lt;': '&amp;amp;lt;',\n'&amp;gt;': '&amp;amp;gt;',\n'&quot;': '&amp;amp;quot;',\n&quot;'&quot;: '&amp;amp;#39;',\n'\/': '&amp;amp;#x2F;'\n};\n\nfunction escape(string) {\nreturn String(string).replace(\/[&amp;amp;&amp;lt;&amp;gt;&quot;'\\\/]\/g, function(s) {\nreturn entityMap[s];\n});\n}\n\n\/**\n* Define emoticons set.\n*\n* @param {Object} data\n*\/\nexports.define = function(data) {\nvar name, i, codes, code,\npatterns = [];\n\nfor (name in data) {\ncodes = data[name].codes;\nfor (i in codes) {\ncode = codes[i];\ncodesMap = name;\n\n\/\/ Create escaped variants, because mostly you want to parse escaped\n\/\/ user text.\ncodesMap[escape(code)] = name;\nif (i == 0) {\nprimaryCodesMap = name;\n}\n}\n}\n\nfor (code in codesMap) {\npatterns.push('(' + code.replace(metachars, &quot;\\\\$&amp;amp;&quot;) + ')');\n}\n\nregexp = new RegExp(patterns.join('|'), 'g');\nemoticons = data;\n};\n\n\/**\n* Replace emoticons in text.\n*\n* @param {String} text\n* @param {Function} [fn] optional template builder function.\n*\/\nexports.replace = function(text, fn) {\nreturn text.replace(regexp, function(code) {\nvar name = codesMap;\nreturn (fn || exports.tpl)(name, code, emoticons[name].title);\n});\n};\n\n\/**\n* Get primary emoticons as html string in order to display them later as overview.\n*\n* @param {Function} [fn] optional template builder function.\n* @return {String}\n*\/\nexports.toString = function(fn) {\nvar code,\nstr = '',\nname;\n\nfor (code in primaryCodesMap) {\nname = primaryCodesMap;\nstr += (fn || exports.tpl)(name, code, emoticons[name].title);\n}\n\nreturn str;\n};\n\n\/**\n* Build html string for emoticons.\n*\n* @param {String} name\n* @param {String} code\n* @param {String} title\n* @return {String}\n*\/\nexports.tpl = function(name, code, title) {\nreturn '&amp;lt;span class=&quot;emoticon emoticon-' + name + '&quot; title=&quot;' + title + '&quot;&amp;gt;' +\ncode + '&amp;lt;\/span&amp;gt;';\n};\n\n}(typeof jQuery != 'undefined' ? jQuery : null,\ntypeof exports != 'undefined' ? exports : null,\nwindow,\n'emoticons'));&amp;lt;\/pre&amp;gt;\n&amp;lt;pre&amp;gt;<\/pre>\n<p>Step 2: Follow the same process and copy below code and save as<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.emoticon {\ndisplay: inline-block;\nwidth: 20px;\nheight: 20px;\ntext-indent: -10000px;\ncursor: text;\nbackground: url('emoticons.png') no-repeat;\ntext-align: left;\n}\n.emoticon-smile { background-position: 0 0; }\n.emoticon-sad-smile { background-position: 0 -29px; }\n.emoticon-big-smile { background-position: 0 -58px; }\n.emoticon-cool { background-position: 0 -87px; }\n.emoticon-surprised { background-position: 0 -116px; }\n.emoticon-wink { background-position: 0 -145px; }\n.emoticon-crying { background-position: 0 -174px; }\n.emoticon-sweating { background-position: 0 -203px; }\n.emoticon-speechless { background-position: 0 -232px; }\n.emoticon-kiss { background-position: 0 -261px; }\n.emoticon-tongue-out { background-position: 0 -290px; }\n.emoticon-blush { background-position: 0 -319px; }\n.emoticon-wondering { background-position: 0 -348px; }\n.emoticon-sleepy { background-position: 0 -377px; }\n.emoticon-dull { background-position: 0 -406px; }\n.emoticon-in-love { background-position: 0 -435px; }\n.emoticon-evil-grin { background-position: 0 -464px; }\n.emoticon-talking { background-position: 0 -493px; }\n.emoticon-yawn { background-position: 0 -522px; }\n.emoticon-puke { background-position: 0 -551px; }\n.emoticon-doh { background-position: 0 -580px; }\n.emoticon-angry { background-position: 0 -609px; }\n.emoticon-speechless-1 { background-position: 0 -638px; }\n.emoticon-it-wasnt-me { background-position: 0 -667px; }\n.emoticon-kiss-1 { background-position: 0 -696px; }\n.emoticon-party { background-position: 0 -725px; }\n.emoticon-tongue-out-1 { background-position: 0 -754px; }\n.emoticon-wondering-1 { background-position: 0 -783px; }\n.emoticon-worried { background-position: 0 -812px; }\n.emoticon-mmm { background-position: 0 -841px; }\n.emoticon-sleepy-1 { background-position: 0 -870px; }\n.emoticon-dull-1 { background-position: 0 -899px; }\n.emoticon-nerd { background-position: 0 -928px; }\n.emoticon-evil-grin-1 { background-position: 0 -957px; }\n.emoticon-lips-sealed { background-position: 0 -986px; }\n.emoticon-hi { background-position: 0 -1015px; }\n.emoticon-call { background-position: 0 -1044px; }\n.emoticon-devil { background-position: 0 -1073px; }\n.emoticon-angel { background-position: 0 -1102px; }\n.emoticon-angry-1 { background-position: 0 -1131px; }\n.emoticon-envy { background-position: 0 -1160px; }\n.emoticon-worried-1 { background-position: 0 -1189px; }\n.emoticon-nerd-1 { background-position: 0 -1218px; }\n.emoticon-wait { background-position: 0 -1247px; }\n.emoticon-bear { background-position: 0 -1276px; }\n.emoticon-lips-sealed-1 { background-position: 0 -1305px; }\n.emoticon-make-up { background-position: 0 -1334px; }\n.emoticon-giggle { background-position: 0 -1363px; }\n.emoticon-clapping { background-position: 0 -1392px; }\n.emoticon-thinking { background-position: 0 -1421px; }\n.emoticon-bow { background-position: 0 -1450px; }\n.emoticon-rofl { background-position: 0 -1479px; }\n.emoticon-whew { background-position: 0 -1508px; }\n.emoticon-happy { background-position: 0 -1537px; }\n.emoticon-smirk { background-position: 0 -1566px; }\n.emoticon-nod { background-position: 0 -1595px; }\n.emoticon-shake { background-position: 0 -1624px; }\n.emoticon-punch { background-position: 0 -1653px; }\n.emoticon-emo { background-position: 0 -1682px; }\n.emoticon-yes { background-position: 0 -1711px; }\n.emoticon-no { background-position: 0 -1740px; }\n.emoticon-handshake { background-position: 0 -1769px; }\n.emoticon-skype { background-position: 0 -1798px; }\n.emoticon-heart { background-position: 0 -1827px; }\n.emoticon-broken-heart { background-position: 0 -1856px; }\n.emoticon-mail { background-position: 0 -1885px; }\n.emoticon-flower { background-position: 0 -1914px; }\n.emoticon-rain { background-position: 0 -1943px; }\n.emoticon-sun { background-position: 0 -1972px; }\n.emoticon-time { background-position: -29px 0; }\n.emoticon-music { background-position: -29px -29px; }\n.emoticon-movie { background-position: -29px -58px; }\n.emoticon-phone { background-position: -29px -87px; }\n.emoticon-coffee { background-position: -29px -116px; }\n.emoticon-pizza { background-position: -29px -145px; }\n.emoticon-cash { background-position: -29px -174px; }\n.emoticon-muscle { background-position: -29px -203px; }\n.emoticon-cake { background-position: -29px -232px; }\n.emoticon-beer { background-position: -29px -261px; }\n.emoticon-drink { background-position: -29px -290px; }\n.emoticon-dance { background-position: -29px -319px; }\n.emoticon-ninja { background-position: -29px -348px; }\n.emoticon-star { background-position: -29px -377px; }\n.emoticon-mooning { background-position: -29px -406px; }\n.emoticon-middlefinger { background-position: -29px -435px; }\n.emoticon-bandit { background-position: -29px -464px; }\n.emoticon-drunk { background-position: -29px -493px; }\n.emoticon-smoke { background-position: -29px -522px; }\n.emoticon-toivo { background-position: -29px -551px; }\n.emoticon-rock { background-position: -29px -580px; }\n.emoticon-headbang { background-position: -29px -609px; }\n.emoticon-bug { background-position: -29px -638px; }\n.emoticon-fubar { background-position: -29px -666px; }\n.emoticon-poolparty { background-position: -29px -695px; }\n.emoticon-swear { background-position: -29px -724px; }\n.emoticon-tmi { background-position: -29px -753px; }\n.emoticon-heidy { background-position: -29px -782px; }\n.emoticon-myspace { background-position: -29px -811px; }\n.emoticon-malthe { background-position: -29px -840px; }\n.emoticon-tauri { background-position: -29px -869px; }\n.emoticon-priidu { background-position: -29px -898px; }\n<\/pre>\n<p>Step 3: Now put these both files to your webpage.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;path_to_emoticons_file\/emoticons.css&quot; type=&quot;text\/css&quot;&amp;gt;\n\n&amp;lt;img src=&quot;data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20src%3D%22path_to_emoticons_file%2Femoticons.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;amp;lt;script&amp;amp;gt;&quot; title=&quot;&amp;amp;lt;script&amp;amp;gt;&quot; \/&amp;gt;\n\n<\/pre>\n<p>Step 4: Now try you&nbsp;emojis to your website buy just typing my favourite \"&lt;3\" &nbsp;&amp; &nbsp;\":)\". For more shortcodes of emojis visit: <a href=\"http:\/\/emoji.codes\/\" target=\"_blank\" rel=\"nofollow noopener\"><strong>Emoji Short Codes Cheet Sheet<\/strong><\/a><\/p>\n<h2><span id=\"Conclusion\">Conclusion:<\/span><\/h2>\n<p>I think these emojis will help you to make your content more attractive and user friendly. As i always use here some smilies to write something better for you. And if you guys still have some query about emoji and emoticons system. Or you haven't try it yet. So just try and ask me any time if you face any problem.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey How are you Emojis \ud83d\ude42 So everyone using Emoticons&nbsp;in their every life. Even my GirlFriend send me&nbsp;:kissing: instead of real kiss over my website, [&hellip;] <span class=\"read-more-link\"><a class=\"read-more\" href=\"https:\/\/infotheme.net\/blog\/add-emoji-emoticons-to-website-without-coding\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":341,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[135,138],"tags":[160,161],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/340"}],"collection":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/comments?post=340"}],"version-history":[{"count":2,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/340\/revisions"}],"predecessor-version":[{"id":1474,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/340\/revisions\/1474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/media?parent=340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/categories?post=340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/tags?post=340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}