Código HTML para añadir un número de teléfono a una web

Explicamos cuál es el código HTML para mostrar números de teléfono dentro del contenido de nuestros sitios web y que se pueda llamar pulsando en ellos.

En la actualidad, son muchos los tipos de dispositivos que se utilizan para acceder y navegar a través de los sitios de internet.

Es por esta razón, que es muy importante adquirir la costumbre de diseñar nuestros sitios web de la manera más flexible posible, poniendo a disposición una serie de elementos que incrementen su correcta usabilidad.

El número de usuarios de telefonía móvil ha venido teniendo un crecimiento impresionante, y es un tren que nadie va a parar a corto plazo, por lo que dichos usuarios ahora son uno de nuestros principales objetivos de mercado.

Como tal, debemos tratar de hacer que nuestro código sea lo más reconocible posible para ellos.

Muchos de los dispositivos móviles, hacen un gran trabajo al momento de reconocer números telefónicos que se despliegan dentro del contenido de nuestras páginas.

Al identificarlos, inmediatamente los convierten en enlaces, los cuales al ser activados permiten realizar llamadas utilizando la cadena de números que se encuentran en el enlace.

Pero desgraciadamente aún no se puede garantizar que todos los dispositivos móviles que acceden a un sitio, puedan realizar esta función de interpretación adecuadamente.

Quizás porque se incluyo algún guión de más o porque el número fue escrito de una manera no reconocible por la plataforma, fuese lo que fuese, si el dispositivo no pudo interpretarlo, estaremos perdiendo una llamada potencial.

Es por esto, que debemos buscar aumentar la usabilidad de nuestro sitio y añadir enlaces a cada uno de los números telefónicos que mostramos en nuestro contenido.

Agregar el enlace al número

Este es un paso bastante sencillo, basta con aplicar un poco de html básico para así poder envolver la cadena de números dentro de un enlace.

Como es de suponerse, para llevar a cabo esta acción utilizaremos el elemento anchor, pero con la particularidad de dentro de su atributo “href” no usaremos una dirección web cualquiera.

En lugar de utilizar el protocolo “http” o algún selector, utilizaremos el prefijo “tel:” o “tel://”, el cual es un patrón no reconocido por las computadoras, pero que es interpretado por los dispositivos para realizar llamadas.

<a href="tel:+5588899911122">+55 888 - 999 111 22</a>

Cuando observes este enlace, podrás notar que visualmente es exactamente igual que el resto, pero si tratas de dar clic en un navegador que no soporta o reconoce este tipo de enlace, no pasará nada.

En el caso de las computadoras de escritorio, existe una posibilidad de que este tipo de enlace funcione, si tienes instalado Skype y activada su extensión para navegadores, podrás ver que dicha extensión convierte este tipo de enlaces a elementos especiales para poder comunicarte por Skype.

Si no tenemos Skype, aún es probable que el enlace funcione, en algunos caso puede abrirnos un programa externo como Google Voice o Microsoft Communicator para tratar de comunicarnos con ese número, una funcionalidad parecida a la que se da con “mailto:”.

Otros casos se pueden presentar en otro tipo de dispositivos móviles, como las tabletas, al tratar de abrir un enlace de este tipo en un iPad podremos notar que el dispositivo tratará de guardar el número telefónico en la agenda.

Factores a considerar

Ten en mente que al incluir un número en una página, estás abierto a que usuarios de cualquier parte del mundo usen dicho teléfono, por lo mismo los primeros dígitos que incluimos después de “tel:” deben incluir el código de marcado internacional, esto hace que el número telefónico se pueda usar desde cualquier lugar.

Los separadores visuales son opcionales, con excepción del signo +, el cual debe ir siempre incluido antes del código de marcado internacional.

En caso de que el número que ingreses, necesita que se realice una pausa, ya sea porque es una máquina o requiere tiempo para que ingrese una operadora, puedes utilizar la letra p dentro del número para indicar pausa.

Por ejemplo, si quisiéramos que al momento en que el usuario marcara al número +1234567890123, después se escogiera la extensión 1234, podemos hacerlo de la siguiente manera:

<a href="tel:+1234567890123p1234">+12 345 - 678 901 23 ext.1234</a>

La letra p añade 1 minuto de pausa, pero si quisieramos que el marcado esperara a obtener tono podemos utilizar la letra w en su lugar.

También es bueno aclarar, que podemos especificar si el número es fax, simplemente añadiendo el prefijo “fax:”.

Añadir estilos al número de teléfono

Si queremos hacer aún más clara nuestra interfaz, podemos agregar un icono a nuestra cadena para indicar que lo que exponemos es un número telefónico.

Para lograrlo, ni siquiera vamos a necesitar agregar una imagen, ya que podemos utilizar el unicode “\260E;” para mostrar un pequeño teléfono.

a[href^="tel:"]:before {
    content: "\260E";
    display: block;
    margin-right: 2px;
}

Como podrás notar utilizamos una expresión regular dentro del selector, “a[href^=’tel:’]” simplemente significa que rastree todos los elementos de tipo anchor que tengan un atributo href que empiece un la palabra “tel:”