Send to kindle para Octopress

Cuando escribí la oda a Octopress comenté que me sentía más comodo con Ruby para tocar diversas partes del código del blog, como por ejemplo los plugins. En esta entrada voy a aprovechar la noticia del botón de enviar a kindle para que veáis lo fácil que es hacer un plugin.

En primer lugar, vamos a ir a la página de Amazon donde configuramos el botón a nuestro gusto y generamos el widget. Según esta página, tendríamos que seguir dos sencillos pasos para poner el botón en nuestra web:

Insertar un script antes del cierre de la etiqueta body.
Insertar un trozo de HTML en el lugar donde queremos que aparezca el botón.

Lo que nosotros queremos es que el botón aparezca al final de nuestras entradas, junto con los botones de Karmacracy, Twitter, Facebook y Google+. En primer lugar, crearemos una variable sendtokindle en el fichero _config.yml.

# Send To Kindle Button
send_to_kindle: true

De esta forma, podremos elegir poner o no el botón en nuestro blog.

Octopress viene de serie con opciones para compartir en Twitter, Facebook, Google+, etc. El fichero donde están recogidas las diferentes opciones se llama sharing.html y se encuentra en source/_includes/post/sharing.html. En este fichero es donde insertaremos el fragmento HTML del paso 2:

{ % if site.send_to_kindle %}
  <div class="kindleWidget" style="display:inline-block;padding:3px;cursor:pointer;font-size:11px;font-family:Arial;border-radius:3px;border:#ccc thin solid;color:black;background:transparent url('https://d1xnn692s7u6t6.cloudfront.net/button-gradient.png') repeat-x;background-size:contain;">
    <img style="vertical-align:middle;" src="https://d1xnn692s7u6t6.cloudfront.net/black-15.png" />
    <span style="vertical-align:middle;margin-left:3px;">Send to Kindle</span>
  </div>
{ % endif %}

Creo que lo que está pasando aquí es fácil de entender: solo si la variable global sendtokindle esta configurada como true, se inyectará el fragmento HTML.

Una aclaración. El uso de variables, condiciones, etc en Jekyll se realiza encerrando los trozos de código entre llave-porcentaje y porcentaje-llave. En el snippet anterior he escrito { % para que pudierais verlo porque de lo contrario, al generar esta entrada Jekyll habría interpretado que estaba intentando evaluar alguna condición y no lo habría mostrado. Si lo váis a copiar y pegar, acordaros de quitar el espacio entre { y %.

Bueno, ya solo nos falta incluir el script al final del body de nuestra página. Ahora vamos a ver lo bien organizado que está todo en Octopress: en la carpeta source/_includes hay un archivo que se llama after_footer.html. Cuando lo editamos vemos que contiene includes de ficheros llamados google_plus_one.html, twitter_sharing.html, etc. Estos ficheros están en la misma carpeta y al abrirlos podemos ver que contienen los scripts necesarios para los botónes de Google+, Twitter, etc. Vamos a crear un nuevo fichero en esta misma carpeta llamado send_to_kindle.html y en el incluiremos el script que nos indican en Amazon que hay que poner al final del body. Nuevamente, evaluaremos si la variable para incluir el botón está a true:

{ % if site.send_to_kindle %}
<script type="text/javascript" src="https://d1xnn692s7u6t6.cloudfront.net/widget.js"></script>
<script type="text/javascript">(function k(){window.$SendToKindle&&window.$SendToKindle.Widget?$SendToKindle.Widget.init({}):setTimeout(k,500);})();</script>
{ % endif %}

Y en el archivo after_footer.html incluiremos el nuevo html que acabamos de crear:

{ % include send_to_kindle.html %}

Listo, si ahora generamos y previsualizamos nuestro blog podremos ver un botón al final de cada artículo para enviar el contenido al kindle.

Como véis, todo es muy intuitivo. Con un poco de sentido común y navegando por las carpetas del blog para ver como funcionan los plugins que vienen de serie podemos ir dejando Octopress a nuestro gusto.

Pd: No me gusta como queda el botón, sale más alto de lo que se previsualiza en el sitio de Amazón. Mis conocimientos de css, javascript y html son bastante limitados por lo que no estoy seguro de si es algo que podamos corregir o si por el contrario está así en el widget.js y no podemos hacer nada. Tampoco me gusta que el botón de Karmacracy salga en una linea aparte pero son esas cosas que no he conseguido arreglar. Si vosotros habéis conseguido dejarlo mejor... decidme como!!!!

Send to kindle para Octopress

Javi