How To: Live Comments Preview
October 13, 2006 § 6 Comments
Customizing WordPress Series
Welcome to the ongoing adventure of adding/removing WordPress plug-ins for VibeTalk.
This series consists of quick product reviews and useful web links for building a better website. Many of the tips and tools presented here are specifically for the WordPress publishing platform, but some can also be used on any system.
This week’s episode is about adding a more pleasing behavior to the Comments section of your WordPress blog. We’ve added the following functionality:
- Live Preview – Some sites have preview buttons on their comment forms, but this will allow you to see a preview as you type
- AJAX Submit – A simple but effective use for AJAX is to submit the comment in the background
- Quick Tags – Add configurable shortcut buttons for basic HTML formatting in your comment box.
- Smileys – Also known as “emoticons”, these occasionally-animated graphics let users articulate their *real* feelings.
- Gravatars – Show users’ Globally Recognized Avatar with local caching option
Most of this functionality is as simple as dropping in a plug-in!
Want to see it in action? Go to the bottom of this page and comment away – we use every one of these features.
Live Comment Preview
Occasionally, I run across a blog that has this neat feature: as you type your comment a preview section instantly displays what your comment will look like.
Always trying to shortcut real work by downloading a ready-made plug-in, I went through at least four offerings before finding an excellent bit of code by John Nunemaker.
It’s not a plug-in, so you’ll have to make minor edits to your PHP code, but it works amazingly well.
Before stumbling across John’s code, I tried the following. I’m listing them to possibly save you time (in either finding them or avoiding them – your choice):
- Live Comment Preview v 1.7 by Iacovos Constantinou
- Textile Live Preview (AJAX Version) v 0.2 by Joen Asmussen
- Filosofo Comments Preview v 0.78 by Austin Matzko
- AJAX Comments v 2.07 by Mike Smullin
Then you need to add code to the comments.php file that will make use of this script:
Then build a section to display the live comments preview. Per an excellent post titled Comment Live Preview Placement by Lorelle on WordPress.com, I recommend placing this box between the login block and the input box – this helps readers notice the preview.
Plug-in: AJAX Comments v2.07
Author: Mike Smulling
Give users some instant feedback by adding AJAX behavior. When they press Submit, rather than waiting to reload the entire page, AJAX scripting is used to perform the task in the background. They’ll see the following graphic while they wait… [download]
Plug-in: LMB^Box Comment Quicktags v2.4
Author: Thomas Montague
Add configurable shortcut buttons for basic HTML formatting in your comment box. [download]
Plug-in: LMB^Box Smileys v3.2
Author: Thomas Montague
Also known as “emoticons”, these occasionally-animated graphics let users articulate their *real* feelings. [download]
Plug-in: Gravatars v.2.6
Author: Scott Merrill
Show users’ Globally Recognized Avatar (see my local gravatar on the right). The plug-in will automatically lookup the users Gravatar and display the image next to their comments. To improve performance, the gravatar is cached on your site after the first load.
You can define a default gravatar for users without one, and users can optionally define a local version. [download]