27 February 2005

WordPress Yahoo/MSN Messenger Style Smileys Plugin

Posted under: at 15:53

This plugin lets you use Yahoo! Messenger or MSN Messenger style smileys on your post, excerpts and comments. It replaces the built in Wordpress smilies. I created this plugin because commenters are probably more used to IM smilies than the WordPress built in smileys, especially for the more obscure ones.

Features

  • Lets you use either Yahoo! Messenger or MSN Messenger style smileys instead of the built in WordPress smileys.
  • Adds the correct width and height attributes in smileys. In addition it also adds the smiley in both title and alt attributes, i.e. it shows the smileys code when you hover on any smileys.

Compatibility

WordPress 1.5.

Instructions

  1. Download the smiley image files: smilies2.tar.gz.
  2. Extract it in your Wordpress installation directory. It should create the directory ’smilies’ with MSN and Yahoo! smilies in it.
  3. Download the plugin: im_smiley.txt.
  4. Edit the plugin file. Near the top of the file, you can choose whether to use Yahoo! or MSN style smileys. You can also choose to enable Javascript smiley replacement function.
  5. Save the file as ‘im_smiley.php’ and put it in your wp-content/plugins directory.
  6. Activate the plugin from your Wordpress Plugins administration menu.
  7. Go to Options - Writing and disable “Convert emoticons like :-) and :-P to graphics on display”.
  8. (optional) You can change how the smileys look in your CSS by modifying style for selector img.wp-smilies. In my case, they look best with: img.wp-smiley { vertical-align: -25%; }
  9. (optional) If you enable Javascript smileys, you can use Javascript code text smiley_convert_text(text); in order to process smileys inside Javascript code. Useful if you are using Javascript based comment preview. See the source of this page for more information.
  10. (optional) If you enable Javascript smileys, you can use clickable smileys, just put < ?php smilies_clickable() ?> next to your comment textarea.
  11. (optional) If you are using both Javascript comment preview and clickable smileys, you may wish to specify Javascript function that refreshes comment preview so that the comment preview will be properly updated when clickable smileys is being used. To do this, edit im_smiley.php and edit the variable $js_reloader. Mine is $js_reloader = "ReloadTextDiv();";.

Known Bugs

  • False positives, especially in program listing. Unfortunately this is very hard to avoid. Let me know if you have an elegant solution to avoid this.
  • Sometimes, smileys appear in posts but not in comments. Possible incompatibilites with WP 1.2. Need more reports from 1.2 users.
  • Absolute path problem, smileys don’t appear in blogs located not in web root.
  • Javascript based smileys doesn’t work in Konqueror :(

Credits

Yahoo and MSN smiley images were taken from Gaim source code. Some code are borrowed from Wordpress original smiley code.

Changelog

1.0:

  • First release

1.2:

  • Fix bug with smileys which substring matches another smileys

1.4:

  • Partially fix bug with smileys containing &, < or >

2.0:

  • Bring smileys through balanceTags safely
  • Fix < on smileys being treated as start of tag

2.1:

  • Various cleanups

3.0:

  • Hopefully fix absolute path problem
  • Javascript based smiley replacement! Useful if you are using Javascript based comment preview.

3.1:

  • Fixed smileys not showing on text below ‘<!–more–>’, tricksy regexes!

3.2:

  • Fixed problem with Javascript and blogs located not in document root directory. Thanks to Ronny

4.0:

  • Fixed smileys with <, > or & not showing in comments
  • Clickable smileys! Thanks to Ronny

4.1:

  • Fixed problem with smileys containing backslash in clickable smileys

4.4:

  • Updated Yahoo! smileys to version 7.0 of Yahoo! Messenger. Thanks to Sy41ful, basibanget.net, Mark Sellers, and maybe others I can’t remember.

Examples

:) :)) :( :(( =)) (~~) >:D< :X

371 Responses

Trackback: Use this URI to trackback this entry. Use your web browser's function to copy it to your blog posting.

Comment RSS: You can track conversation in this page by using this page's Comments RSS (XML)

Gravatar: You can have a picture next to each of your comments by getting a Gravatar.

Karma Threshold: none -3 -2 -1 0 +1 +2 +3