Jerome's TOTs

A few geeks may still prefer text emails but when building a site or an app, you know you need HTML emails. It just still works. What doesn’t always work, thought, is the myriad of mail clients that all have their quirks and may break some of your formatting. What you need is a recipe or a template to display your stuff the way you want and ensure it works across most rich clients.

While reading Hacker News this morning, I stumbled on this thread about HTML Email Boilerplate and discovered two great resources that deserve a place in your toolbox:

• The HTML Email Boilerplate sir has a great article that explains how to use their boilerplate on GitHub. Read it to understand the subtleties of creating HTML messages that technically work.
• MailChimp has a nice and free collection of HTML templates that are ready to use.

I needed to create many HTML countdown timers for a little pet project of mine. So, I wrote a jQuery selector function to create countdown timers on demand. These timers are really simple, they countdown for a number of seconds to zero.

Add this to your scripts:

(function($) {
  $.fn.createCountdownTimer = function(selector,time,tick,cb) {
    var seconds = time;
    var el = this;
    tick = tick || 1;
    var timer = function() {
      seconds -= tick;
      el.find(selector).text(String(seconds));
      if (seconds > 0)
         setTimeout(timer,tick * 1000);
      else
         cb && cb();
    };
    setTimeout(timer,tick * 1000);
    return this;
 };
})(jQuery);

Parameters tick and cb are optional. tick defaults to 1 as you usually tick down 1 second at a time.

Suppose you have a HTML countdown timer such as:

<div id="my_timer">Starting in <span class="timer">10</span> seconds...</div>

then, all you need to do to start a countdown from 10 to 0 is:

$("#my_timer").createCountdownTimer(".timer",10);

You can also supply a callback as a fourth parameter that will be called when the timer is done counting to zero. For example:

$("#my_timer").createCountdownTimer(".timer",10,1,function() {
   alert('Done!');
});

The official release of WordPress 3.0 being a bit recent, I’ve had a hell of a time trying to find bit.ly plugin that supports WordPress 3.0. The idea is to get your bit.ly short URL instead of the WordPress 3.0 short URL that uses your own domain name when you press the “Get Shortlink” button of a post editor.

I found the “WP Bit.ly” plugin which looks pretty good but does not yet support WordPress 3.0.

So what does an unsatisfied geek do on a Friday evening instead of having dinner? He finds a solution.

1. Download the WP Bit.ly plugin

2. Fix the plugin code

In file wp.bitly.php, put lines 47-48 in comment:

/*add_action( 'wp',      'wpbitly_shortlink_header' );
add_action( 'wp_head', 'wpbitly_shortlink_wp_head' ); */

If you too are a geek and you need to know, this will make sure WordPress 3.0 continues to take care itself of the HTML response header and the Web page HTML header as per the rel=”shortlink” proposed standard. Otherwise, the WP Bit.ly plugin would add these twice to a page which wouldn’t be clean.

3. Modify your theme’s function.php

Add the following code to your theme’s functions.php file:

/* bit.ly shortlink */

function get_bitly_shortlink($shortlink, $id, $context, $allow_slugs) {
   if (function_exists('wpbitly_get_shortlink')) {
      $slink = wpbitly_get_shortlink($id);
      if (empty($slink)) {
         wpbitly_generate_shortlink($id);
         $slink = wpbitly_get_shortlink($id);
         }
      return !empty($slink) ? $slink : $shortlink;
      }
   return $shortlink;
}
add_filter( 'get_shortlink', 'get_bitly_shortlink',10,4);

This code links the plugin code to the new WP 3.0 shortlink feature. It also makes sure that WordPress 3.0 will continue to operate as before if you do not enable the WP bit.ly plugin or you disable it.

Generate the bit.ly links from the plugin

So that the “Get Shortlink” button gets you a bit.ly link (instead of the default permalink), these should be generated once from the plugin’s settings. For new posts new bit.ly links should be created automatically.

Be aware that visits and crawls to your site will generate bit.ly links for each visited posts if no link already existed for each visited post. This is due to the fact that the short links are included in the code of each of your page to support new standards.

I’ve been helping At Home with Kim Vallee support the Open Graph Protocol promoted by Facebook. It’s easy to implement and great research that we’ll be adding immediately to Shwowp. If you want to learn a bit more why it’s important for your site to implement the Open Graph Protocol, read this article: “Facebook Unleashes Open Graph Search Engine, Declares War On Google”.

URL Linter is a handy Facebook Developer tool that allows you to analyze a Web page meta data to see how Facebook understands it.

The problem is that URL Linter was working for the home page but not for the article pages. After much lost sleep and a call for help on Facebook Developer Forums, Paul from Facebook confirmed it was a bug:

• WordPress 3.0 added a shortlink feature
• If you changed your WordPress permalinks to friendly names instead of the default, it adds an HTTP header variable in the form
  • Link    <http://domain.com/?p=12345>; rel=shortlink
  • This new header variable is part of a proposed microformat standard.
  • The Facebook URL Linter and crawler currently has trouble parsing the page when it sees this HTTP header

The Fix

The bug should be fixed by Facebook in about a week. In the meanwhile, if you run WordPress 3.0 and are implementing Open Graph Protocol support to your site, you can add the following code in your theme’s functions.php to disable the shortlink in the HTTP header output:


/* Remove WP 3.0 shortlink */
function empty_shortlink($shortlink, $id, $context, $allow_slugs) {
return NULL;
}
add_filter( 'get_shortlink', 'empty_shortlink',10,4);

My wife Kim is the successful editor behind At Home with Kim Vallee. She uses the WordPress platform.

With success and a popular platform, problems with comment and contact form spam becomes quickly a pain to manage. That’s why you need a good toolset to keep your sanity intact. Good WordPress plugins to protect against spamming and keep your installation secure include:

• Akismet – protects against spam
• Login LockDown – adds extra security to your login form
• WP Security Scan – security
• WP-SpamFree – extra spam protection

WP-SpamFree is quite invaluable against robots and contact form spam. However, it came to our attention that some people would see the following message instead of the contact form:

Your location has been identified as part of a reported spam network. Contact form has been disabled to prevent spam.

See the message when it would appear instead of Kim’s contact form:

This was really annoying. People were telling Kim they couldn’t send comments.

By chance, one PC at our office had this bug. The unique IP address assigned to our network by Videotron seemed clean. So I dug further and looked at the plugin code to understand and debug what’s happening. It seems some browsers in some configurations (in our case a particular Firefox installation on Windows XP) do not transmit the HTTP_ACCEPT_LANGUAGE variable to servers. There is a check in the WP-SpamFree plugin that identifies the visitor as a spammer if this variable is empty.

Once the problem identified, the fix is easy: simply disable this verification. The quick fix to the plugin is to modify the wp-spamfree.php file in the plugin directory to put this condition in comment. See my changes in red:

/*
            $user_http_accept_language = trim($_SERVER['HTTP_ACCEPT_LANGUAGE']);
            if ( !$user_http_accept_language ) {
                $contact_form_blacklist_status = ’2′;
                $spamfree_error_code .= ‘ CF-HAL1001′;
                }
*/
            // Add blacklist check – IP’s only though.

            if ( $contact_form_blacklist_status ) {
                $spamfree_contact_form_content = ‘<strong>Your location has been identified as part of a reported spam network. Contact form has been disabled to prevent spam.</strong>’;
                }
            $content_new = str_replace(‘<!–spamfree-contact–>’, $spamfree_contact_form_content, $content);

That’s it. No more false positives for Kim’s visitors!

I’ll send this issues to the WP-SpamFree devs.