Sicherlich kennt ihr diese hässlichen Popups auf größeren Seiten wie Welt.de die auch eine (Bezahl-)App im Appstore haben. Diese Popups sind nicht nur unschön, sondern nerven auch extrem!

In iOS6 will Apple das Ganze nun etwas verschönern und bietet den Webseiten an ein Banner über dem Seiteninhalt anzuzeigen, das die gewünschte App inklusive ein paar Informationen wie Bewertung und Hersteller enthält.

Wie das aussehen kann seht ihr in dem oberen Screenshot des Safari unter iOS6. Statt einem Popup zeigt ted.com den neuen Banner an.

Implementierung

Wenn ihr eure Seite auch mit einer App verknüpfen wollt könnt ihr das ziemlich einfach gestalten:

<meta name="apple-itunes-app" content="app-id=%APPID%, app-argument=%APPPARAMETER%">

Ihr bindet einfach den oberen Meta-Tag in eurem Header ein und der mobile Safari erledigt den Rest. Ihr habt hier dabei zwei Parameter zu befüllen, wobei der zweite optional ist.

Die App-ID ist die Id der App im Appstore. Diese findet ihr in der URL der App im iTunes Store:

http://itunes.apple.com/de/app/doodle-jump-achtung-hochste/id307727765?mt=8

Dabei gebt ihr nur die Zahl an (ohne „id“).

Der zweite Parameter wird der App (falls die verlinkte App bereits installiert ist) übergeben. So könnt ihr den Besucher nahtlos in die App wechseln lassen und automatisch an die Stelle in der App springen auf der der Besucher auf der Webseite war.

Da iOS6 sich wenn es bald raus ist ziemlich schnell verbreiten wird lohnt es sich sicher schon mal die Header anzupassen 😉