Revista Blog

Como conseguir un código QR de tus post para insertarlos en tu blog

Publicado el 23 febrero 2017 por Carmen Ferreira @negocioscaninos

Vamos a generar de manera sencilla códigos QR para que se muestren en en cualquier lugar dónde los queramos insertar.

Los códigos QR facilitan acceder a páginas webs y a obtener datos sin tener que escribir, esto es muy cómodo cuando quieres promocionar tu blog o contenido en otros canales como es el impreso.

Cada vez usamos el teléfono para todo, a mí me ha cambiado la vida porque puedo trabajar mucho desde él, una de las aplicaciones que más me gustan son los scanner de códigos QR porque permiten leer información sin teclear.

genera tus codigos QR

En el post de hoy es un truco rápido que te va a encantar porque es muy fácil.

Los códigos QR y los códigos Bidi han ganado mucha popularidad porque pueden almacenar e insertar información de manera muy rápida y sin esfuerzo.

Por ejemplo el caso de las Vcards; códigos que al escanearlos te facilitan la dirección, teléfono, correo… por lo que cada vez aparecen más en las tarjetas de visita y te lo insertan en tu libreta de contactos.

Si decides hacerte una tarjeta de visita para tu blog hazla con Vcard incorporada porque así de un vistazo te añaden a la libreta.

Este post se me ocurrió el otro día visitando una web de muebles austriaca que era impronunciable, en es momento iba a mandársela a mi compi por wassap pero imposible escribir eso, desistí…

Es una situación que me ocurre muy a menudo ver un post y querer mandarlo por wassap o llevármelo al móvil para leerlo en el salón, pensé:

“Oye un código QR les vendría muy bien a mis lectores para enviar post por wassap o llevarse vídeos o podcast al teléfono” .

cambiar-el-icono-y-el-color-del-navegador

Como Google tiene de todo, hace tiempo encontré el filón de las gráficas de Google que me ayudan mucho en mi trabajo a representar datos y ahí recordaba que había un generador de códigos bidi o QR.

Los códigos Quick Response son de Denso Wave Incc, en realidad son códigos de barras que almacenan información y su lectura es rápida.

Su web es esta: http://www.qrcode.com/en/

Por qué me parece mejor generarlos nosotros y no acudir a aplicaciones.

  • A parte de que verás que es más fácil generar tu QR sin necesidad de registros.
  • Vamos a crear un código estático que siempre apuntará a nuestro post, algunas aplicaciones usan dinámicos que son fáciles de piratear.
  • Las páginas de generadores pueden tener una temporada gratuita y otra de pago.
  • Yo los hacía siempre con InDesign que tiene la opción de crearlos pero para web esto es más fácil.
  • También conseguir nuestro código QR es bueno para el SEO dado que algunos de los metadatos se indexan, como ocurre con lo PDF.
  • Son una forma de atraer más lectores y promocionar tu contenido.

creacion de contenidos

Para generar el código estático de nuestro post vamos a usar una aplicación de Google Developers que es Charts, dispone de muchas funciones pero esta es verdaderamente útil.

Developers Google Charts

Vamos a conseguir un código QR de tus post

Vamos a utilizar la api de Google developers charts para crear un código QR para dirigir a una web o a un post determinado.

La estructura del enlace que nos proporciona un código QR mediante la api de Google es esta:

https://chart.googleapis.com/chart?

A esta dirección se le pasan varios parámetros por el GET para que nos muestre el render de nuestro código, con esto vamos a construir una dirección web diferente que se pinta en nuestro blog.

genera tus codigos QRpara tus post

Importante no dejar espacios, hacerlo a mano está muy bien porque al copiar código cuándo hay el signo ampersand “&” ehh a que no sabías que se llamaba así el “and” lo transfoma en “&” y no funciona, por eso recomiendo usar editores de texto plano.

Como verás cada parámetro esta separado por el signo =

Para que te genere el código de tu post  tienes que dar varias variables que son obligatorias:

La primera las medidas que quieras dar al código, y la URL a dónde quieres que lleve el código, también puedes especificar la calidad o la codificación del idioma pero por defecto es UTF8 no tenemos problema, es la nuestra.

Esta sería la matriz a la hora de añadir datos.

https://chart.googleapis.com/chart?chs=250×250&cht=qr&chl=URL

Medidas de los códigos QR

Las medidas son muy importantes, aunque luego al darle formato puedes escalarlo pero no lo recomiendo porque pierde precisión.

Para web el mínimo tamaño es 150×150 he puesto 250×250 píxeles porque creo que así es más fácil leer el código QR y no es un tamaño muy escandaloso.

chs=250×250&cht

Apuntando a la página de destino del código QR

Luego sigue la URL de la imagen, imprescindible para que podamos ver el render de nuestro código QR, pon la ruta absoluta con el https.

qr&chl=https://yoblogueo.com/acceso-directo-blog-movil-minuto/

Esta sería la dirección que hemos construido, luego copias y pegas más adelante, esto es para que entiendas de dónde salen las cosas.

Si la copias y la pegas en la barra de direcciones del explorador te envía al código QR que hemos generado para la página, de ahí lo puedes descargar como una imagen.

https://chart.googleapis.com/chart?chs=250×250&cht=qr&chl=https://yoblogueo.com/acceso-directo-blog-movil-minuto/

Esta es la versión para insertar por ejemplo en cualquier lugar de la entrada, le puedes dar la medida que quieras tanto al código como el tamaño que quieres ver.

Puedes añadir los atributos alt y title como si de una imagen se tratase, ojo a mano.

<img src=”https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=https://yoblogueo.com/acceso-directo-blog-movil-minuto/” width=”250″ height=”250″ alt=”Código QR” title=”Como hacer un acceso directo a tu blog en tu móvil en un minuto”>
Código QR

Espero que te guste el truco rápido y lo vea en muchos blogs por aquí, no es mala idea tener códigos de la newsletter a mano o de los post más interesantes y pegarlos por ahí, es medio broma.

cuéntame para que usas normalmente los códigos QR y si te ha parecido útil.


Volver a la Portada de Logo Paperblog