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. Oh, you also needs some smiley faces. [These most wonderful files were found by GeekGrrl, finder of amazing links.]
If someone who wants to add smiles to their blog will test this, I'd really appreciate it!
Important: Do not use > or < in your macro string name.
Another update: Jason suggested that I let people know how to add the smileys to comment preview. Step 4 has been updated appropriately.
An FAQ: If you've upgraded to MT 2.62, you'll need to go into the Weblog config section, under Preferences, and add something along the following lines in the "Sanitize" section:
p,br/,img src,a href,b,u,i,strong,em,span,ol,ul,li
Only add the tags that you want to allow in your comments, so if you don't want to let people use underline, leave out the "u".
Yes, another update. I moved the comment & comment preview popup info to another post.
Directions:
1) Download and install MTMacro by Brad Choate
2) Find smiles you like and upload them to your server. I put mine in "/images/smiles". The images directory is in your web site main directory.
3) Create a new Template Module (mine is "smilie_faces") and enter your MTMacros codes. [text file with the macros - right click and save] I was hoping I could make this an Index Template because those can be rebuilt by themselves, but Template Modules don't get updated until you rebuild your site. That didn't work because the MTMacro definitions got parsed before it was included, so the smileys broken on my pages.
<MTMacroDefine name="angry" string=":angry:"><img src="/images/smiles/angry.gif" width="15" height="15" alt="angry" /></MTMacroDefine>
<MTMacroDefine name="beam" string=":beam:"><img src="/images/smiles/beam.gif" width="15" height="15" alt="beam" /></MTMacroDefine>
<MTMacroDefine name="blank" string=":blank:"><img src="/images/smiles/blank.gif" width="15" height="15" alt="blank" /></MTMacroDefine>
<MTMacroDefine name="blush" string=":blush:"><img src="/images/smiles/blush.gif" width="15" height="15" alt="blush" /></MTMacroDefine>
<MTMacroDefine name="wink2" string=":wink2:"><img src="/images/smiles/wink2.gif" width="15" height="15" alt="wink" /></MTMacroDefine>
<MTMacroDefine name=":)" string=":)"><img src="/images/smiles/smiley2.gif" width="15" height="15" alt="smile" /></MTMacroDefine>
<MTMacroDefine name=":(" string=":("><img src="/images/smiles/sad3.gif" width="15" height="15" alt="sad" /></MTMacroDefine>
<MTMacroDefine name=":((" string=":(("><img src="/images/smiles/cry2.gif" width="15" height="15" alt="cry" /></MTMacroDefine>
<MTMacroDefine name=":))" string=":))"><img src="/images/smiles/laugh3.gif" width="15" height="15" alt="laugh" /></MTMacroDefine>
<MTMacroDefine name=";)" string=";)"><img src="/images/smiles/wink2.gif" width="15" height="15" alt="wink" /></MTMacroDefine>
<MTMacroDefine name=":D" string=":D"><img src="/images/smiles/grin.gif" width="15" height="15" alt="grin" /></MTMacroDefine>
<MTMacroDefine name=":p" string=":p"><img src="/images/smiles/tongue3.gif" width="15" height="15" alt="tongue" /></MTMacroDefine>
<MTMacroDefine name=":*" string=":*"><img src="/images/smiles/kiss.gif" width="15" height="15" alt="kiss" /></MTMacroDefine>
<MTMacroDefine name=":|" string=":|"><img src="/images/smiles/blank.gif" width="15" height="15" alt="blank" /></MTMacroDefine>
4) In the appropriate templates (Main Index, Individual Entry Archive (where I send people to leave comments), your other Archive templates (if they show full entries), Comment Listing Template (if you use that) and Comment Preview Template*), add the following line after the <body> tag:
<$MTInclude module="smilie_faces"$>
Also, update the following MT tags so that your smiley faces will be translated:
$MTEntryBody$ [this tag will translate smileys in your "Entry Body" field]
$MTEntryMore$ [this tag will translate smileys in your "Entended Entry" field]
$MTCommentBody$ [this tag will translate smileys in your Comments]
$MTCommentPreviewBody$ [this tag will translate smiles in your Comment Preview popup]
add this to those tags listed above
apply_macros="1"
ie, <$MTEntryBody apply_macros="1"$>
If you don't want to parse smileys in your enties (for example) because you have a large number of entries in your blog, just add the apply_macros tag to the MTCommentBody tags.
* The comment and comment preview popups were a little more complicated so they're in their own post.
5) Rebuild your site (this will activate the macros) and make a test post using the :SMILE: codes.
6) Next, add the smilies to your comments (this will let people see what smiley faces you have available even though your blog will translate the proper codes into images).
Add the following Javascript in your Comments form (either Comment Listing Template or Individual Entry Archive) before the </head> tag:
<script type="text/javascript" language="javascript">
<!--
function writeImgTag(code)
{
var cache = document.comments_form.text.value;
this.code = code;
document.comments_form.text.value = cache + code;
document.comments_form.text.focus();
}
//-->
</script>
7) Somewhere near your Comment box (look for the <textarea...> tag), add your smilies. NOTE: You will have to change the directory in the src="" part if you put your images in a different directory than I did. [text file with the image Javascript - right click and save]
I put all of these image tags into an Index Template and included it on my Individual Entry Archive template for easier maintenance. If you're not using PHP, or don't want to use a server-side include, you can put these into a Template Module and include it like you did in step 4.
<img alt="angry" onclick="writeImgTag(':angry:')" src="/images/smiles/angry.gif" border="0" />
<img alt="beam" onclick="writeImgTag(':beam:')" src="/images/smiles/beam.gif" border="0" />
<img alt="blank" onclick="writeImgTag(':blank:')" src="/images/smiles/blank.gif" border="0" />
<img alt="blush" onclick="writeImgTag(':blush:')" src="/images/smiles/blush.gif" border="0" />
<img alt="wink" onclick="writeImgTag(':wink2:')" src="/images/smiles/wink2.gif" border="0" />
8) Save your changes and rebuild your site again. Post a test comment by clicking on the images as well as typing in a few of the :SMILE: codes.
41 Comments
29 TrackBacks
Listed below are links to blogs that reference this entry: Adding smileys to your blog.
TrackBack URL for this entry: http://www.beantowngeek.com/cgi-bin/mt/mt-pong.cgi/142
In case you're keeping track or want to add some of the stuff I've added to your own site here's what I've done so far: Simple Comments Plugin from Adam Kalsey, combines Comment and Ping display Smilies: Instructions came from Lisa, Gal of Unix. Thanks... Read More
Thanks to Unix Gal for tips on adding smilies to your comments. :remote: Try out the smilies in a comment Read More
Thanks to Unix Gal for tips on adding smilies to your comments. :remote: Try out the smilies in a comment Read More
GeekGrrl recently added smilies to her site, so it inspired me to make a post all about smilies. First a Read More
GeekGrrl recently added smilies to her site, so it inspired me to make a post all about smilies. First a Read More
I have spent most of today tweaking and adding features to my grand ol movabletype blog. Lots of credit has to go out to Lisas clever way of adding smilies to your blogs and also to the thing that lets you see what your comment will look like. (have wo... Read More
Couple of (not so) quick things... Brad was nice enough to point out that I have officially moved into the Number One position for "pics of my wife in bed" on webcrawler. It makes me proud beyond words that hundreds, Read More
That's right! I've now followed in the footsteps of the bloggers before (being the trendy guy I am) and added Read More
Thank You! Thank You! Read More
Just added them, thanks to this "tutorial":http://unixgal.techieswithcats.com/archives/002156.php I think it works ... Read More
Does this work? :-/ Do I know what I'm doing? Or am I going to be embarrased? :blush: Well, here Read More
Adding smileys to your blog - Unix Gal Smileys, part 2 - Unix Gal Brad Choate: MTMacroってのを入れないと使えないみたいです。 付けてみよう！協力求む！ Read More
I’ve added the ability to put in those wonderful smilies in your comments. Just click on their faces to enjoy... Read More
while checking my yahoo e-mail this morning, there was an ad running for us airways new springtime in ireland service; Read More
I've been trying to implement smilies, via Unix Gal's tutorial, but I just can't seem to get the hang of it. I have everything in the way it should be, but I don't think the Macro Plug-in I installed is... Read More
Ok, I managed to put smilies below the comment form. But what if I wanted to type : laugh : and have it turn into a smilie? I could NOT seem to get the Macros plugin to work. Lisa, Unixgal,... Read More
Ok, I managed to put smilies below the comment form. But what if I wanted to type : laugh : and have it turn into a smilie? I could NOT seem to get the Macros plugin to work. Lisa, Unixgal,... Read More
My smilies were sanitized out of recent comments, so I had to fiddle with the MT settings until smilies were... Read More
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,... Read More
Thanks to Unix Gal for tips on adding smilies to your comments. Read More
to think of a damn title. ;) I've got a pile of things to get taken care of early this morning in the hope of... Read More
Converting journal from b2 to MT. Read More
I'm finally converting my journal from b2 to movabletype. Here's why and a list of articles/plugins/tricks I implemented in my new MT journal... Read More
Adding smileys to your blog... Read More
When I did some upgrades to my website a week ago, I added in support for smilies. I used Lisa's excellent tutorial to set them up on my site. I'd suggest you do the same. I can offer one extra... Read More
Adding smileys to your blog is good tutorial that seems really straight-forward to implement. A few of the files seem to be no longer available. If I have time, I may add this feature here or on my course blog.... Read More
Good Causes
Silly Stuff
The weather in Boston
I'm a sucker for gals who know unix, and plan to give this a go tonight.
You're method of implementing smilies seems so much more complicated than mine, but then again your smilies are MUCH cooler
Just so you know, I look like this
OK not really. I really look like this
Send me email if you have any problems. I check my home email from work.
I love that chicken face! I miss it now that I'm using Trillian.
Sorry about the multiple posts.
My browser's going whacky.
Okay, this makes it look easy, I may have to try it. Smilies have just gotten so cool!
Jason: Live comment preview info
Does the live preview include automatic URL linking How about bold and italics? Can I add emphasis or
strike-through? I see these comments have been answered as I'm typing.Does the live comment preview work in Mozilla? Seems like it does!
cant seem to get this to work! It smilarizes (i just made up a new word) my entries but when I try it on one of my comments it just totally filters out any of the :<smilie>: stuff.
Strange indeed!
thanks lisa
For those of you just tuning in, I replied to Rob via email about the Sanitize stuff that's part of MT 2.62.
I can't get it to work.
I keep getting this error:
Build error in template 'Comment Listing Template': Error in tag: You did not specify the type of macro.
I followed the instructions exactly.
Never Mind.
I love it, I just have a question and a comment, I have a blog owned by foofy and I dont think I can update most of those files, so... I think Ill stay left out, like always, if you know another way email me.
The question was: how did you make that Live Comment Preview thing, that rocks!
so ok..yah..see..i tried and it doesnt work. the smilies are there, but they don't post to the comments. maybe I am still doing something wrong...care to take a peek? they are in the comments.
I got it
thank you SO much. I feel so smart 
Ruthie! I'm so sorry I didn't stop by your site, but I'm so glad you figured it out!
Hi
I previously used another smiley script, but when I switched hosts I wanted to try this script... Anyways, I got everything done and when I rebuilt - I got an error (My fault, I had made a typo...) Ever since though, I cannot get MT to respond to me at all when my 'smiley.pl' is in the Plugins folder. The only way I can get MT to respond is to just delete the file... Have I screwed something up? I've tried overwriting that file... it still happens.
I love this tutorial!
I did have one issue though, and I can not figure out what I am missing. The comments still show the text smiley instead of the graphic ones.
Oops! I figured out my issue. The only thing I have left is a question about the image sizes. My smileys do not shoq up on the entries as their original size, they smush. Is there something I have to do to make them the right size?
Hey Lisa! Thanks for stopping by and checking on me, I figured it out. That will teach me to try to do MT Mods, work, chat, and set up a new dns on my server all at approx. the same time.
Your site is definately a new "reads" for me. Keep up the awesome work! 
Can Someone please tell me how to do these smileys jsut by pushing buttons like : and ) to make
I JUST DONT UNDERSTAND!!! Please email me at tds987@yahoo.com
i like all these smiley faces
When i use
) with ) beside it 
Woo hoo! I got them to work on Shattered Sun, but there is one thing that I question. I got them to work with the MTInclude without $ signs. And I noticed that on this page it says to use the $ and on the comments page it doesn't use $. Just thought I'd ask which is the proper way.
Thanks for an awesome tutorial! It was a lifesaver for me since I'm brand-spanking-new to MT.
You're the best!
I've tried and tried and tried...but I just can't get the smilies to display in the comments.
It just doesn't show anything. But when I check it in the admin panel the tags are in the comment.
Anyone know what went wrong?
Problem is solved.
Thanks anyway.
Wow. That nick is dead on, eh?
Thanks for the smilies tutorial!
It took me most of the day!
I did the RSS friendly tutorial too. I'm not sure I've done it right, since it was sooo much easier than the smilies
but at least I validated 
Sherri
help i cant do the smilies
I checked my source from the browser, and the alt is NOT being written into the image tag, neither are the width/height. Here's what's showing from this page's first comment smilie:
I checked out the MTMacro page, but I have NO idea what that page is saying
Thanks
Sherri
hi
THANK YOU!! YOU HAVE SOLVED ALL MY PROBLEMS
AND THIS SITE IS SOOO USEFUL AND JUST THE BEST!! THANKS
I'm using Brad's regex plugin for similar effects. My only reservation about your method is that you are using html, instead the standard smilie bb code ( i.e. : smile : ) in your comments area. Why is that? Why isn't it's better to make it seem less complicated to the visitor by adding just the simile code???
I believe that you tweaked the javascript for inserting smilie codes into the comment field so the smilies would appear during live preview? I think it would be cool for smilies to appear in live preview, but then I still want smilies to be entered into comments with smilie codes instead of image tags, just in case I want to dispense with smilies in the future. With your method, I believe image tags are entered into comments with no trace of the smilie codes, right? (Correct me if I'm wrong). Is there a way to allow smilies to appear in live preview while inserting smilie codes into the database instead of image tags?
Yes, you could make it so smiley codes resulted in actual smilies in the live preview, but it would mean writing an maintaing the JavaScript to do it. There's no freebie waiting to be used.
Instead of directly dumping the text into the preview DIV, you'd need to run a whole set of search of replace code to turn the smilies into the images. Every time you added new smily codes, you'd have to update that JavaScript.
Presuming that you have the skills to do it, is it worth it? That's something you'd have to decide for yourself. It isn't hard, but it will be a minor pain the butt to keep the JavaScript in sync w/ your smilies, if you tend to have a lot and/or make a lot of additions and changes.