Add Smiley’s to text
I’m using this script on my site, and I just realized I never documented it here. Bascially this script will add whatever code you want to the text box you specify. On my blog, I use it to add smiley icons (you click on a smiley icon, and the code is written for you). There’s another script that Lynda had posted on her site (the link I have doesn’t work anymore) that will scan your text and replace
with the actual image, but it involves hacking into a file that I’d rather not play around with… I’ve heard too many horror stories.
Put this wherever you want.. between the <head> </head> tags or even somewhere in the body of your page
<script language=”javascript”>
<!–
function writeImgTag(code)
{
var cache = document.comments.text.value;
this.code = code;
document.comments.text.value = cache + ” <img src=’/images/” + code + “.gif’> “;
document.comments.text.focus();
}
//–>
</script>
change comments to the name of the FORM (it’s specified in the <form> tag)
change text to the name of the textarea form element you want the code to be written into
change that image path to wherever you keep your images (if you want it to write something else… just change that whole line in the quotes)
Then for your smiley images, write them in the html like this:
<img onClick=”writeImgTag(’smile’)” src=”/images/smile.gif” border=0>
if you wanted it to write the “sad” image - you’d do this:
<img onClick=”writeImgTag(’sad’)” src=”/images/sad.gif” border=0>
(this all assumes you have a smile.gif, and a sad.gif in a folder “images” (in your root directory) - if it’s somewhere else, or if it’s named something else, change the code as neccessary…
When you clicked on the smile image, it would put the code for it in the text box (so if you wanted to allow your users to put smile images, they could do it that way, without having to type the code to the smile you had available)
August 16th, 2002 at 11:54 pm
This is absolutely great - thank you so much Jenn! It’s working beautifully, but I have a path question:
I used the truncated absolute path noted above when linking to each smilie in my selection above the comment box; that worked fine. To get them to show up in comments themselves, I tried the same path (and even the full absolute path), but ended up having to use my relative site address ‘http://www.deliriouscool.org/images’ in the javascript (which then shows up as a big chunk in the comment box) - could you explain why that might be? I swear, one of these days, I’ll come to understand the correct use of absolute paths! Thanks (insert smilie here).
August 17th, 2002 at 12:02 am
Just for additional resources - here’s Lynda’s Adding Automatic Smiles, which I have working on my blog. And for users using a 2.2+ version of MT, you could use a plugin by Brad called the Regex Plugin which seems like it could be pretty powerful for other options too.
BUT Jennifer’s clickable smilies are way cool - I love using them in the comments over there!!
August 17th, 2002 at 12:33 am
Okay, once again through trial and error, I’ve answered my own question: for this to work properly, the image tag and the filename in the path have to be exactly the same, so if you do as I did and surf the web looking for smilies (and they have weird names like “bluesmile.gif”), you will need to change the name when uploading to what you want your image tag to read (see below).
“writeImgTag(’idea’)” src=”/images/idea.gif”
August 17th, 2002 at 10:41 am
Thanks for sharing! I gotta say, though, Lynda’s hack was not at all a problem to implement
And to add to what Kristine said, Brad also has another neat plugin called MTMacros that will actually do the same thing as Lynda’s hack - it basically lets you define macros using MT-type tags. For example, you could define “:)” to be replaced with “
” And it’s got a lot more useful possibilities as well - all without having to hack a file.
I’m planning on installing it sometime soon so hopefully I can tell a little more here later 
August 18th, 2002 at 3:22 pm
Thanks very much, it worked like a charm and was VERY easy to set up.
Maybe you could set it up here too.
August 21st, 2002 at 11:29 am
Guess what? Other people loved my smileys so much that I ended up setting it up for them. It works in most browsers, but I’ve noticed that it is not working in IE 6 at either the 640*480 or the 800*600 resolutions, although it works at 1024*768.
When I say it isnt working, I mean this. Since I’ve added this, when I view the page in IE6 at the abovementioned resolutions, I see only a part of the first blog entry, (though there are several) and the comments link doesn’t even appear. The oerson I did it for uses IE 6 at 640*480 and they see everything (in terms of the blog entries) but the smileys do not appear for him to click on.
Help
August 21st, 2002 at 5:43 pm
The problem you’re describing actually has nothing to do with the smiley script but has to do with a problem in the doctype you’re using. There’s a LONG thread in scripty somewhere about what the correct doctype to use is. If you take it out (as a test), you’ll see the problem is resolved… If you insist on validation, and having a doctype line, there’s a different one that won’t cause the problems you’re seeing…
September 2nd, 2002 at 5:02 pm
Alrighty then - more goodies are in place! To go with the (re-)addition of the smiley hack, I’ve combined a couple other ideas to really enhance the comment postings here. Now, when you leave a comment, in addition to the live comment preview, just abo…
September 17th, 2002 at 8:39 pm
Want to add cute emoticons to your posts and your
September 18th, 2002 at 10:49 pm
P.S. Here’s a page of smilies. (link from Nicole)
October 25th, 2002 at 6:18 pm
Getting buttons to press to get smilies in my posts wasn’t all that easy. It seems that some things have
November 24th, 2002 at 2:51 pm
This is great…if I could get it working right! The smilies show up but nothing happens when I click on them. I feel totally dense but I can’t find the <form> tag anywhere in the comments code. I’m not sure I’m even putting the code in the right place. I posted the problem I’m having on the MT boards here.
November 24th, 2002 at 3:11 pm
Shanni - you do have a form tag, yours looks liks this (in your pop-up comments:
<form method=”post” action=”http://www.shanni.org/blog/mt-comments.cgi” name=”comments_form” onsubmit=”if (this.bakecookie.checked) rememberMe(this)”>
You’ll notice the part that says name=”comments_form” - so up above where I say to change “comments” to the name of the form you’re using… that’s what you’ll change it to; comments_form.
November 24th, 2002 at 3:21 pm
:blush:
I feel like such a dolt! It was right there in front of my face - I was looking for form name to be right next to each other. Whoops. I’m still a newbie with MT so I guess I’m allowed a few silly mistakes. It’s working great now, thanks!
January 3rd, 2003 at 1:35 am
OK, so in toto, I updated the comment form to include Trackback (In and Out) information and added the Live
February 7th, 2003 at 2:26 pm
I am having trouble getting the smiles and remember me to work on the same comments popup…can you only have one of them?
when I try to comment with smiley code, I get an error that says I didn’t enter any text! But I had text in it too! It wasn’t just the smiley code!
I don’t understand this…do any of you?
February 12th, 2003 at 12:01 am
:angry: :beam: :blank: :blush: :book: :computer: :confused:
February 17th, 2003 at 5:44 am
For some reason the script does not work with m.t. 2.6 .When it was working before the upgrade..
February 17th, 2003 at 8:11 am
This particular script is completely independent of MT or the version. I went to your site and you dont have the script running there.
If you were referring to lynda’s script, then you probably overwrote the MT file that you had to edit to to get the script to work with the new version of it when you upgraded.
More information than that, and I can’t tell you because there’s limited information you provided here… If you want help you can email me.
February 18th, 2003 at 8:23 am
I was making changes to the comment template but the problem was that I forgot about the Sanitize Spec option in blog config..I used the my settings option and entered this code “<h3< a href,b,br,p,strong,em,ul,li,blockquote,img src “>/h3>” and it works great..
February 22nd, 2003 at 10:45 pm
OMG, that was sooooooo easy! Now I’m going to sit here all night playing with smilies
You so rock!!
February 22nd, 2003 at 11:05 pm
Huge thanks to scriptygoddess - as always - for super-easy smilies! I have wanted to
February 22nd, 2003 at 11:08 pm
Huge thanks to scriptygoddess - as always - for super-easy smilies! I have wanted to
February 24th, 2003 at 2:09 am
It’s 1 AM. Am I really too tired to try implementing clickable smilies to my blogs? Bah. This is going
February 24th, 2003 at 4:55 pm
pls help me, I did everything you said here and the smilies aren’t working when I click the button “post” but you’ll see that they’re inserted in the textarea but once I submit the form the smilies arent showing… =(
I changed “comments” to “comments_form” and “text” is also the name of the textarea and the directory of the “images” has the name of “cute” so I changed “images” to “cute” I also included the full path to that directory.
see for yourself:
http://dulcechick.com/test
any help is appreciated, thanks!
March 4th, 2003 at 2:59 pm
I’ve been ignoring the MTMacros plugin because I got on the smiley bandwagon early, but link shortcuts sure would come in handy.
March 16th, 2003 at 12:35 pm
I want some smilies for my comments. I tried the scriptygoddess script, and I got as far as having a clickable smiley. It says :smirk:, but when I preview/posted, it SAID :smirk: instead of showing it. Bah! Stupid script, why…
March 17th, 2003 at 9:33 am
I just want to say that this script works great so long as you have the head tags in the correct spot! ::GRIN:: teehee. Once I fixed that (after a few hours of banging my head against my desk) it worked GREAT!
April 22nd, 2003 at 4:52 pm
This is how I implemented my smilies. It’s a combination of the ideas from ScriptyGoddess, The Girlie Matters and my
May 8th, 2003 at 9:30 am
canot get to work i only have a tag at the end but no tag at the begining the for was auto generated in frontpage how do i get this script to work. The error i get is this.
error : ‘document.post.comment’ is null or not an object
please help
June 10th, 2003 at 11:22 pm
Im confused on what file I need to add this to so I can use this when Im writing an entry for my blog.
June 13th, 2003 at 12:03 am
I think that I followed the directions, but when I click in the comments window I get the Path statement from the script.
What I get when I click on the simile is:
img src=’/graphics/smilie/rolleyes.gif’
There is a “greater sign before “lesser sign” after the text above. When I previewed this post they disappeared.
What might I be doing wrong? I realize this is not a help line, but if any readers have any suggestions, I would be happy to try them.
Winn
drwinn@sbl.org
June 13th, 2003 at 12:03 am
Sorry about not leaving my name in the post above.
June 13th, 2003 at 6:35 am
check your “sanitize” settings in your blog config… make sure it’s allowing “img” tags - if you’re using the default - then it’s probably not. See one of the “Important update”s in this post.
June 26th, 2003 at 5:06 am
omg! I’ve finally got clickable smilies! Thanks so much! I was looking for a script that would display the “:)” in my template via Brad’s macros, in stead of the img tag as you show here! Finally did it! Thanks for the script!!
What I did was use your script and in the “cache + “
“cache + code” then in the html I substituted the “smile” and “sad” for the “:)” and “:(” that i wanted to appear in the comment entry.
Thanks so much for the script!
June 29th, 2003 at 3:55 pm
If you would leave me a comment to notice, I now have smileys, courtesy of Scripty Goddess! Yay for smilies! Other stuff I want to do is below in no particular order. -remove the popups from MT (like Jeremy Zawodny…
July 7th, 2003 at 10:21 pm
Alrighty then — more goodies are in place! To go with the (re-)addition of the smiley hack, I’ve combined a couple other ideas to really enhance the comment postings here.
July 19th, 2003 at 9:43 pm
Today was busy! I think people know by now that Rick is home and will watch Kayla while I help them
September 3rd, 2003 at 1:47 pm
Okay, so somewhere along the line in changing layouts and making sure crap worked properly,…
September 5th, 2003 at 8:18 pm
After all my hard work on implementing my smilies in my comments I come to find out that they only work in Internet Explorer. They don’t work in Mozilla or Netscape browsers. Now I don’t know how many people actually use those browsers or any others, o…
September 24th, 2003 at 3:42 pm
I put in the script, and when I click on the smilies, it does show up in the box. However, the smilies don’t show up in the comments after I hit “post”… Can you take a look to see what might be wrong?
September 28th, 2003 at 7:17 pm
…Can anybody help me with this please?… Thanx.
September 28th, 2003 at 7:52 pm
Check your weblog settings - specifically your preferences: sanitize spec setting. The default is to strip out img tags.
Try using the “use my settings” option and putting this in the text field:
i, a href target, b, br, p, strong, img src width height
That will allow italics, links, bold, line breaks, paragraph breaks, bold (via “strong” tag), and img tags…
October 6th, 2003 at 3:00 am
I want to add smiley graphics to BB (check out Jenn’s comment field options to see an example), but I need some pointers — where’d…
October 20th, 2003 at 2:24 am
I have a problem.
I dont see any smilies.
I get the following error:
Warning: getimagesize(): Unable to access 11_confused.gif in /home/d3662/public_html/guestbook/index.php on line 55
Warning: getimagesize(11_confused.gif): failed to open stream: No such file or directory in /home/d3662/public_html/guestbook/index.php on line 55
October 20th, 2003 at 5:52 pm
Which template do I need to be editing in MT for this to work?
I keep looking over my templates and not finding any form method post. I know this can’t be that hard *laughs*
October 25th, 2003 at 4:03 pm
I’m trying to get this script to add a CSS class in the output and not having much luck
Course, I don’t know javascript so that could be the problem.
I’m trying to achieve:
<img src=”/images/smilies/sad.gif” class=”smilies”>
My path works fine, the smilies show up. (Unless I try adding the class). I tried this:
<script language=”javascript”>
<!–
function writeImgTag(code)
{
var cache = document.comments_form.text.value;
this.code = code;
document.comments_form.text.value = cache + ” <img src=’/images/smilies/” + code + “.gif” + ” class=smilies’> “;
document.comments_form.text.focus();
}
//–>
</script>
However, it just breaks the source code output and I have no clue what next. Is it possible to add a class?
October 25th, 2003 at 10:49 pm
Nevermind, I got it, I just had the syntax screwed up. Thanks anyway. This script is great, I’m happy not to have to hack into MT for smilies
At least not yet!
October 26th, 2003 at 1:31 am
I’m organizing BB and deleted the posts revolving around my techie mess from earlier in the week, since it was an easy fix. I like…
October 27th, 2003 at 10:13 pm
What’s up with everyone today? It figures — the days I feel like consistently blogging are the days that everyone else decides to tend to…
November 23rd, 2003 at 5:49 pm
I’m organizing BB and deleted the posts revolving around my techie mess from earlier in the week, since it was an easy fix. I like…
January 2nd, 2004 at 5:14 pm
This is how I implemented my smilies. It’s a combination of the ideas from ScriptyGoddess, The Girlie Matters and my own thoughts. You need to get Brad Choate’s MTMacro plugin and you have to add some javascript to your site….
January 12th, 2004 at 9:21 am
*pout* I need help.
I have the palette up and running and it all seems to work, ‘cept I can not see the smilies on my main index page (I’m using the show/hide comments thingie). The smilies do show up on the comment pop up window though. I went in and changed my santize specs to the same thing you have, and still nothing.
Any other ideas???
here’s where I’m trying to get this working…
http://jellybean.highlymoody.com/
thanks for any help!
January 12th, 2004 at 9:30 am
I’m a dolt! Apparently, I need to ask for help, and then the light goes off and the answers come to me.
I had to adjust the line in the text file to show the full path to my smilies directory, instead of just /smilies, because I’m using this on a subdomain. Duh!
January 18th, 2004 at 11:29 pm
OKay, if anyone happens to see this, please drop me a libe? I swear I have followed instructions about implementing this script :
I copyed and pasted the script into the template, I changed the text and paths as instructed, and I used the aforementioned options in my “allowed html tags” section in the preferences box.
so why, when you click on the images, does nothing appear in the text box? a weird thing that *does* happen, in Mozilla anyway, ius that you can click on a picture, drag it into the txt area, and the image url appears twice in the box, with no tags or or anything, just plain text.
What am doing wrong? If anyone wants to help me with this, please e-mail me and tell me what you need.
thanks!
-christine
January 19th, 2004 at 7:54 am
Midnightferret - I looked at your code and it DOES appear to be right. I will keep looking into it and either email you or post here what I find. Very odd!!
January 19th, 2004 at 7:56 am
Actually - I just caught one thing that MIGHT be it…
Directly ABOVE the javascript you have this:
<!–smiley script>
A “real” comment would look like this:
<!–smiley script –>
You may be effectively COMMENTING out the function!
Try removing that and seeing what happens…
January 19th, 2004 at 5:03 pm
You were so right! I fixed it. me = plagued with typos.
February 1st, 2004 at 6:02 pm
Added smilies to my comments! How to……
February 10th, 2004 at 3:18 am
hi jen,
i followed your codes very closely, but it doesn’t seem to work for my comments box.
the form and textarea name are changed accordingly, the html settings are amended too (i, a href target, b, br, p, strong, img src width height). i inserted the full path for the smileys as i’m using a subdomain.
when i click on a smiley, the code apears, say :smile:, so when i click POST, it’s s’posed to be a smiley. but it still appears as :smile:.
fyi i’m using mt 2.65…
February 10th, 2004 at 8:22 am
Unless you have some other code going on to translate “:smile:” into something like <img src=”/whereeverYourSmiliesAre/smileicon.gif”> - then “:smile:” is all it will do.
You must be using this as part of another script if it’s putting in “:smile:” - becuase my script shown in this post is supposed to put in the full HTML for the smilie.
Perhaps you mixed this with an MTmacro (plugin) tutorial? Either way - this part of the script is working… if your have macros installed - then that is where the problem is… it’s not translating your macros…
March 17th, 2004 at 4:54 am
Hi , thanx, the code works great if you put the smiley in the same frame as the one that contain the textflied
BUT ….. Here you can guess what i’m trying to do …. for speed reasons i would like to put the smileys in another frame. This way i would like to be able to do something like this :
“;
function writeImgTag(code)
{
var cache = parent.ROW2.forms[0].texte.value;
this.code = code;
parent.ROW2.forms[0].texte.value = cache + ”
parent.ROW2.forms[0].texte.focus();
}
But this doesn’t work. Does anyone know if it’s possible and where am i wrong ??
Thanx in advance
April 13th, 2004 at 9:24 pm
Just because I want to. UP
April 13th, 2004 at 10:05 pm
Just because I want to. UP
April 29th, 2004 at 1:53 pm
After all my hard work on implementing my smilies in my comments I come to find out that they only work in Internet Explorer. They don’t work in Mozilla or Netscape browsers. Now I don’t know how many people actually…
May 8th, 2004 at 12:16 pm
YAY for Kit-Kat! YAY for Kit-Kat! YAY for Kit-Kat! She figured out that I was a retard and fixed a boo-boo in my stylesheet. Now my blog looks good in Mazola Mozilla….
May 11th, 2004 at 7:52 pm
Hi
I’m trying to use this script with remotely hosted smilies, and I can’t seem to figure out how to put in the image path so it will work… is it possible to do it at all?
my smile is located here:
http://img45.photobucket.com/albums/v139/everrocks/smile.gif
Thank you!!
May 11th, 2004 at 8:15 pm
that line would be:
document.comments.text.value = cache + ” <img src=’http://img45.photobucket.com/albums/v139/everrocks/” + code + “.gif’> “;
if they’re not showing up after a comment is submited - your site might be set up to strip the IMG tag. - see this comment for more explanation
May 12th, 2004 at 12:20 pm
argh! Its still not working. Nothing happens when I click on the smilie. I dont understand what I am missing.
I changed the sanitizing options like you suggested.
May 12th, 2004 at 12:37 pm
Lana - I looked at the code on your page. You already have some javascript in there - so you have that <script type=”text/javascript” language=”javascript”> already up there above the other functions on your page… You only need to open the script tag once.
So DIRECTLY ABOVE where you have the writeImgTag code… remove that second:
<script type=”text/javascript” language=”javascript”>
<!–
(But LEAVE the
//–>
</script>
after that code… you only have one of those - and you need it where it is)
May 12th, 2004 at 12:46 pm
ty so much! sometimes you have been staring at it so long, you miss the obvious. thanks!!!
May 23rd, 2004 at 10:23 pm
This is how I implemented my smilies. It’s a combination of the ideas from ScriptyGoddess, The Girlie Matters and my own thoughts. You need to get Brad Choate’s MTMacro plugin and you have to add some javascript to your site….
July 24th, 2004 at 2:17 am
Okie Dokie. I have what I think is a simple question. My MTMacros are defined and running great. A little too well. Every time the word Nick appears in my entries, they are automatically hyperlinked to a site (the behaviour that should happen). But in one entry I need the word Nick to NOT be touched by the macro. How can I do that? Thanks!
October 11th, 2004 at 4:13 pm
I’m trying to get my smilie code window (an onClick pop-up) to put the smilies into the tag board on my main page, but I can’t get it to work. Here’s the site I’m trying to get it to work on:
Tari’s Realm
February 18th, 2005 at 2:43 pm
Thanks so much! I got it working perfectly the first time around… no tinkering!