Insertar códigos QR en Blogger

Como crear un codigo qr de mi blog Poner un Código QR en tu blog

Gracias a los smartphones y sus apps para leer códigos QR, se ha convertido en una excelente herramienta orientada al consumidor, sobre todo por su comodidad, debido a que no tenemos que introducir datos de forma manual. Hoy vamos generar códigos QR en cualquier página de nuestro blog.


Leer código QR

A partir de Android 6, el lector viene integrado en el Asistente de Google. En iOS 11 o superior se puede leer utilizando la cámara, para el resto de dispositivos se requiere una app. Si cuentas con un lector QR en tu smartphone, intenta escanear el baso en la imagen de portada o a continuación:


qr zkreations

Como su nombre lo indica, estos códigos son de respuesta rápida (Quick Response), por ello devuelven al instante la información que almacenan.


QR en Blogger con Google Chart

Google chart permite generar códigos QR usando su api, sin embargo esta función sólo está disponible en la versión anterior que desde hace años está en proceso de abandono, por lo tanto no hay garantía de que seguirá funcionando. El código se genera mediante parámetros en una url, por ejemplo:


//chart.googleapis.com/chart?chl=https://zkreations.com&chs=150x150&cht=qr

En la siguiente tabla se encuentran los parámetros aceptados, de los cuales los primeros 3 son obligatorios:


cht Específica que se trata de un código QR (Obligatorio).
chs Tamaño de la imagen (Obligatorio).
chl Los datos a codificar (Obligatorio).
choe Codificación que puede ser (UTF-8, Shift_JIS o ISO-8859-1).
chld Nivel de corrección (L, M, Q o H) y margenes.

Para generar estos datos automáticamente, solo reemplazamos los parámetros por etiquetas de Blogger. Para ello ve a Temas > Editar HTML, busca <data:post.body/> y debajo de eso pega el siguiente código:


<div class='google-qr'>
  <img expr:src='"//chart.googleapis.com/chart" params {cht: "qr", chs: "150x150", chl: data:view.url.canonical}'/>
</div>

Guarda los cambios y listo. Ahora al final de todos tus artículos encontrarás un código similar al siguiente (Si lo escaneas, el resultado será la url la entrada):



También puedes agregar o modificar el aspecto del contenedor mediante css, o agregar texto indicativo.


QR en Blogger con qrcode.js

Hay muchas opciones de codigo abierto pero en esta ocasión me he decidido por qrcode.js. Para instalarlo en Blogger ve a Temas > Editar HTML y busca </body>, arriba de eso pega el siguiente codigo:


<script src="https://cdn.jsdelivr.net/npm/qrcode_js@1/qrcode.min.js"></script>
<script>//<![CDATA[
var qrcode = new QRCode(document.getElementById("qrcode"), {//]]>
    text: "<data:view.url.canonical/>",//<![CDATA[
    width: 120, 
    height: 120,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.L
});
//]]></script>

Por ultimo, buscamos <data:post.body/> y debajo de eso pega el siguiente código:


<div id="qrcode"></div>

Guardamos los cambios y listo. El resultado será el qr de la entrada, igual que en el ejemplo con Google chart. Con lo que respecta a la configuracion, en la siguiente tabla he redactado las opciones disponibles:


text Los datos a codificar (Obligatorio).
width Ancho del QR.
height Altura del QR.
colorDark Color de la codificacion.
colorLight Color de fondo.
correctLevel Nivel de corrección (L, M, Q o H).

Si quieres saber mas sobre qrcode.js te recomiendo revisar el repositorio en github.


Notas finales

Aunque en todos los ejemplos el codigo lo situamos debajo de <data:post.body/>, puedes ubicarlo en cualquier parte dentro de la plantilla, simplemente he tomado el final de un post como ejemplo ya que es donde comúnmente se encuentra.


Espero que esta entrada les haya sido de utilidad, a la par de interesante. Cualquier duda dejala en los comentarios, respondo a todos y no olvides compartir este articulo, es algo que aprecio mucho y me ayuda a seguir escribiendo contenido.

Quizás te interese