Pros

Because your comments are stored on a central server and not on each individual blog, you only need to go to one place to see if anyone has responded to or “liked” a comment you have made recently across many blogs. WordPress.com has a similar feature across all WordPress.com-hosted blogs.

Since your commenting history across many blogs is stored in one place, anyone can click on your name on any comment you’ve made and see a list of other comments you’ve made on other blogs. This is not only useful for getting to know blog commenters, but it benefits the owner of a blog by bringing traffic. Say you go and leave some witty comment on a Wired article and another comment on my blog. Everyone that reads your comment on the Wired article and is curious enough to click on your name will then see your comment on my blog and could potentially find my blog.

Because Disqus only does one little piece of the blogging puzzle, they can do it really, really well. The commenting user interface with Disqus is far superior to anything I’ve seen a WordPress plugin enable. Since they use javascript, as well, it’s nearly impossible for a spam bot to leave a comment. And if a human tries to post spam, they have very sophisticated filters. Personally I haven’t had much problems with blog spam since installing the amazing WP Captcha Free plugin, but spam filtering is still an important feature.

The way Disqus gives you the open comment box first, and then makes you give your name or log in through some other service, is pure psychological genius. People will be much more willing to give a name and submit a comment if they have already written something than if you ask for a name and email address up front. Just one of many clever user interface insights Disqus employs.

Cons

Since your comments are stored on Disqus’ servers, you don’t have much of a guarantee that they won’t just shut down operations and all your comments will be lost. At least when my comments were kept locally on my own blog, I can back them up as I see fit and make sure they are preserved.

Because Disqus uses javascript to load and display the comments, the comments will be invisible to search engines. A lot of my commenters (that’s you guys!) leave really intelligent, interesting, and – most importantly – keyword-rich comments that result in Google sending traffic to my blog. I wouldn’t dare lose that!

Why I chose to switch to Disqus

First I asked two of my colleagues, James and Cole, who are search engine optimization (SEO) experts, why anyone would accept the loss of comment keywords and choose Disqus. They referred to all the social traffic I listed in the Pros section and guess that the extra traffic from cross-site commenter interest might be worth the loss of keywords.

Still dubious, I began to investigate…and that’s when I found the answer: the Disqus Comment System plugin for WordPress!

As well as inserting the Disqus javascript code into your blog, it does one more important thing: It syncs all comments from Disqus back to your blog’s database!

This not only lets you stop using Disqus whenever you like, and still have all your comments intact from your time using Disqus, but it totally blows away the SEO issue by displaying your comments on your blog for search engines and then using Disqus’ superior interface for human visitors! Both items from the Cons list have been eliminated, leaving me with no other reasonable option other than to switch to Disqus.

I hope you enjoy the change, dear readers. You might want to set up a Disqus profile so you don’t have to enter your information with every comment.

I’ve ordered them from least important to most impressive and important, just like top ten lists are supposed to be.

10) WP Security Scan

[plugin dir link] This is just the equivalent of installing a virus checker on a Windows machine. It’s just something you should do. It runs some checks on your WordPress installation and suggests that you change some settings from the defaults, because leaving some values like your database name and administrator login name as the factory default makes your WordPress installation that much more hackable. Another thing it does is hide the particular version you are using (also important information for hackers) if you’re using one of the many WordPress themes that display it in the footer.

9) WP Widget Cache

[plugin dir link] I can’t remember how I found this one, but I love it. Most of the widgets, the individual sections on a WordPress blog’s sidebar that are present on every page, don’t need to be executed for every single page hit. The Blogroll for instance, only needs to be run if a link has been added, edited, or removed in the database. Unless that has happened, there’s no reason to be querying the database for that information every time a page that is visited on your blog. This plugin caches the output of your widgets to static html files and allows you to set triggers (i.e. new comment submitted, new post submitted, etc.) or time limits to cause them to be uncached and re-executed. It’s a brilliant idea and works wonderfully.

8) All in One SEO Pack

[plugin dir link] I read an article recently that claimed that many Search Engine Optimization (making it easier for search engines to index your site and send you traffic) experts are snake oil salesmen. In reality, the article was really saying that most SEO work is simple stuff like putting proper meta tags, titling your pages, and formatting of your urls. While not difficult, that can be a lot of tedious work. And that is where this plugin comes in. You simply install it and boom, 90% of what is tedious about Search Engine Optimization is done for you.

7) Google XML Sitemaps

[plugin dir link] XML sitemaps (here’s mine) are another piece of the important Search Engine Optimization puzzle. This plugin generates a file on your server that search engine web crawlers look at to determine when your content has been updated and should be re-indexed. Without this plugin your site will be indexed on whatever default monthly schedule that search engines spiders use, but once you have an XML sitemap, you can tell them to come more often for recent posts that are likely to change and be commented on, and less often for ancient posts that are probably static for a long time.

6) iMax Width

This particular plugin performs an impressive little trick and is very, very handy. It does two things, really. If you are naughty enough to embed an image in your post without specifying the width and height information in the img tag, when you save your post, this plugin will go fetch the image you are embedding and set the width and height for you. However! If the width of the image is wider than a threshold you have set (mine is 500 pixels, because of the current design of my blog), it will change the width and height tags on your img tag to proportionally (no distortion) size down the image so that it fits inside your blog design. This plugin might not be useful for everyone, but my blogging style is often very photo-heavy, and this plugin saves me several hours each week.

5) Subscribe to Comments

[plugin dir link] I only installed this plugin just recently, but I’ve been wanting this functionality for a long time, and I love how well it works. As the post author, I get an email any time someone comments on my blog. But sometimes it’s nice for my readers to receive emails when comments are submitted to posts that they have commented on, so they know to come back and defend their point of view without having to remember to check back for new comments. That’s what this plugin does. When you submit a comment, you may check a box that says, “Notify me of follow-up comments via e-mail” and you will be notified via email of each subsequent comment on that post. And unsubscribing is easy, so you don’t have to worry about spamming your readers. This plugin is a must for running a good reader-friendly blog.

4) WordPress.com Stats

[plugin dir link] I use Google Analytics, but there’s something nice about how well the WordPress.com Stats analytics package nestles right into my blog admin. As a result, I check the stats provided by this plugin much more often than Google Analytics. To be honest, I even like the presentation of the data better than that of the Big G. If you want an easy way to know about the traffic to your website, mainly which pages are most popular, how many hits per day you’re getting, and where traffic is coming from, this plugin is for you.

3) Get Recent Comments

[plugin dir link] WordPress comes with a built-in “Recent Comments” widget, but it’s not very customizable. I found and adore this plugin because it lets me format and filter the recent comments widget at the top right of my blog just the way I want it. Highly recommended.

2) WP Super Cache

[plugin dir link] This plugin is an absolute must if you expect any level of traffic to your blog. It caches entire pages and saves them to static html files on your web server for super fast page loading on your high traffic pages. Their motto is that it makes your blog “Digg-proof”. While I have not been dugg since installing it, I have to say that I am very impressed with the performance improvement.

And the #1 plugin I can’t live without is…

1) WP Captcha Free

[plugin dir link] When I found this plugin, as a professional web developer, I was seriously impressed by the ingenuity behind its method of avoiding automated comment spam. It works by sending a behind-the-scenes AJAX request to the server to request a special hash code (like an autogenerated password based on information about the requesting browser, time and date) which is then included when the comment is submitted. Comment submissions, like those generated by an automated spam bot, that do not have this secret hash code attached to them will be rejected. Since installing this plugin, my comment spam has plummeted, and I’m pretty sure that the two spam messages per month that I get are actually submitted by a person rather than an automated bot. The work that an automated spammer would have to do to get around this mechanism is tremendous, so as long as those of us using this plugin are in the minority, they won’t do that extra work and we can live relatively free of comment spam and those horrible, horrible CAPTCHAs. I love this plugin!

Honorable Mentions

WP Ajax Edit Comments

[plugin dir link] This plugin is very handy for the admin for quick edits to comments, but it also allows commenters to correct mistakes that they find shortly after publishing their comment. I much prefer the submission-and-correction paradigm to the preview-and-submit paradigm. It feels cleaner.

Yet Another Related Posts Plugin

[plugin dir link] This is by far the most customizable “related posts” plugin I’ve seen. It’s a great way to direct interested new readers to your other content to hold their interest. Wonderful.

WP-PageNavi

[plugin dir link] If you go out to my homepage, you’ll see a nice page navigation user interface at the bottom of the page. In the business, we call this pagination. It’s a nice way to let visitors quickly navigate through a long list of posts in a certain category or in your archives or whatever. It’s one of those plugins that is so simple and useful that you wonder why isn’t core WordPress functionality.

So go sign up and set your avatar for my blog comments!

Introducing…. YT-Audio, the plugin for WordPress to embed the audio from a YouTube video on your blog!

yt-audio-streaming-audio-from-youtube.zip

How does it work?

It’s actually ridiculously simple. All it does is embed YouTube’s regular flash movie player inside two iframes that chop off all but the bottom control bar of the video. Nothing fancy. Just useful.

Instructions

You install it just like any other WordPress plugin. Unzip it into the /wp-content/plugins, directory. Then, in your post, put the text:

ytaudio(2_HXUhShhmY)
Where “2_HXUhShhmY” is the code for the video on YouTube. And you should get something like:

It’s just that simple! I’ve tested this on Firefox, Safari and IE 7. It looks pretty good in all three. Enjoy!

Frequently Asked Questions

The player shows up, but the song won’t play. What’s up?

This will happen if embedding has been disabled for the video you are using. Because the video portion of the player is hidden, so is the message telling you that embedding is disabled. Try to embed the entire video with the full embed code from YouTube before reporting a problem.

Where is the volume control?

When the volume control opens in the YouTube player, it opens over the video portion of the player, which is hidden inside a frame by this plugin, so even if YT-Audio displayed the volume control button, you could not change the volume with it because the popup slider would be hidden. This is unfortunate, but there’s nothing that can be done about it.

I’m getting something in the frame that looks like my blog header. What’s wrong?

This will happen if your plugins directory is not in the default location. You will need to edit the two lines in `ytaudio.php` that contain `wp-content/plugins/yt-audio-streaming-audio-from-youtube` to reflect the actual location of the ytaudio plugin with respect to your blog root.

Change History

The way I have been publishing my photos is:

1. Drag them from iPhoto into a folder
2. Run a program that I wrote in java to resize the photos
3. Make the appropriate directly for the post id on the server
4. Securely copy them to the server
5. My program then prints out the HTML code that I paste into my blog, complete with empty paragraphs for the witty captions

This has been very convenient, but every few months, my Photoshop Expert friend, Alan, complains that the quality of the photos is crap. He’s right, of course. The resampling algorithm that sizes them down in my java program does a pretty miserable job. I would complain if he posted images of that quality on his blog, too.

I’ve been investigating various applications to help blog with photos from Flickr. The new browser, Flock, that I think has a lot of promise to be better than Firefox, lets you drag pictures from a bar that shows all your Flickr pictures directly into your blog post editor. But it doesn’t put the image sizes in the <img> tags. Just before embarking on writing a WordPress plugin to do this, I found this plugin called iMax Width that does just that. It even does the extra trick of sizing them down to fit within your blog layout (the standard 500-pixel wide images from Flickr woudn’t fit in my blog design).

But what really sealed the deal was finding what must be the Mother of All Flickr WordPress Plugins. It was commercially developed and then released into the open source community. It’s called, rather blandly, Photo Album. It does what Flock tries to do, but from directly within your WordPress post editor, and provides more sizes than Flock does. Not only that, but includes a sidebar widget. It completely rocks!

So I’ve decided to spend some mindless hours converting all my previous blog posts to host their images on Flickr. Because I’m such a perfectionist, I’m having to find all the images in iPhoto so that I can upload the huge 4 MiB, 7 megapixel, versions, so it’s going to take me a little while. If things are a little slow around here, that’s why. I’ll be spending my normally budgeted blogging time on this task.

What’s beautiful about this is that, when I’m done, my blog will be nothing more than a database of text that can be moved to any server with ease. I’ve had to suck it up and buy a Pro Flickr membership. I had been operating on the free account up until now. My idea was that Flickr would be for my best pictures only, but that’s going to have to change now.

To test the process, I have already converted my first post with any hosted pictures. It was relatively painless. You will thank me later, my dear readers.

The code used inside the body of the widget is as follows:

$dateago = (date('Y') - 1) . date('-m-d');
global $wpdb;
$entries = $wpdb->get_results("SELECT *
    FROM $wpdb->posts
    WHERE post_status = 'publish' and post_date >= '$dateago'
    ORDER BY post_date asc limit 3");
if ($entries)
{
  echo '<ul id="oneYearAgo">';
  foreach ($entries as $entry)
  {
    $post_date = date('F j, Y', strtotime($entry->post_date));
    echo "<li><a href=\"" . get_permalink($entry->ID) .
        "\" title=\"Posted on $post_date\"" .
        " class=\"tooltipped\">$entry->post_title</a></li>";
  }
  echo '</ul>';
}

You are now free to reminisce to your heart’s content.

1) Download

First download these two files and put them in your blog directory. I have mine in my blog root.

prototype.js

duration.js

The latter is does the countdown magic.

2) Include

Now include them in your header.php:

<script type="text/javascript" src="/blog/prototype.js">
// tag has to be open because of stupid IE
</script>
<script type="text/javascript" src="/blog/duration.js">
// tag has to be open because of stupid IE
</script>

3) Create Text Widget

Then, create a text widget and fill it with the proper code. Mine looks like this:

<div class="countdown">
  <span id="weddingCountdown">
    enable javascript to see the countdown
  </span>
  until the wedding
</div>
<script type="text/javascript">
  Duration.countdown("weddingCountdown",
                     Date.UTC(2007, 9, 13, 11, 30, 00));
</script>

The important thing here is that the id on the destination span and the id passed to the countdown function (both shown in red) have to match. And if you have more than one countdown on your page at the same time, the id for each one has to be unique.

The content of the span will be replaced with the countdown. That’s why it has a message informing people without javascript that they won’t see it until they enable javascript.

You can put any text you want before and after the countdown span. For example:

There are only
<span id="graduationCountdown">
    enable javascript to see the countdown
</span>
until graduation!


4) Setting the Date

Now for the hard part: the javascript UTC date. You have to figure out the date of your event in Coordinated Universal Time. It’s basically Greenwich Mean Time without Daylight Savings Time. So if your event was at 9:30 AM today (April 8, 2007), in New York City, then we would remove the effect of daylight savings time, giving us 8:30, and then add five hours (the difference between EST and GMT), giving us 13:30. So if your event was at 9:30 this morning, you would put the time parameters as 13:30. Make sense? Here is a conversion table that might help.

The other important thing to remember is that the javascript Date.UTC() function requires that the month be zero-indexed, so January is 0, February is 1, … December is 11.

So if you wanted to set a countdown to 9:00 AM Christmas morning, 2007, in Los Angeles your date parameters would be:

Date.UTC(2007, 11, 25, 17, 00, 00)

The parameters are year, month (zero indexed!), day, hour, minute, and second, respectively.

5) Choosing a display method

You may optionally choose an abbreviated display. For example:

Normal: 3 days, 4 hours, 10 minutes, 45 seconds
Abbreviated: 3d, 04:10:45

To use abbreviated mode, pass a “true” to the Duration.countdown() function, like so:

Duration.countdown("myCountdown",
                   Date.UTC(2007, 9, 13, 11, 30, 00), true);

6) Internationalization

Changing the language is simple. Simply change the first few lines of duration.js. So for Spanish, it would be:

units:
{
  day: 'día',
  days: 'días',
  d: 'd',
  hour: 'hora',
  hours: 'horas',
  minute: 'minuto',
  minutes: 'minutos',
  second: 'segundo',
  seconds: 'segundos'
},

And that’s all there is to it!

Questions or Comments

Feel free to email me about this at erikwordpressplugins -at- gmail. May your countdowns be merry!

He’s working on the website for French Maid TV, the sexiest technical instruction video blog on the internet. It was one of the first video blogs available on iTunes, as I recall, back when the term video blog was being invented about a year ago. For a geeky, twenty-something, heterosexual male such as myself, could there be anything better than a group of pretty women with French accents in French maid costumes giving technical advice? I don’t think so. I was a fan from episode #1.

Anyway, Miguel contacted me because he had a question about my Revver Plugin for WordPress. The popularity of both WordPress and Revver are growing rapidly, and, so far, the only plugin that makes them work well together is mine.

Miguel’s company, Perez Creative Assignments, seems to specialize in doing headshot photography for aspiring young Californians.

It’s just weird to communicate with someone who, although not incredibly famous himself, has been a part of some of my favorite movies and television shows. I watched his episode of 24 that I have on DVD. He had about 4 or 5 lines and his scene involved Elisha Cuthbert, an actress who was completely unknown before being cast for 24.

Let’s have a look at the hits…

In this case, the human visitor was a friend of mine in Houston (IP blurred to protect the innocent). The other IP address, 66.249.65.103, is Google. I’m not sure why the IP would be located in Michigan.

Notice that his hitting the home page didn’t cause a Google hit, presumably because he had already been to that page. But when he hit the new post that he had never seen, Google got notified and came to check out the new content.

This can only be a result of having the Google Toolbar installed. It must keep track of when you hit a page that you haven’t hit before and send off a message to Google so they can come and investigate.

From Google’s point of view, this is a superb way of finding new content. But from a personal privacy point of view, it’s more than a little disconcerting that your every move should be tracked and recorded in such a way.

I don’t see anywhere to disable this behavior in my Google Toolbar preferences. Oh well…

I just thought you’d want to be made aware of the guy in the trench coat and dark glasses that’s behind you wherever you surf.

Some Examples

Other drop shadow libraries that eschew images, provide their shadow by adding an absolutely positioned div just behind the object. Like so…

I think you’ll agree that that looks pretty bad. But it’s a lot better with a little opacity tweak…

But it still just looks like a gray box under there, doesn’t it? That’s where the magic of The Shadower comes in. Rather than just one gray box, it uses several successively smaller boxes stacked on top of each other to create a realistic drop shadow that really fades into the background.

Now, doesn’t that look better? Drag it up next to the others if you aren’t convinced.

So how do I use it?

There are five parameters to play with in getting your drop shadow just right.

distance [default: 8]

The distance away from the shadowed element to draw the shadow. This can also be thought of as the height “above the page” of the shadowed object

angle [default: 130]

The direction away from the shadowed element to draw the shadow. It is measured in degrees from the vertical. If you think of it like the numbers on a clock, 12 is at 0°, 3 is at 90°, 6 is at 180°, 9 is at 270°, etc. The default angle of 130 would be between 3 and 4 on the clock face.

opacity [default: 0.7]

The opacity of the shadow, measured between 0.0 and 1.0.

nestedShadows [default: 4]

This is the number of gradually darker shadows to draw under the shadowed element.

color [default: #000000]

This is the color of the shadow. The default black color is good enough for most uses, but you can change it if you want.

Go ahead! Play with it!

Recommended Usage

Ideally, you should set a CSS class on any elements that you want shadowed, and then call Shadower.shadowWithClass() on page load. Like so…

<html>
  <head>
   <script type="text/javascript" src="prototype.js"></script>
   <script type="text/javascript" src="shadower.js"></script>
  </head>
  <body onload="Shadower.shadowWithClass('shadowed');">
   <div class="shadowed">This div is shadowed</div>
  </body>
</html>

Download

So what are you waiting for? Download it and start using it!

prototype.js

shadower.js

Feedback

I have not yet tested this on all browsers. If you have any problems, please either leave a comment on this blog entry or email me at erikwordpressplugins -at- gmail.

Enjoy!