9lessons programming blog
Loading Search
9lessons Bring Friends
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
Comments
{ 38 comments }
huzoorbux said...

Nice one.. :)

Lucifix said...

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

Bruno Seixas said...

Great plugin =)

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

Beben Koben said...

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

John said...

very good!

Anonymous said...

Good Job

Anonymous said...

Nice, Thank You

Lazaac [ Dot ] Com said...

thanks.. awesome integration there..

Rusdimori said...

I'm using php for my sites...

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


:-)
:)
:smiles:
*smiles*

Anonymous said...

this i have been searched for. Thanks a lot.

Jonathan said...

WOW i LOVE IT

andy said...

Nice one.. :)

Loganathan Natarajan said...

good one...

Anonymous said...

Very nice! I <3 it

Anonymous said...

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

Anonymous said...

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

Peter said...

Great article, thanks!

adumpaul said...

Nice Jquery plugin.Thank you.

Anonymous said...

Good One

Anoy said...

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



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

riazuddin said...

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

TMarsiglia said...

Nice guy! :)

hjemmeside said...

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

David said...

Nice work.Thank you.

Faraz Khan said...

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

Free Tickets & Jobs said...

Nice post.Thanks for this great upload.

Joey said...

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..

Prakhar said...

Seriously never seen a website on blogger look so awesome !

rajo said...

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

Ramit Hooda said...

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

Anonymous said...

very good

Tony said...

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.

Saga Roth said...

Hi Srinivas :)

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

Thank you !

Anonymous said...

amazing thank u arun alot

Anonymous said...

yea, thanks bro.

Anonymous said...

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)
}

Praveen Kumar said...

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.

kabiru sada said...

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

Post a Comment