superman tux

Depuis iOS6, Apple a mis en place une nouvelle façon de lier son site à une application mobile iOS : c’est la Smart Banner.

Le problème, c’est qu’Android et les anciennes versions d’iOS ne supportent pas cette bannière. Pas de problème, encore une fois, voici le super tuto qui vous sauvera.

Comment mettre la smart banner sur Android, et sur les anciens iOS

  1. Téléchargez Jquery Smart Banner (si le lien de fonctionne plus, c’est ici)
  2. Dézipper le fichier et uploader le dans un dossier de votre site internet
  3. Utilisez les bouts de code suivants dans votre header (balise HTML <head>) et juste avant la balise fermante du body

Code à intégrer

<html> <head> <title>TechRevolutions</title>
 <meta name="author" content="TechRevolutions, Inc."> 
 <meta name="apple-itunes-app" content="app-id=544007664">
 <meta name="google-play-app" content="app-id=com.techrevolutions.techrev"> 
 <link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
 <link rel="apple-touch-icon" href="apple-touch-icon.png">
 </head>

 <body> 
 ...
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 <script src="chemin_js/jquery.smartbanner.js"><
 <script type="text/javascript"> $().smartbanner(); </script>
 </body> </html>

Paramétrage de la smartBanner

$.smartbanner({
 title: null, // Remplace le titre par défaut (qui est le tag <title> par défaut)
 author: null, // Remplace l'auteur par défaut(qui est le <meta name="author">)
 price: 'Free', // Prix de l'app 
 inAppStore: 'In the App Store', // Texte à coté du prix (ios)
 inGooglePlay: 'In Google Play', // Texte à coté du prix (Android)
 icon: null, // URL de l'icone (qui est la balise <link> par défaut)
 iconGloss: null, // Force l'effet gloss (true ou false)
 button: 'VIEW', // Texte sur le bouton d'installation
 speedIn: 300, // Durée de l'animation d'apparition
 speedOut: 400, // Durée de l'animation de disparition
 daysHidden: 15, // Nombre de jours pendant lesquels la bannière sera cachée
 //après la fermeture(0 = toujours afficher)
 daysReminder: 90, // Nombre de jours pendant lesquels la bannière sera cachée
 //après le clic sur VIEW(0 = toujours afficher)
 force: null // Force l'affichage de la bannière Android ou iOS
 })
Vous aimez cet article ? Partagez le.

By TechRevolutions| No Comment | Développement, Google, Terminaux mobiles, Tutoriaux
2