Bibliolinks v3

Lately, real life constraints have forced me to consider the possibility of growing an additional pair of arms, Shiva-style; however, some tiny bugs in Bibliolinks, together with my recent discovery of jQuery, have prompted me to release a new version, Bibliolinks v3.

This version features a new, web-two-dot-zeroish load progress indicator, together with a handy link to open all URLs at once, and will exclude all self-links from the list (they weren’t that useful, anyway). You could have a look at my original article for installation details, or just read the documentation (Yes! This time the code is slightly documented!); but as there are subtle changes, I’ll post here a short guide:

  1. Obtain a Google AJAX Search API key.
  2. Edit your template and add this code snippet just before the </head> tag:
    <link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
    <link href='http://brucknerite.googlepages.com/bibliolinks.css' rel='stylesheet' type='text/css'/>

    Download this stylesheet here.

  3. Save your template, click on the Expand Widget Templates box and look for some place inside your post footer to drop this code snippet:
    <a class='bibliolink' expr:name='"bibliolink" + data:post.id' style='display:none;cursor:pointer;'/>

    In my template, there is a <div class='post-footer'>, but YMMV.

  4. Finally, add links for two scripts. The best place to do so is just before the closing </body> tag:
    <script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR_KEY_HERE' type='text/javascript'/>
    <script src='http://brucknerite.googlepages.com/bibliolinks3.js' type='text/javascript'/>

    Don’t forget to substitute YOUR_KEY_HERE by your very own API key.

And that’s all. Wonder why I skipped v2? Me too. There are stranger version numberings over there, you know.

Código elegante

Una herramienta recomendable para todo aquél que planee mostrar código en una bitácora es dp.SyntaxHighlighter. Éste es el modo de incorporarlo en Blogger:

  1. Descarga la última versión disponible de dp.SyntaxHighlighter (1.4.1).
  2. Descomprime el paquete en algún lugar de tu disco duro. Hay algunos ejemplos de uso, y dos directorios importantes: Scripts y Styles. Necesitas alojar en algún lugar accesible la hoja de estilos CSS SyntaxHighlighter.css, el script shCore.js y tantos “brushes” como planees utilizar. Cada brush es un pequeño script adicional que proporciona soporte para un lenguaje de programación. Los lenguajes soportados son C++, C#, CSS, Delphi, Java, Javascript, PHP, Python, Ruby, SQL, Visual Basic y XML (HTML, XHTML… se consideran dialectos).
  3. Edita tu plantilla de Blogger (¡haz copias de seguridad primero!) En primer lugar, añade la referencia a la hoja de estilos dentro del la cabecera de la página (por ejemplo, justo antes de </head>). Así:
  4. Edita el cuerpo de la plantilla para poner el código que sigue antes de </body>.He escogido ese conjunto de brushes, pero puedes poner cualquier otro.
  5. Ya hemos terminado con la infraestructura. Ahora, sólo es necesario incorporar código para mostrar el nuevo juguetito de nuestra bitácora. Eso es muy fácil: basta con añadir el código dentro de una marca <textarea>, con los siguientes atributos:El atributo name cualifica al área de texto para ser modificada dinámicamente por el script dp.SyntaxHighlighter. class determina el lenguaje y ciertos modificadores de comportamiento, expresados como pseudoclases de CSS. Estos son los detalles adicionales.

Algún consejo: es interesante aplicar los atributos rows y cols al elemento <textarea>. Esto es así por robustez: si no llegaran a funcionar los scripts (normalmente debido a un fallo transitorio de red, a que el usuario tiene desactivada la ejecución de Javascript o a que se está leyendo el artículo fuera del contexto de un navegador —por ejemplo, a través de un lector RSS) el código se vería de todos modos.

Y para el final, los problemas.

  • Los saltos de línea son un problema con el editor de Blogger. La única solución que he encontrado pasa por desactivar la conversión automática de saltos de línea en elementos <br/>. Mira aquí.
  • Si estás introduciendo XML o cualquier variante (HTML, por ejemplo), es recomendable proteger el primer caracter de las marcas (el signo <), que debería aparecer, literalmente, como &lt;. Esto no afectará a la presentación del código, ni a la ventana de “vista simple” proporcionada por el script.

Bibliolinks explained

In an earlier post I presented bibliolinks, a new blogger tool based on Google AJAX Search API. Now it’s time to explain how to install it in your Blogger blogs. You’ll have to modify your template in obscure and contorted ways, so be prepared and backup it before it’s too late! One more thing: this procedure works with my own template, on Firefox 2. I will not be held responsible of anything if you are not me, fiddling with my own template on my own setup. Even if you were me (and I am me, unless…) I wouldn’t bet on any accountability.

Aren’t you scared yet? Ready? There we go. First of all, you have to register for a Google AJAX Search API key here. Got it? Save it somewhere! (You can always regenerate it later; the key is calculated from the URL you input, in this case, you blog’s address.)

Now, edit your template and add this snippet just before your closing </head> tag:

<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>

We are not even close to finish yet! Save your template, click on the Expand Widget Templates box and look for some place to drop this code snippet:

<a class='bibliolink' expr:name='"bibliolink" + data:post.id' style='display:none;cursor:pointer;'>Bibliolink <span>&#9658;</span></a>

This should be located somewhere inside your post footer container (on my template, it’s a <div class='post-footer'> tag). I decided to put it inside an empty element denoting a third line of content for post footers, exactly here:

<p class='post-footer-line post-footer-line-3'/>

YMMV, of course. Now, only one more step: you have to provide a link for two scripts. The best place to do so is just before the closing </body> tag. This is the first script, for Google AJAX Search functions:

<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&key=YOUR_KEY_HERE' type='text/javascript'/>

Don’t forget to substitute YOUR_KEY_HERE by your own API key. Immediately next to that script, add this one:

<script language='Javascript' src='http://brucknerite.googlepages.com/bibliolinks.js' type='text/javascript'/>

Here you should use your own hosting for the code, since I’m using my own Google Page. Here is a link to an uncompressed (and, for now, uncommented) version of the code.

And that’s all for now!