Fechas relativas con jQuery

Timeago es un plugin para jQuery que pemite transfrormar una fecha "normal" en una fecha relativa, es decir, calcular cuanto tiempo ha pasado desde ese momento hasta ahora.

Si bien es algo que también puede hacerse sin librerías, este plugin posee algunas características que lo hacen especial ya que soporta casi cualquier tipo de formato de fecha por lo que se adapta bastante bien a cualquier sistema y para quien quiera ser "cool", utiliza una estructura de microformatos que también interpreta las nuevas etiquetas de HTML5 tales como <time> </time>

Para usarlo, descargamos el script, lo alojamos en un servidor y lo agregamos al head, debajo de la librería jQuery:

<script src="URL_jquery.timeago.js" type="text/javascript"></script>

Si no queremos usar archivos externos, copiamos y pegamos su contenido:

<script type='text/javascript'>
//<![CDATA[
  ...... acá pegamos el contenido del script jquery.timeago.js .......
//]]>
</script>

El plugin está en inglés pero, podemos cambiarlo, ya sea manualmente, buscando las variables con los textos o bien descargando cualquiera de las extensiones que ya están predefinidas y abarcan un sinnúmero de idiomas. En este caso, simplemente copiamos y pegamos ese código debajo de lo anterior; este sería el español:

<script type='text/javascript'>
//<![CDATA[
  ...... acá pegamos el contenido del script jquery.timeago.js .......
  ...... acá pegamos el contenido del script jquery.timeago.es.js .......
//]]>
</script>

Por último, ejecutamos la función indicándole la etiqueta y/o clase que debe analizar una vez que la página esté cargada:

<script type='text/javascript'>
  $(document).ready(function(){
    $('abbr.published').timeago();
  });
</script>

En este caso, utilizo una etiqueta ABBR con la clase published ya que así es como Blogger muestra ese dato por defecto:

<a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'>
  <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
    <data:post.timestamp/>
  </abbr>
</a>

Claro que, si la plantilla está muy personalizada, es posible que ese código sea distinto; sea el que sea, debe buscarse cualquiera de las variables que usa Blogger para mostrar la fecha de las entradas: data:post.timestamp o data:post.timestampISO8601 y re-armar la etiqueta; por ejemplo, de este otro modo:

<span class='timeago' expr:title='data:post.timestampISO8601'><data:post.timestamp/></span>

en cuyo caso, el script se llamaría de este modo:

$('span.timeago').timeago();

¿Y la fecha de los comentarios?

Sería similar, bastaría buscar el dato de Blogger: data:comment.timestamp y modificarlo pero ... en este momento, conviven muchos tipos de códigos para comentarios lo que hace engorroso enumerar cada uno de ellos así que sólo mostraré la forma de hacerlo con los nuevos comentarios anidados que es el método que podría causar más problemas ya que todo es generado por un script interno del sistema.

En este caso, lo que el script de Blogger escribirá será algo así:

<span class="datetime secondary-text">
  <a href="URL_COMENTARIO" rel="nofollow"> LA FECHA </a>
</span>

y no tenemos forma de modificar ese código, lo que haremos es modificar una línea del script para que lea ese dato. Buscamos:

var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");

y lo cambiamos por:

var iso8601 =  $(elem).text()

y llamaremos a la función de este modo:

$(document).ready(function(){
  $('span.datetime a').timeago();
});

Pero, para que esto funcione correctamente, debemos asegurarnos que el formato de la fecha de los comentarios sea adecuada así que en Configuración | Comentarios | Formato de hora de los comentarios, indicamos esto: