Austin Powers Smiley - from the Official Smiley Dictionary. Click the image for more informationRecently I was looking for a solution to a problem I was having displaying HTML in my entries. While I was searching for a solution, I found a cool way to display smileys on my weblog. I like having little smileys on my web site, like this πŸ™‚ , and in the past I was adding them manually. w.bloggar allows for custom tags, so this wasn’t much of a big deal to add them to my entries. However, I’m now using Zempt to post most of my entries, (great program BTW, you should really check it out) but Zempt doesn’t support custom tags. Having to enter them by hand was turning into quite the pain in the derriere – besides, I never liked the fact that I couldn’t have smileys in the comments. So when I stumbled across a way to add smileys any where I wanted on my weblog, I was ecstatic! All it takes is a plugin in and a few template changes and you’re off to the races. Here’s the lowdown on how you can add this feature to your weblog.

Step One: Find Some Smileys
Before anything else, you need to find some smileys that you can use on your web site. Mine came from a custom set that I use on the NPUG forums, but I found a great resource with tons of smileys to choose from. Jason has a huge collection of them, but I found his Basic Sets to include the best selections. There are even some holiday versions that I could see using for special holidays just for fun.


Step Two: Upload The Smileys To Your Site
Once you’ve selected the smiley set that you like, download them to your computer, unzip them and then upload them to your web site. For example, you could upload them to your /images directory. If you’re handy with an FTP program like WS_FTP LE you can upload the images directly to your server, otherwise, you can use the built-in upload feature in Movable Type. Simply log in to your weblog and choose “Upload” from the menu on the left.

Step Three: Install MTMacro Plugin
Brad Choate has written one of the most useful plugins for Moveable Type (MT) called MTMacro. There are a million and one things that you can do with this plugin, but for our purposes, we’re going to use it to find any emoticons and turn them into smileys. So simply follow the instructions on Brad Choate’s web page to install the plugin.

Step Four: Create Your HTML
Now that we have the plugin installed, we next have to create the HTML for each of the smiley images MTMacro will use to replace the emoticons it finds. What you’re creating are simple IMG tags to point to where you uploaded your smileys. All of this really depends on the images that your using, but here is the HTML that I used for my weblog. Please customize it as needed for your web site.

Step Five: Create Your Macros
You’re almost done. The next step is to create the macro – that’s the little bit of code that tells MTMacro what to look for and replace. Take a look at the following example:

<MTMacroDefine name="smile" string=":)">

That little bit of code is telling MTMacro to look for :(. The thing you have to think about is what type of emoticons you might you, or your readers might use if you’re going to add support for comments. In my case, I took into account that some people might use a nose in their emoticon and some might not, so I created a macro for :) and :-)

But what does it do when MTMacro has found it? Well that’s where your IMG HTML code from step four comes in. A complete macro looks like this:

That’s all there is to it. So now all you have to do is come up with macros for each of the smileys that you want to use. Here’s the code that I used for this site.

Step Six: Add The Macros To Your Template(s)
Any template that you want to apply MTMacro to, simply add the code from Step Five to the top of the template and select the “Save” button. Technically this code can be anywhere in your page as long as it’s above the code in Step Seven.

Step Seven: Apply The Macro To The Content In Your Template(s)
There’s just one more step to go. All that’s left is to add the code to your templates. You can add these anywhere you like but the most obvious places to add them would be your index page, comments section and each archive that you support. For this weblog that meant the “Main Index”, “Category Archive”, “Date-Based Archive”, and “Individual Entry Archive”. Since my comments are on the “Individual Entry Archive”, but if you’re using popup comments, you may want to add this to your “Comment Listing Template”, which is found under the Miscellaneous Templates section of MT.

In each of the templates, look for the following tag:

<$MTEntryBody$>

Replace that code with the following:

<MTMacroApply><$MTEntryBody$></MTMacroApply>

What this bit of code does is tell MTMacro to look in the MTEntryBody and apply all macros to it. Now all that’s left is to save the template.

When you’ve finished editing all your templates, simply rebuild your site and you’re all done!

Tip: Using Template Modules
I got sick of having to up all the code from Step Five in each template, so I created a “Template Module” and used the MTInclude tag instead. If you’d like to do this, here’s how to do it.

1. In the “Template” section of your weblog scroll down to the “Template Modules” section and select the “Create new template module” link. Title it “smileys” and in the “Module Body” copy and paste in the code from Step Five. Select the “Save” button to finish this step.

2. In Step Six, instead of posting the code from Step Five use the following code:

<$MTInclude module="smileys"$>

If you have multiple weblogs on your site, you will have to create this module in each of your weblogs. That can be a pain to edit, so I would suggest link the “smileys” template module to a file and that way you only have to edit one module for the change to appear all across your web site.

The End Result
Now whenever anyone uses an emoticons in the comments, or if I use it in any entry, it will instantly be converted into a smiley. What could be easier? Here’s a list of all the emoticons supported on this weblog:

πŸ™‚ – :) (Smile)
πŸ™ – :( (Frown)
πŸ˜€ – :D (Big Grin)
πŸ˜‰ – ;) (Wink)
πŸ˜› – :P (Tongue)
??? – ??? (Confused)
8) – 8) (Cool)
:O – :O (Eek)
LOL – LOL (Laughing Out Loud)

I hope you found this little tutorial helpful. If you end up using this on your own weblog, please send a Trackback, or post a comment. I’d love to see how you use it on your web site. 8)