How to Guide, Web Development

How to Add Emoji Emoticons to your Website Without any Coding?

Posted onAuthorTeam InfoTheme

Hey How are you Emojis 🙂 So everyone using Emoticons in their every life. Even my GirlFriend send me :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.

What are emoji Emoticons:

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. In 1990 an Japanese Company found emojis. Hmm! I can understand why it’s name 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.

Add Emojis and Emoticons to website
How to Add Emojis to my website

How to Add Emoji / Emoticons to Website

Step 1: Open Notepad , Copy below code & paste to notepad, and save it as emoticons.js

</pre>
<pre>(function($, exports, window, name) {

if (!exports) {
exports = {};

if ($) {
$[name] = exports;
} else {
window[name] = exports;
}
}

var emoticons,
codesMap = {},
primaryCodesMap = {},
regexp,
metachars = /[[\]{}()*+?.\\|^$\-,&#\s]/g,
entityMap;

entityMap = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'/': '/'
};

function escape(string) {
return String(string).replace(/[&<>"'\/]/g, function(s) {
return entityMap[s];
});
}

/**
* Define emoticons set.
*
* @param {Object} data
*/
exports.define = function(data) {
var name, i, codes, code,
patterns = [];

for (name in data) {
codes = data[name].codes;
for (i in codes) {
code = codes[i];
codesMap = name;

// Create escaped variants, because mostly you want to parse escaped
// user text.
codesMap[escape(code)] = name;
if (i == 0) {
primaryCodesMap = name;
}
}
}

for (code in codesMap) {
patterns.push('(' + code.replace(metachars, "\\$&") + ')');
}

regexp = new RegExp(patterns.join('|'), 'g');
emoticons = data;
};

/**
* Replace emoticons in text.
*
* @param {String} text
* @param {Function} [fn] optional template builder function.
*/
exports.replace = function(text, fn) {
return text.replace(regexp, function(code) {
var name = codesMap;
return (fn || exports.tpl)(name, code, emoticons[name].title);
});
};

/**
* Get primary emoticons as html string in order to display them later as overview.
*
* @param {Function} [fn] optional template builder function.
* @return {String}
*/
exports.toString = function(fn) {
var code,
str = '',
name;

for (code in primaryCodesMap) {
name = primaryCodesMap;
str += (fn || exports.tpl)(name, code, emoticons[name].title);
}

return str;
};

/**
* Build html string for emoticons.
*
* @param {String} name
* @param {String} code
* @param {String} title
* @return {String}
*/
exports.tpl = function(name, code, title) {
return '<span class="emoticon emoticon-' + name + '" title="' + title + '">' +
code + '</span>';
};

}(typeof jQuery != 'undefined' ? jQuery : null,
typeof exports != 'undefined' ? exports : null,
window,
'emoticons'));</pre>
<pre>

Step 2: Follow the same process and copy below code and save as

.emoticon {
display: inline-block;
width: 20px;
height: 20px;
text-indent: -10000px;
cursor: text;
background: url('emoticons.png') no-repeat;
text-align: left;
}
.emoticon-smile { background-position: 0 0; }
.emoticon-sad-smile { background-position: 0 -29px; }
.emoticon-big-smile { background-position: 0 -58px; }
.emoticon-cool { background-position: 0 -87px; }
.emoticon-surprised { background-position: 0 -116px; }
.emoticon-wink { background-position: 0 -145px; }
.emoticon-crying { background-position: 0 -174px; }
.emoticon-sweating { background-position: 0 -203px; }
.emoticon-speechless { background-position: 0 -232px; }
.emoticon-kiss { background-position: 0 -261px; }
.emoticon-tongue-out { background-position: 0 -290px; }
.emoticon-blush { background-position: 0 -319px; }
.emoticon-wondering { background-position: 0 -348px; }
.emoticon-sleepy { background-position: 0 -377px; }
.emoticon-dull { background-position: 0 -406px; }
.emoticon-in-love { background-position: 0 -435px; }
.emoticon-evil-grin { background-position: 0 -464px; }
.emoticon-talking { background-position: 0 -493px; }
.emoticon-yawn { background-position: 0 -522px; }
.emoticon-puke { background-position: 0 -551px; }
.emoticon-doh { background-position: 0 -580px; }
.emoticon-angry { background-position: 0 -609px; }
.emoticon-speechless-1 { background-position: 0 -638px; }
.emoticon-it-wasnt-me { background-position: 0 -667px; }
.emoticon-kiss-1 { background-position: 0 -696px; }
.emoticon-party { background-position: 0 -725px; }
.emoticon-tongue-out-1 { background-position: 0 -754px; }
.emoticon-wondering-1 { background-position: 0 -783px; }
.emoticon-worried { background-position: 0 -812px; }
.emoticon-mmm { background-position: 0 -841px; }
.emoticon-sleepy-1 { background-position: 0 -870px; }
.emoticon-dull-1 { background-position: 0 -899px; }
.emoticon-nerd { background-position: 0 -928px; }
.emoticon-evil-grin-1 { background-position: 0 -957px; }
.emoticon-lips-sealed { background-position: 0 -986px; }
.emoticon-hi { background-position: 0 -1015px; }
.emoticon-call { background-position: 0 -1044px; }
.emoticon-devil { background-position: 0 -1073px; }
.emoticon-angel { background-position: 0 -1102px; }
.emoticon-angry-1 { background-position: 0 -1131px; }
.emoticon-envy { background-position: 0 -1160px; }
.emoticon-worried-1 { background-position: 0 -1189px; }
.emoticon-nerd-1 { background-position: 0 -1218px; }
.emoticon-wait { background-position: 0 -1247px; }
.emoticon-bear { background-position: 0 -1276px; }
.emoticon-lips-sealed-1 { background-position: 0 -1305px; }
.emoticon-make-up { background-position: 0 -1334px; }
.emoticon-giggle { background-position: 0 -1363px; }
.emoticon-clapping { background-position: 0 -1392px; }
.emoticon-thinking { background-position: 0 -1421px; }
.emoticon-bow { background-position: 0 -1450px; }
.emoticon-rofl { background-position: 0 -1479px; }
.emoticon-whew { background-position: 0 -1508px; }
.emoticon-happy { background-position: 0 -1537px; }
.emoticon-smirk { background-position: 0 -1566px; }
.emoticon-nod { background-position: 0 -1595px; }
.emoticon-shake { background-position: 0 -1624px; }
.emoticon-punch { background-position: 0 -1653px; }
.emoticon-emo { background-position: 0 -1682px; }
.emoticon-yes { background-position: 0 -1711px; }
.emoticon-no { background-position: 0 -1740px; }
.emoticon-handshake { background-position: 0 -1769px; }
.emoticon-skype { background-position: 0 -1798px; }
.emoticon-heart { background-position: 0 -1827px; }
.emoticon-broken-heart { background-position: 0 -1856px; }
.emoticon-mail { background-position: 0 -1885px; }
.emoticon-flower { background-position: 0 -1914px; }
.emoticon-rain { background-position: 0 -1943px; }
.emoticon-sun { background-position: 0 -1972px; }
.emoticon-time { background-position: -29px 0; }
.emoticon-music { background-position: -29px -29px; }
.emoticon-movie { background-position: -29px -58px; }
.emoticon-phone { background-position: -29px -87px; }
.emoticon-coffee { background-position: -29px -116px; }
.emoticon-pizza { background-position: -29px -145px; }
.emoticon-cash { background-position: -29px -174px; }
.emoticon-muscle { background-position: -29px -203px; }
.emoticon-cake { background-position: -29px -232px; }
.emoticon-beer { background-position: -29px -261px; }
.emoticon-drink { background-position: -29px -290px; }
.emoticon-dance { background-position: -29px -319px; }
.emoticon-ninja { background-position: -29px -348px; }
.emoticon-star { background-position: -29px -377px; }
.emoticon-mooning { background-position: -29px -406px; }
.emoticon-middlefinger { background-position: -29px -435px; }
.emoticon-bandit { background-position: -29px -464px; }
.emoticon-drunk { background-position: -29px -493px; }
.emoticon-smoke { background-position: -29px -522px; }
.emoticon-toivo { background-position: -29px -551px; }
.emoticon-rock { background-position: -29px -580px; }
.emoticon-headbang { background-position: -29px -609px; }
.emoticon-bug { background-position: -29px -638px; }
.emoticon-fubar { background-position: -29px -666px; }
.emoticon-poolparty { background-position: -29px -695px; }
.emoticon-swear { background-position: -29px -724px; }
.emoticon-tmi { background-position: -29px -753px; }
.emoticon-heidy { background-position: -29px -782px; }
.emoticon-myspace { background-position: -29px -811px; }
.emoticon-malthe { background-position: -29px -840px; }
.emoticon-tauri { background-position: -29px -869px; }
.emoticon-priidu { background-position: -29px -898px; }

Step 3: Now put these both files to your webpage.


<link rel="stylesheet" href="path_to_emoticons_file/emoticons.css" type="text/css">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22path_to_emoticons_file%2Femoticons.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

Step 4: Now try you emojis to your website buy just typing my favourite "<3"  &  ":)". For more shortcodes of emojis visit: Emoji Short Codes Cheet Sheet

Conclusion:

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.

9 Replies to “How to Add Emoji Emoticons to your Website Without any Coding?”

  3. Interesting and thank you for sharing knowledge !
    Just please revise your instructions:

    Step 2: Follow the same process and copy below code and save as
    (as what??? I guess it should be emoticons.css ? )

    Step 3: Now put these both files to your webpage
    (put where ? in or in ? or it could be in ?
    together or can be separated?

    Step 4: “<3" & ":)" can be typed anywhere, within some text, I guess ?

    Tks for clarifying !
    Best regards
    Paulo

    Reply

    1. Hey Paulo! Thanks for you great feedback here.

      Yes which you told here that’s true and it’s right, and you also revealed some cache of my writing that’s great. It’s great to see you here.

      Thanks and most welcome.

      Reply

  5. Hi Rahul,

    Thanks!

    I am using Squarespace and cannot upload files. Any way to enable this through the simple ‘Custom CSS’ window?

    Reply

    1. Oh’o! That’s weird, but i think square space is a platform, where you can create your website, it’s something like a website builder, so there may be you don’t have permission to do that. Please describe it more and send some screenshot urls. Thanks

      Reply

  6. Hello dear
    I have just did what you said but it seems like it’s not working.
    I have question : where did you include the .js file there is no reference to it in the html?

    Reply

    1. (function($, exports, window, name) {

      if (!exports) {
      exports = {};

      if ($) {
      $[name] = exports;
      } else {
      window[name] = exports;
      }
      }

      var emoticons,
      codesMap = {},
      primaryCodesMap = {},
      regexp,
      metachars = /[[]{}()*+?.|^$-,&#s]/g,
      entityMap;

      entityMap = {
      ‘&’: ‘&’,
      ‘<': '<', '>‘: ‘>’,
      ‘”‘: ‘"’,
      “‘”: ‘'’,
      ‘/’: ‘/’
      };

      function escape(string) {
      return String(string).replace(/[&<>“‘/]/g, function(s) {
      return entityMap[s];
      });
      }

      /**
      * Define emoticons set.
      *
      * @param {Object} data
      */
      exports.define = function(data) {
      var name, i, codes, code,
      patterns = [];

      for (name in data) {
      codes = data[name].codes;
      for (i in codes) {
      code = codes[i];
      codesMap = name;

      // Create escaped variants, because mostly you want to parse escaped
      // user text.
      codesMap[escape(code)] = name;
      if (i == 0) {
      primaryCodesMap = name;
      }
      }
      }

      for (code in codesMap) {
      patterns.push(‘(‘ + code.replace(metachars, “$&”) + ‘)’);
      }

      regexp = new RegExp(patterns.join(‘|’), ‘g’);
      emoticons = data;
      };

      /**
      * Replace emoticons in text.
      *
      * @param {String} text
      * @param {Function} [fn] optional template builder function.
      */
      exports.replace = function(text, fn) {
      return text.replace(regexp, function(code) {
      var name = codesMap;
      return (fn || exports.tpl)(name, code, emoticons[name].title);
      });
      };

      /**
      * Get primary emoticons as html string in order to display them later as overview.
      *
      * @param {Function} [fn] optional template builder function.
      * @return {String}
      */
      exports.toString = function(fn) {
      var code,
      str = ”,
      name;

      for (code in primaryCodesMap) {
      name = primaryCodesMap;
      str += (fn || exports.tpl)(name, code, emoticons[name].title);
      }

      return str;
      };

      /**
      * Build html string for emoticons.
      *
      * @param {String} name
      * @param {String} code
      * @param {String} title
      * @return {String}
      */
      exports.tpl = function(name, code, title) {
      return ‘‘ +
      code + ‘      ‘;
      };

      }(typeof jQuery != ‘undefined’ ? jQuery : null,
      typeof exports != ‘undefined’ ? exports : null,
      window,
      ’emoticons’));
      this is emoji.js file and you have to save css file also as emoji.css

      after that you have to include it to html such as




      This is really a funny moment 🙂


      Thanks to ask and give your feedback to us.

      Reply

Leave a Reply

Your email address will not be published.