Condicional de Blogger para detectar dispositivos móviles sin habilitar su plantilla

Un condicional efectivo de Blogger para detectar el acceso al blog desde dispositivos móviles con el que no es necesario tener que habilitar "la plantilla de móvil"

Condicional de Blogger para detectar dispositivos móviles sin habilitar su plantilla

Por Kseso ✎ 12
Blogger: detectar acceso de dispositivos móviles sin habilitar su plantilla

Una de mis mayores preocupaciones con el blog ha sido y sigue siendo el evitar la carga innecesaria de cualquier elemento. Fruto de esta inquietud fue cierto experimento que compartí en el artículo Optimización extrema de un blog en Blogger.

Sin embargo había, hasta hoy, un detalle imposible: cómo discriminar si se accede al blog desde un dispositivo móvil y en base a ello actuar. Como, por ejemplo, para no cargar cierto contenido u ofrecer otro específico.

Si bien es cierto que son conocidas muchas "condiciones" y etiquetas de Blogger para ello, como data:blog.isMobile, todas tienen una condición previa para funcionar: es obligatorio tener habilitada la plantilla para móvil.

Si no la habilitas ninguna funciona.

Tampoco sirve de nada intentar aprovechar que Blogger redirecciona el acceso móvil a la url http://dominio.blogspot.com/?m=1. Como ves añade a la dirección de cada blog el parámetro ?m=1. Pues usando una condición por tipo de url tampoco conseguí resultados:

<b:if cond='data:blog.url != "http://ksesocss.blogspot.com/?m=1"'>

Frustrante. Todo lo anterior era una espina que tenía clavada. Y mira que había buscado, preguntado y experimentado. Hasta hoy.

isMobileRequest

Aunque la detección por url no sirva, sí que es posible usar dicho añadido para nuestro propósito sin tener que activar la plantilla móvil.

En uno de tantos script usados por Blogger hay uno que evalúa una serie de valores. Algunos son los que el autor define en el apartado "configuración". Como si es un blog privado o el tipo de contenido.

Algunas de estas evaluaciones pueden devolver dos valores: true o false.

isMobileRequest en blogger

La condición que nos interesa es isMobileRequest. Básicamente lo que hace es evaluar la dirección del blog y si encuentra en ella la cadena m=1 devuelve 'true' y si no la encuentra o es m=0 devuelve 'false'.

Así que todo lo que tenemos que hacer es usar un condicional basado en esta evaluación y el resultado devuelto:

<b:if cond='data:blog.isMobileRequest == "true"'> contenido para móviles <b:else/> contenido para no móviles </b:if>

O si lo que queremos es no cargar contenido en dispositivos móviles:

<b:if cond='data:blog.isMobileRequest != "true"'> </b:if> equivalente a la anterior <b:if cond='data:blog.isMobileRequest == "false"'> </b:if>

Como es lógico, la condición con este dato o etiqueta blog.isMobileRequest puede ser evaluado con cualquiera de los operadores permitidos por Blogger.

Cuándo añade Blogger ?m=1 a la url

Tras publicar el post, hay quienes me han preguntado por cuándo o en cuáles dispositivos añade Blogger la cadena ?m=1. Y lo cierto es que no lo se ni he podido encontrar información al respecto.

Despues de jugar un rato con el inspector de código de Chrome y la opción "Toggle Device Mode" en la que puedes emular dispositivos y tipo de conexión sólo tengo la sensación de que Blogger ha de avaluar más de uno y de dos datos al respecto.

Verificado su funcionamiento en este mismo blog: puedes observar que los banners en móviles no se cargan y en dispositivos de escritorio, si no la tienes bloqueada, sí. Igual con los 3 últimos comentarios y el avatar de sus autores que muestro en la parte superior derecha del index (o los que se despliegan en los artículos).

Prúebalo tú mismo http://ksesocss.blogspot.com/2015/07/condicional-Blogger-isMobileRequest.html?m=1 Como ves este enlace a este mismo artículo lleva la cadena /?m=1 en su url. Pínchalo y observa los cambios.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 12

  1. Esto es un gran hallazgo Kseso. Enhorabuena por la constancia.

    ResponderEliminar
    Respuestas
    1. ¿Ah sí?
      Pues si lo dice el Sr. Oloman, versado y ducho en esto del Blogger... pero no lo será tanto xD

      Gracias.

      P.D.: Quizás fuese buena idea que te lo llevases para tu blog y así que sea conocido.

      Eliminar
  2. Es Ud. un maestro Kseso, me maté buscando esta solución, muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Yo también, Yeyas. Yo también.

      Pero tampoco es para tanto ;-)
      Espero le puedas sacar mucha utilidad.

      Un saludo

      Eliminar
  3. Pues me acabo de enterar de su descubrimiento vía Oloman y vine a darle las gracias. Sin duda resulta muy útil.

    Un abrazo.

    ResponderEliminar
    Respuestas
    1. Gracias Karla.

      Si me permites dos correcciones a tu grato comentario (para otros futuros):
      Donde dices
      su descubrimiento mejor tu descubrimiento.
      vine a darle mejor vine a darte.

      Un saludo

      Eliminar
  4. Hola, realice todo perfectamente, pero la caja de comentarios de fb aun no se muestra en mi dispositivo móvil, le agregue lo del "?m=1" y si se muestra en la computadora usando en link, pero no en el móvil
    Podrías ayudarme?

    ResponderEliminar
    Respuestas
    1. Pasé por los dos blogs que tienes enlazados en tu perfil, Jeison, y en ninguno encontré caja de comentarios (ni de fb ni nativa). Así que sólo puedo especular al respecto.

      Si al añadir ?m=1 sí aparece en versión escritorio quiere decir que el condicional isMobileRequest == "true" funciona.
      Lo que me lleva a pensar que pueda haber algún otro condicional (no mencionas si usas "la plantilla para móvil" o no) o hasta pudiera ser alguna @media query de Css que lo esconda.

      Pero sin más información sólo son cábalas.

      Un saludo

      Eliminar
    2. P.D.: se me olvidaba, Jeison, creo recordar que hay más de un includable que controla todo lo relativo al apartado "comments" y lo que en él se genera.
      ¿Verificaste que no lo tienes en el adecuado?

      Eliminar
  5. Hola! Ando realizando una mejora en cuanto al SEO de mi pagina web para dispositivos moviles, uno de los aspectos que considera GOOGLE para su posicionamiento es que no haya redireccionamientos, pero ilógicamente BLOGGER que es su propio servicio genera la dirección http...t.com/?m=1.


    Por mas que he intento no he logrado que cuando se visite la web se mantenga en la direccion (link) original sin que añada al final de esta /?m=1.

    Esto se puede realizar, existe la manera de que no genere esta redirección?

    ResponderEliminar
    Respuestas
    1. Hola obregonbeat
      Hasta donde yo conozco no se puede evitar la redirección móvil (?m=1)
      En su momento y para algunas pruebas (extremas) también lo intenté.

      Pero creo, y remarco lo de que es una creencia propia sin base alguna) que bendita redirección móvil una vez que conocemos esta data.
      Más allá de temas SEO (aquí un escalofrío xD) puedes conjugar ambas para beneficio de tu blog (en todos los aspectos) y de una muy grata experiencia de uso por parte de tus usuarios.

      Un saludo.

      P.D.: supongo que cuando haces algún tipo de autoría usarás ambas direcciones ("normal" y móvil) para no contaminar los resultados en uno u otro con lo que no corresponde.

      Eliminar
    2. Pues el proceso va muy bien, hasta el momento no encuentro como quitar el "?m=1" pero igual la manera en que indexa google las paginas hospedadas en Blogger es abolutamente bueno, mi pagina web que es de un servicio muy competido en Colombia ya se encuentra en las primeras posiciones con algunas palabras claves. http://www.obregonbeat.com :)

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap