No ShrinkWrap Web2.0 Reviews

I love using Wordpress. One of my favorite time-wasters has become flipping through newly-submitted Wordpress themes at places like Weblog Tools Collection (here’s a sample theme post) looking for that perfect theme for my blog. Unfortunately, when I made a list of style elements I liked, not one theme has all the elements I want. So, I started going through my list and decided to add my favorite style elements to any theme. First up - styled author comments.

Styling author comments with a unique look is a great way to allow readers to immediately tell the difference between readers’ comments and an author’s responses. Some popular blogs that style authors’ comments include:

TechCrunch: see the article on Mig33 for a recent example.

ReadWriteWeb: see their ’social graph’ article for a recent example.

Alex King’s blog: see his article on Google’s sharing service for a recent example.

I like the extra panache Alex King’s comments have with the gradient, so that’s what I’ll use.

First, while I’ll be showing how to edit your theme’s files to add custom author comment styles, you could do the same with a plugin like Jan Olsen’s Comment Highlighter plugin (which appears to have moved to Google Code). I personally have struggled with plugin compatibility problems (most of which, it seems, unfortunately stem from Google Sitemaps, one of my favorite plugins). To reduce the chance of conflicting plugins taking down the entire site, I started paring them down to just the necessities - in particular, I stopped using any plugin I could easily re-create with some code in the theme files. In my opinion, the five minutes it takes to copy my code between themes when changing is worth saving potentially hours’ worth of troubleshooting time. If you’d rather use a plugin, or don’t have access to edit your theme files, I’m sure Olsen’s plugin is a good one. Otherwise, make time for five minutes’ worth of easy editing and read on.

To begin, we’ll be editing two theme files: style.css and comments.php, which you’ll find in your /wp-content/themes/[theme name]/ directory. First, in comments.php, find the lines that read:

<?php foreach ($comments as $comment) : ?>
<li class=”<?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

Modify the second line to add a unique style if both the comment author name and email address match a particular blog author’s information (make sure it matches what is listed in the user’s profile):

<li class=”<?php if ($comment->comment_author == ‘AUTHOR NAME GOES HERE‘ && $comment->comment_author_email == ‘AUTHOR EMAIL ADDRESS GOES HERE‘) echo ‘authcommenthighlight’; elseif ($comment->comment_author == ‘ANOTHER AUTHOR NAME GOES HERE‘ && $comment->comment_author_email == ‘ANOTHER AUTHOR EMAIL ADDRESS GOES HERE‘) echo ‘authcommenthighlight2′; else echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>

Now we need to add the styles “authcommenthighlight” and “authcommenthighlight2″ (or whatever you name them) to our theme. Since I’m currently the only author on this blog, I’ll just be adding “authcommenthighlight.” First, create your gradient image. I had the best luck making mine 12×48 pixels, and selected two colors from my theme. I used Photoshop to make the gradient, but you can use just about any photo editing software - for that matter, even Microsoft Word can create gradients. If you’re not sure how to create a gradient, here’s some sample tutorials: Photoshop, Paint Shop Pro, Paint.net and GIMP. Here’s what I ended up with, using the top header (#237AB2) and sidebar (#EEEEEE) colors:

Now, add the “authcommenthighlight” style to your style.css, setting the gradient image to repeat along the top of the comment and the background to match the bottom color of the gradient:

.authcommenthighlight {
background:#EEEEEE url(/images/grad.jpg) repeat-x;
}

To kick it up a notch, try modifying padding, margin, borders, font colors and other style elements. Get an overview of additional CSS elements you can modify at DevGuru and W3Schools.

Now you and your authors will each have your own unique comment style that separates your comments from visitors’ comments. Of course, there’s a downside to styling comments by matching author names and email addresses - if someone knows your username and email address, they can leave a comment that receives the unique style. I haven’t dug into the Wordpress hooks enough to know whether there’s a way to code around this problem - anyone know?

Anyone have different methods of adding unique styles to author comments? I’d love to hear them in the comments below.

Thank you for visiting NoShrinkwrap. If you enjoyed this article, check out the related posts below and subscribe to our feed.

CNet’s Webware has posted a poll where users can vote for their favorite Web 2.0 apps. The apps are split into 10 categories, with 25 apps listed in each category - holy overload, Batman! While the list includes some non-Web 2.0 apps (Internet Explorer!?!? Come on….), it does include some services worth reviewing. I thought I’d start by listing the contestants by category, pick the one I think is the winner, then start reviewing some of the more interesting services. We’ll see if my picks change after taking a hard look at some services I’ve not yet joined.

Webware’s choices are split into the following categories:

Browsing
They’ve included several non-Web 2.0 apps here, including Internet Explorer, Firefox and Opera. I still use Bloglines, but most of the masses seem to have moved on to Netvibes or Google Reader. LeapTag is an interesting project, StumbleUpon seems to have enjoyed a resurgence in popularity, OpenID is gaining traction (but I fail to see why it’s a Web 2.0 app), and Yahoo Pipes is a potentially revolutionary app. This is a tough one, but I’d have to pick Yahoo Pipes.

Communication
Several non-Web 2.0 apps here, along with some heavy-hitters - Gmail, Yahoo Mail, Twitter and Skype are all likely candidates in my book. While there are other interesting projects on the list, like Zimbra, Jaiku and Meebo, they don’t have the popularity of the heavy-hitters. The widget-based platforms like Netvibes and Pageflakes (where’s iGoogle, by the way?) show a lot of promise, but aren’t simple enough to attract non-techies yet. My pick - either Skype or Gmail, although that perplexingly-popular Twitter will probably win.

Community
Not so long ago, this would have been an easy category to narrow down to a short-list between MySpace, Del.icio.us and Digg. With Facebook’s recent re-launch and the resulting exodus from MySpace, that may be a serious contender as well. I’ve used DeviantArt for years and never considered it a Web 2.0 app, but I suppose it does have some of the characteristics. Bebo seems to be picking up steam, and MyBlogLog is gaining popularity after Yahoo announced some upgrades. Other recognizable services, including Ning, LinkedIn, Reddit and Netscape, don’t have the popularity to beat the top three. My pick - Digg.

Data
There’s some pretty innovative stuff here, like Swivel’s data-sharing and exploration tools, and BlinkX’s video search. Most of these services are pretty esoteric though - you’re pretty much guaranteed to be a techie if you know about them, let alone can use them. Popularity and service recognition will be a problem with most of these services - except one. Winner - Google. ’nuff said.

Entertainment
Where the hell is Joost?? It can’t be excluded due to beta status - several other included services are in beta as well. And it can’t be because it’s “not Web 2.0 because you download a client” - they included IE7 for Pete’s sake! This is a weak category - a bunch of game sites, video blogs and party planners. Really, what makes watching Major League Baseball or some dude with a hat-cam Web 2.0? Most entries are neither innovative nor useful; some, like Midomi are innovative but not really useful and others, like Upcoming are useful but not really innovative. ABC and CBS have large audiences to pimp their apps to, but I doubt most members of that TV audience know of or care about this contest. My vote would go for MyPunchBowl for combined usefulness and innovativeness, but the Kevin Rose effect will probably carry Revision 3 for the win.

Media
A lot of ground-breaking services have entered this space - it’s becoming overrun, in fact, with startups concentrating on video and photo sharing and editing. We all know about YouTube, particularly after the buzz surrounding Google’s purchase and Viacom’s lawsuit. Flickr is another popular service with recent buzz. Right behind those two in name recognition are Pandora (who recently announced deals with Sansa, Sprint and Sonos), PhotoBucket (who was recently blocked, permitted and bought by MySpace and now has a Facebook F8 app), Napster (who was insanely popular during the wild-west days of filesharing and has been trying to capitalize on that popularity ever since it turned legit) and Amazon’s UnBox service. Several entries have created apps for Facebook’s new F8 platform, including Photobucket, iLike, Mog, PikNik and Slide. For sheer name recognition, media attention, popularity, Google’s backing and features, my pick goes to YouTube.

Mobile
I have to admit, not only do I not know many of these services, I don’t care to. I recognize cell phones as the next unconquered territory, but I use mine for calls and that’s it. Besides, whatever company signs on with the iPhone will be the next big thing. I see a few interesting entries like Google’s free 411 service (it’s interesting that Jangle’s service is not included in this category), Google Maps Mobile, KushKash (a money-management app that recently received $11M private investing), TellMe (another free 411 service) and Yahoo’s OneSearch. Personally, I think any service that relies on GPS (which I suspect most cell phone users still don’t want to activate) or provides media (music, games, movies, etc) isn’t a good bet just yet - not enough people want to participate in that sort of stuff. Market penetration into this category of consumers requires something useful, practical, easy to use and not requiring a user to install an app on the phone - thus, my pick goes to TellMe.

Productivity and Commerce
Wow, here’s an open field with a lot of strong contenders. Google’s got three entries with Adwords, Calendar and Docs & Spreadsheets. eBay has two entries with eBay and PayPal. Other entries backed with gobs of name recognition and popularity include Amazon, Microsoft Office Live, , Yahoo Calendar and . Even some of the lesser-known services are heavy-hitters in their own right: Zillow and Trulia offer real estate tools and searches; Craigslist has a huge following of people looking for local job listings and classifieds; business apps SalesForce and BaseCamp (which hails from 37signals, known for Ruby on Rails and other business-centric apps); and other Docs-style apps, including Zoho, ThinkFree and EditGrid. One interesting entry has no competitor entries: Farecast, an airfare-comparison app I use quite a bit, but doesn’t have the name recognition of most other entries. This is a tough category to call, and you have to take into account the types of people who will vote for their app-of-choice - business people, for instance, aren’t likely to take the time to vote for Basecamp or Salesforce. Google and eBay may have huge followings and multiple entries, but considering none of the most popular services are advertising the contest on their sites, and taking into account the viral nature of Amazon’s community, my bet’s on Amazon.

Publishing
Is there a Google stone left unturned? Blogger, Feedburner (you did know Google bought them, right?) and Google Analytics all make the list. Adobe’s Flash and Microsoft’s Silverlight (why didn’t Adobe’s Apollo make the cut) round out the big names, and many services known to few non-bloggers (including Vox, Widgetbox, Tumblr and the infamous PayPerPost) vie for eighth place. This category, however, is all about Drupal vs Wordpress - both have large followings, are directly and indirectly advertising the poll to their users (Wordpress is advertising here) and are supported by incredibly viral and loyal communities. Backed by the Wordpress.com community, my money’s on Wordpress.

Reference
Map and local search apps get a strong showing - Ask.com (who has adopted some viral marketing lately), Google, Microsoft and Yahoo all have entries. Venerable IMDb and WebMD are present. Some recent upstarts gaining news also make an appearance, including Geni (family-tree startup by PayPal’s former COO David Sacks, gaining news and funding), Instructables (funded by Tim O’Reilly’s OATV and frequently featured on Lifehacker) and RapLeaf (a reputation tracker who made the first Facebook F8 cut). However, my bet’s on Wikipedia, who should have the recognition beyond web-heads and viral popularity to handily win this category.

Conclusion

There are some interesting entries that definitely deserve a review. It would also be interesting to see a breakdown of entries by owner and funding source - maybe I can throw one together over the next couple of days.

Who are your picks? Tell me in the comments below.

Blogsecurity.net updated their site with a list of known vulnerabilities in each version of Wordpress and some popular plugins. I appreciate this list, and hope it’s regularly updated - knowing this information is important when making the decision to update Wordpress. Seeing there are more issues than the admin XSS vulnerability, I decided I should update now before generating more content.

Having updated Wordpress a few times in the past, I’m familiar with the drill - back up database and my files, deactivate plugins (why is this important?), delete old files and upload new ones, then reactivate Akismet as fast as I can. No problem - until I started changing options. After hitting the Update Options button on the General Options tab, I got a nasty 404 error:

Error 403: Forbidden
You don’t have permissions to access this page. This usually means one of the following:

• this file and directory permissions make them unavailable from the Internet.
• .htaccess contains instructions that prevent public access to this file or directory.

Please check file and directory permissions and .htaccess configuration if you are able to do this. Otherwise, request your webmaster to grant you access.

Hesitantly, I modified the permissions for options.php to 777 - no go. I quickly changed them back and headed to Google for an answer, which led me to a posting on mod_security. I recalled my host recently turned on mod_security, so I followed the instructions for creating a new .htaccess file for the wp-admin folder - no more 404.

I have to say again - I appreciate Blogsecurity.net efforts in evangelizing blog security. I think I was a little knee-jerk in reacting before, and am looking forward to more discussion on the survey data and security issues. By the way, someone on slashdot posted how they probably “surveyed” the Wordpress version on blogs:

As a guess, they probably searched Google for the phrase “Powered by WordPress” (in the default template), then pulled the HTML and looked for the following tag in the HEAD segment:
<meta name=”generator” content=”WordPress $version” />

Good point. I’m sure they used something a little more sophisticated than Google, like a spider, but that makes sense. So thanks Blogsecurity.net for giving me the information I needed to decide to update Wordpress and wordpress.org forums for giving me the .htaccess workaround. My update wasn’t painless, but a whole lot less painful than it could have been.

A Lifehacker article today led me to the reCAPTCHA project. This fascinating project creates CAPTCHAs from OCR errors produced while digitizing text, then serves those CAPTCHAs to your site resulting in a seemingly symbiotic process - you prevent comment spam on your site with their CAPTCHA, and they receive assistance from thousands of humans correcting OCR errors. According to reCAPTCHA’s project description,

reCAPTCHA improves the process of digitizing books by sending words that cannot be read by computers to the Web in the form of CAPTCHAs for humans to decipher. More specifically, each word that cannot be read correctly by OCR is placed on an image and used as a CAPTCHA. This is possible because most OCR programs alert you when a word cannot be read correctly.

But if a computer can’t read such a CAPTCHA, how does the system know the correct answer to the puzzle? Here’s how: Each new word that cannot be read correctly by OCR is given to a user in conjunction with another word for which the answer is already known. The user is then asked to read both words. If they solve the one for which the answer is known, the system assumes their answer is correct for the new one. The system then gives the new image to a number of other people to determine, with higher confidence, whether the original answer was correct.

I decided to check out this slick-sounding project. It’s pretty easy to integrate their CAPTCHA plugin into Wordpress:

1. Sign up for an account at reCAPTCHA - as far as I can tell, the service is free
2. Register for an API key, one per domain
3. Download the Wordpress plugin (they have plugins for other applications as well)
4. Upload, activate and set options for the plugin
5. Follow the instructions here to insert the CAPTCHA into your comment loop

You can see the results below. The interface is a little confusing - it would be nice if it used a smaller field and smaller widget, perhaps something more like bot-check. Perhaps reCAPTCHA 2.0 will integrate better into existing forms. As it is, it’s still worth the small added confusion to be helping digitize projects like the Internet Archive.

Unless, of course, people stop leaving comments.

After playing with the plugin a little, I noticed the letters are sometimes hard to discern. For instance, I can’t even make a guess as to what the word on the left must be in this one:

Dave says it’s cit.), - good call.

My guess is this widget’s refresh button will get a lot of use.

What do you think - is the interface too confusing? Test it out and tell me in the comments below.

UPDATE-

I decided to disable the plugin - it’s too cumbersome as it exists now, and I don’t want to make visitors work hard to leave comments. I like the idea of the project though, and hope a version 2.0 is in the works. I’ll leave a screenshot up of the plugin interface.