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);

In their recent Mashable article, HUGE: Twitter Lets You Automatically Follow Your Facebook Friends, we learn that we can now use Twitter’s Facebook Application to find friends to follow in Twitter.

It looks like it was short lived because minutes after this article was published, it seems that Facebook blocked that capability:

Really wondering what game is being played right now! The Twitter Facebook app allow you (as an option) to publish your tweets to Facebook and it now seems that you can’t find new friends through Facebook so you can follow them on Twitter (and optionally post back to Facebook!). Strange!

Facebook was really quick in blocking Twitter and I’m wondering which Term of Service Facebook thinks Twitter did not respect.

UPDATE: on Techcrunch, there’s now an update article from MG Siegler which says this might be an issue on Facebook’s end. Maybe a coding error or, more probable: a) an API problem on Facebook’s end or b) Facebook really blocked Twitter.

UPDATE 2: it seems it is not intentional. Facebook is working with Twitter to solve the problem.