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)

75 Responses to “Add Smiley’s to text”

  1. Donna Says:

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

  2. kristine Says:

    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!! :)

  3. Donna Says:

    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”

  4. ste Says:

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

  5. Mad Bull Says:

    Thanks very much, it worked like a charm and was VERY easy to set up. :-) Maybe you could set it up here too.

  6. Mad Bull Says:

    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

  7. Jennifer Says:

    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…

  8. The Long Letter Says:
    Yet another trick in place
    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…

  9. pasty white girl Says:
    Damn, that’s sweet!
    Want to add cute emoticons to your posts and your

  10. Jennifer Says:

    P.S. Here’s a page of smilies. (link from Nicole)

  11. Just Orb Says:
    Well … crap.
    Getting buttons to press to get smilies in my posts wasn’t all that easy. It seems that some things have

  12. Shanni Says:

    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.

  13. Jennifer Says:

    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.

  14. shanni Says:

    :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!

  15. VS Blog Says:
    Whew!
    OK, so in toto, I updated the comment form to include Trackback (In and Out) information and added the Live

  16. bozzy Says:

    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?

  17. Unix Gal Says:
    Test
    :angry: :beam: :blank: :blush: :book: :computer: :confused: :cool: :cry2: :evil: :furious2: :gorgeous: :grin: :happy2: :hat: :huh: :kiss: :laugh3: :leer: :lips:

  18. The Sandman Says:

    For some reason the script does not work with m.t. 2.6 .When it was working before the upgrade..

  19. Jennifer Says:

    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.

  20. The Sandman Says:

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

  21. hmw Says:

    OMG, that was sooooooo easy! Now I’m going to sit here all night playing with smilies :-)
    You so rock!!

  22. Happy Pills Says:
    Smile :-D
    Huge thanks to scriptygoddess - as always - for super-easy smilies! I have wanted to

  23. Happy Pills Says:
    Smile :-D
    Huge thanks to scriptygoddess - as always - for super-easy smilies! I have wanted to

  24. Design-A-Blog Says:
    Late Night Musings
    It’s 1 AM. Am I really too tired to try implementing clickable smilies to my blogs? Bah. This is going

  25. marge Says:

    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!

  26. Live in the Delirious Cool Says:
    Making linking even easier.
    I’ve been ignoring the MTMacros plugin because I got on the smiley bandwagon early, but link shortcuts sure would come in handy.

  27. leo-lady's gc Says:
    Smilies
    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…

  28. zannie Says:

    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! :)

  29. Unix Gal Says:
    Adding smileys to your blog
    This is how I implemented my smilies. It’s a combination of the ideas from ScriptyGoddess, The Girlie Matters and my

  30. nathan Says:

    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

  31. Colin Says:

    Im confused on what file I need to add this to so I can use this when Im writing an entry for my blog.

  32. Anonymous Says:

    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

  33. Winn Says:

    Sorry about not leaving my name in the post above.

  34. Jennifer Says:

    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.

  35. von Says:

    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!

  36. Halla's Ranting: Long Form Says:
    One cool thing done.
    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…

  37. The Long Letter Says:
    Yet another trick in place
    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.

  38. geekalicious.net Says:
    Smilies and Post to blog via email
    Today was busy! I think people know by now that Rick is home and will watch Kayla while I help them :) I helped Tudy iron out her smilies issues. We used a combination of Girlie’s and Lisa’s (part 1,…

  39. Happy Pills Says:
    Kick ass!!
    Okay, so somewhere along the line in changing layouts and making sure crap worked properly,…

  40. MartieGras Says:
    Call me neurotic
    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…

  41. Val Says:

    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?

  42. Val Says:

    …Can anybody help me with this please?… Thanx.

  43. Jennifer Says:

    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…

  44. Bloggie Broad Says:
    Smiley Help, Please….
    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…

  45. Peter Says:

    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

  46. meowy Says:

    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*

  47. Gina Says:

    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?

  48. Gina Says:

    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!

  49. Bloggie Broad Says:
    Reverb: Bloggie Scripty Fun
    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…

  50. Bloggie Broad Says:
    All Quiet on the Bloggers’ Front
    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…

  51. Bloggie Broad Says:
    Reverb: Bloggie Scripty Fun
    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…

  52. Glimpse of a Grrl Says:
    Adding smileys to your blog
    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….

  53. mel Says:

    *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!

  54. mel Says:

    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!

  55. midnightferret Says:

    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

  56. Jennifer Says:

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

  57. Jennifer Says:

    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! :D Try removing that and seeing what happens…

  58. midnightferret Says:

    You were so right! I fixed it. me = plagued with typos.

  59. /Blog Says:
    Smilies
    Added smilies to my comments! How to……

  60. girl Says:

    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…

  61. Jennifer Says:

    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…

  62. vince Says:

    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

  63. MartieGras Says:
    Upgrading to MT 2.661
    Just because I want to. UP

  64. MartieGras Says:
    Upgrading to MT 2.661
    Just because I want to. UP

  65. MartieGras Says:
    Call me neurotic
    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…

  66. Born In A Zoo Says:
    BTW
    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….

  67. Lana Says:

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

  68. Jennifer Says:

    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

  69. Lana Says:

    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.

  70. Jennifer Says:

    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)

  71. Lana Says:

    ty so much! sometimes you have been staring at it so long, you miss the obvious. thanks!!!

  72. Glimpse of a Grrl Says:
    Adding smileys to your blog
    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….

  73. Patrick Says:

    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!

  74. Tari Says:

    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

  75. Chari Says:

    Thanks so much! I got it working perfectly the first time around… no tinkering!