Dentro de la vorágine sobre si hacer una página web con sus apps o una web responsive está la opción de los smart app banner. Estos banners son los que salen en la parte superior de una web sugiriendo que instales su app oficial.
Estas sugerencias solo salen cuando se navega desde dispositivos móviles.
Mediante el pantallazo inferior vais a ver lo que es un smart app banner en IOS.
Tal y como habréis visto la página nos sugiere descargar su app de la App Store de Apple. Ahora vamos a ver el smart banner de Android.
Código para insertar el smart app banner en IOS
A continuación os pongo la línea de código que teneis que insertar en el head para que aparezca la sugerencia en dispositivos IOS (iPad, iPhone e iPod):
|
1 |
<meta name="apple-itunes-app" content="app-id=XXXX"> |
El código es una etiqueta meta, solo tenéis que sustituir las ‘XXX’ por el id de vuestra app.
Si necesitáis más información para los dispositivos móviles de Apple visitad esta URL para consutar la documentación oficial.
Código para insertar el smart app banner en Android
Ahora os pongo el código para los dispositivos que funcionan con Android, es importante destacar que aún no existe el código nativo en Android, pero podemos bajarnos de esta URL el plugin de jQuery que nos permite realizar la misma funcionalidad.
Comenzamos de la misma manera, poniendo en el head el meta:
|
1 |
<meta name="google-play-app" content="app-id=XXXX"> |
Al igual que en el caso de IOS solo tenemos que sustituir las ‘XXXX’ por el id de la app en google play.
Tras descomprimir el zip del plugin lo subimos al servidor, y dentro del head metemos las rutas para los archivos jQuery:
|
1 2 3 |
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script src="jquery.smartbanner.js"></script> |
Por último metemos en el body la llamada al plugin:
|
1 2 3 |
<script type="text/javascript"> $().smartbanner(); </script> |