Facebook Style Emotions Jquery Plugin
Wall Script
Follow Me:
Monday, April 23, 2012

Facebook Style Emotions Jquery Plugin

Introducing a new jQuery emotions plugin, This helps you to convert text symbols to emotion images like how social chat editor works. This plugin developed by ArunKumar Sekar using javascript regular expression match rules. In first version we providing facebook emotion theme, next release we are going to include some more better emotion icons.

Facebook Style Emotions Jquery Plugin

Download Script     Live Demo

Developer
Arun Kumar Shekar
Arun Kumar Sekar
Engineer
Chennai, INDIA

The Basic Setup
Include the jQuery and emotions plugin libraries into your document using script tag.
<script src="js/jquery.js"></script>
<script  src="js/jquery.emotions.js"> </script>

These are the text codes for emotions names references.
NameIconCodeNameIconCode
Angel o:) Colonthree :3 
Confused o.O Cry :'( 
Devil 3:) Frown :( 
Gasp :O Glasses 8) 
Grin :D Grumpy >:( 
Heart <3 Kiki ^_^ 
Kiss :* PacMan :v 
Smile :) Squint -_- 
Sun Glasses 8| Toungue :p 
Unsure :/  Upset >:O 
Wink ;) 

Calling Plugin
$(document).ready(function()
{
$(“selector”).emotions();
});

Plugin Code
This code helps to replace text code to emotion icons using array mapping.
$.fn.emotions.defaults = {
a : "emotions-fb/", // Emotions folder
b : new Array("angel","colonthree","confused","cry","devil","frown","gasp","glasses","grin","grumpy","heart","kiki","kiss","pacman","smile","squint","sunglasses","tongue","unsure","upset","wink"), // Emotions Type
s : new Array("o:)",":3","o.O",":'(","3:)",":(",":O","8)",":D",">:(","<3","^_^",":*",":v",":)","-_-","8|",":p",":/",">:O",";)"),
c : "gif" // Emotions Image format
};

Example Usage
Included jQuery plugin in head tag and ajax code included in this jquery function $("#showText").emotions()- showText is the ID name of div tag. Emotions plugin helps to converts <3 to emotion icon.
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.emotions.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showText").emotions();
});
</script>
</head>
<body>
<div id='showText'>
I Love You <3
</div>
</body>
</html>

Plugin Variable Info
// Notes
// a - icon folder
// b - emotions name array
// c - image format
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


41 comments:

  1. You know what would be even cooler? To show smilies images direct in textarea after you enter smilie code ;)

    ReplyDelete
  2. Great plugin =)

    I am actually working on a chat based in ajax long polling, emoticons well be a great addon =)

    ReplyDelete
  3. smart way :)
    as long as facebook does not change emoticons...hihihi

    ReplyDelete
  4. Nice, Thank You

    ReplyDelete
  5. thanks.. awesome integration there..

    ReplyDelete
  6. I'm using php for my sites...

    $msg=eregi_replace('(:-?|\+)\){1,3}|:smile:|\*smile\*', '', $msg);


    :-)
    :)
    :smiles:
    *smiles*

    ReplyDelete
  7. this i have been searched for. Thanks a lot.

    ReplyDelete
  8. Very nice! I <3 it

    ReplyDelete
  9. Hi! Why don't u use it for your comments textarea?
    ;)

    ReplyDelete
  10. Hi! Nice job! How can we save the posts in a database? Thanks

    ReplyDelete
  11. nice plugin.....aussm! work @arun



    Share your code to web using http://codejaw.com

    ReplyDelete
  12. thank's so much and you continue your good thinking and be immortal to everyone

    ReplyDelete
  13. Is there a way to use the replace with jquery live?

    ReplyDelete
  14. great what if you type ":" or ";" and it automatically shows a list of emotions u can use :D

    ReplyDelete
  15. Nice post.Thanks for this great upload.

    ReplyDelete
  16. Nice tutorial! I tried the demo but the code does not work with multiple icons in a message, i tried to type two heart icons in the same message but its not working. It only replaces the first icon, if you would fix this issue?!, the tutorial would be perfect..

    ReplyDelete
  17. Seriously never seen a website on blogger look so awesome !

    ReplyDelete
  18. awesome great plugin that work so well.I am just try it works great.Thank you for your awesome post.

    ReplyDelete
  19. Superb plugin. I am also using blogger and i was looking for this plugin. Thanks for the share buddy. Gud luck.

    ReplyDelete
  20. why emotions.js code:
    repls.indexOf(o.s[j]) || repls.indexOf(encoded[j]

    by if check not

    repls.indexOf(o.s[j])!=-1 ||
    repls.indexOf(encoded[j]!=-1

    could you tell me? thanks a lot.

    ReplyDelete
  21. Hi Srinivas :)

    I can't use this plugin with WallScript 3.0.
    Can you help me ? (with a exemple plz ;))

    Thank you !

    ReplyDelete
  22. amazing thank u arun alot

    ReplyDelete
  23. yea, thanks bro.

    ReplyDelete
  24. Multiple entries of smileys doesn't work. So, to fix, update plugin code inside second for loop

    //Escape the ')' and '(' brackets
    var tempStrSmiley1 = o.s[j].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    var tempStrSmiley2 = encoded[j].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

    x.html(repls.replace(new RegExp(tempStrSmiley1, 'g'), rstr));
    x.html(repls.replace(new RegExp(tempStrSmiley2, 'g'), rstr));

    x.html(repls.replace(new RegExp(tempStrSmiley1, 'g'), rstr));
    x.html(repls.replace(new RegExp(tempStrSmiley2, 'g'), rstr));
    //alert(tempStrSmiley2)
    }

    ReplyDelete
  25. Hi Friends,
    Thanks for this, but i have to add text to link in this plugin like when i write www.goole.com or https://www.google.com or delhi.praveenkumar@gmail.com then it automatically convert into link, in this plugin this is not happenning, can you suggest me arround this.

    ReplyDelete
  26. How can i update the script to use multiple smiles ......any guide because i didn't understand the above help THANKS

    ReplyDelete
  27. Great article <3

    ReplyDelete
  28. utorial! I tried the demo but the code does not work with multiple icons in a message, i tried to type two heart icons in the same message but its not working. It only replaces the first icon, if you would fix this issue?!, the tutorial would be perfect..

    ReplyDelete
  29. The guy aboves answer is correct change the second for to...

    for(j=0; j";
    x.html(repls.replace(o.s[j],rstr));
    x.html(repls.replace(encoded[j],rstr));

    var tempStrSmiley1 = o.s[j].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    var tempStrSmiley2 = encoded[j].replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

    x.html(repls.replace(new RegExp(tempStrSmiley1, 'g'), rstr));
    x.html(repls.replace(new RegExp(tempStrSmiley2, 'g'), rstr));

    x.html(repls.replace(new RegExp(tempStrSmiley1, 'g'), rstr));
    x.html(repls.replace(new RegExp(tempStrSmiley2, 'g'), rstr));


    }
    }

    ReplyDelete

Make in India