Desarrollo: Detectar navegador desde FBML

Cuando desarrollas una aplicación muchas veces no se ve igual de bonita en todos los navegadores (sobre todo con el Internet Explorer 6) o bien no funciona en móviles o bien quieres saludar de una manera personalizada según el navegador, etc.

Facebook mediante FBML nos permite detectar el user-agent del navegador con el tag fb:user-agent, de tal manera que si por ejemplo el navegador utilizado es Internet Explorer 6 y nuestra aplicación no se ve bien en ese navegador podamos escribir un mensaje en pantalla para contárselo y pedirle que se actualice.

Y no sólo eso, si no que además todas los tags FBML y el código HTML que pongamos dentro del tag, es decir entre el tag inicial fb:user-agent y el final /fb:user-agent se mostrará o se ocultará dependiendo de que navegador acceda al contenido.

¿Cómo funciona el tag fb:user-agent?

Pues de una manera muy sencilla:

<fb:user-agent includes="firefox">

Hola, usuarios de Firefox.
<fb:profile-pic uid="642932973" linked="true" />

</fb:user-agent>

En este ejemplo si el usuario está utilizando Firefox se le mostrará el mensaje en pantalla “Hola, usuarios de Firefox” y se muestra mi foto de perfil 🙂

hola

Si no sois usuarios de Facebook vuestra aplicación no mostraría nada.

Os pongo aquí los atributos que admite el tag fb:user-agent:

  • includes: Listado de los user agent para los que se mostra contenido, si son varios se separan por comas (por ej. ie 6, ie 7)
  • excludes: Listado de los user agent para los que no se muestra el mensaje.

Tened en cuenta que includes y excludes buscan la coincidencia de una parte del HTTP user-agent, es decir, si yo pongo la palabra firefox ellos buscan dentro de todo el churro de texto del user agent (p.ej. Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.5) Gecko/20060731 Firefox/1.5.0.5 Flock/0.7.4.1 ), si la palabra firefox está en el churro de texto considera que ese navegador cumple la condición. Las mayúsculas y las minúsculas no afectan.

¿Se pueden combinar los dos atributos a la vez?

Sí, pero el includes tiene prioridad sobre el excludes, de tal manera que en el includes colocaríamos el user-agent genérico del navegador (por ej. ie) y en el excludes el user-agent de la versión del navegador (p.ej. ie 6).

Si necesitáis un buen listado de user agents esta es user-agents.org es una buena fuente de información.

Un comentario sobre “Desarrollo: Detectar navegador desde FBML

  • el 25 Junio, 2011 a las 1:06 pm
    Permalink

    Hey men gracias por la información, me gustaría saber como hago para detectar un navegador desconocido o poco común

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Sígueme