WP Greet Box icon
Wenn Du über neue Beiträge auf dem Laufenden bleiben möchtest, abonniere
den RSS Feed, oder folge mir einfach bei Facebook, Google+ oder Twitter.

IE9 Jumplisteinträge für die eigene Webseite

Veröffentlicht am 4.10.2010 Kategorie: Windows 7

Wie im Beitrag zur Beta von Internet Explorer 9 erwähnt, enthält Microsofts neuer Webbrowser die sogenannte Pinning Funktion, mit der geöffnete Tabs in die Taskleiste von Windows 7 integriert werden können und neben dem Öffnen der Seite auch eine Jumpliste für den schnellen Zugriff auf besondere Inhalte oder Funktionen der Webseite mitbringt. Die Einbindung solcher Metadaten in die eigene Webseite ist für jeden kinderleicht und in kürzester Zeit umsetzbar.

Abhängig davon, ob ihr ein Content Management System, einzelne Webseiten oder beispielsweise WordPress einsetzt, ist die Einbindung der Metadaten ein wenig anders. Für meinen WordPress Blog habe ich die Metadaten für den IE9 in die header.php meines Themes eingefügt.

Bevor ihr die einzelnen, in der Jumplist augelisteten Aufgaben, einbinden könnt, müsst ihr die folgenden Metadaten einfügen:

    <meta name="application-name" content="Bjoerns Windows Blog"/>
    <meta name="msapplication-tooltip" content="Informationen und Neues zu Microsoft Windows"/>
    <meta name="msapplication-starturl" content="http://blog.buerstinghaus.net"/>

Jetzt können die einzelnen Aufgaben bzw. Links auf eure Webseite angelegt werden:

    <meta name="msapplication-task" content="name=Anleitungen;action-uri=/anleitungen/;icon-uri=/bloglogo.ico"/>
    <meta name="msapplication-task" content="name=Downloads;action-uri=/downloads/;icon-uri=/bloglogo.ico"/>
    <meta name="msapplication-task" content="name=Hardware;action-uri=/hardware/;icon-uri=/bloglogo.ico"/>

Hinweis: Für jede Aufgabe/Link könnt ihr ein eigenes Icon oder auch dasselbe verwenden.

Fertig sieht das Ganze dann so aus:

Wem das nicht reicht, kann die Farbe des Navigations-Button im Internet Explorer 9 anpassen:

    <meta name="msapplication-navbutton-color" content="#012D50"/>

Zusätzlich zu den Jumpliste könnt ihr auch Overlay Icons für z.B. für die Signalisierung von neuen Inhalten und eine Thumbnail Toolbar integrieren. Eine komplette Übersicht über alle Einstellungsmöglichkeiten der Pinning Funktion von IE9 findet ihr auf der Webseite von MSDN.


Empfehle den Beitrag anderen :

Ähnliche Beiträge:

Ping- und Trackbacks

4 Kommentare Kommentar schreiben

  1. #1bebo am 6.11.2010 13:26

    hi,
    super für die Anleitung

    ich habe es selbstverständlich gleich ausprobiert aber bekomme es einfach nicht richtig zum laufen

    also navbutton-color geht Problem los
    aber Icon egal ob ich ein große mit 64×64 nehme oder das alte klassische nicht
    es bringt auch nix den vollen pfad zu nehmen

    task wird nur der News geladen wen ich diesen entfernen ist keiner mehr vorhanden

    wenn jemand Lust hat kann ja mal schauen
    http://kfv-dachau.de im Quellcode

    gruß

  2. #2Bjoern am 9.11.2010 20:43

    Was mir bei Dir auffällt: das Icon ist keine echte .ico Datei sondern ein GIF.
    Schau Dir mal meine und Deine Seite in Firefox an und klicke bei beiden per rechts Klick in die Seite und wähle im Kontextmenü „Seiteninformationen anzeigen“. Dort siehst Du den unterschied zwischen Deinen Metadaten und meinen.

  3. #3bebo am 9.11.2010 22:50

    Ja genau das verstehe ich halt nicht wieso er nur ein „msapplication-task“ erkennt

    mit dem .ico kann ich es nicht ganz nachvoll ziehen
    es ist zwar auch als gif gesoeichert aber

    http://kfv-dachau.de/themes/kfv/images/favicon3.ico
    und
    http://blog.buerstinghaus.net/wp-content/themes/win7blog/images/favicon.ico

    sind beides Typ:X-ICON-Grafik mit 16pxx16px

    na ja wenn ich mal lust habe suche ich noch was

  4. #4Bjoern am 9.11.2010 22:54

    Dein Icons wird mir wenn ich es mit Firefox öffne als GIF-Grafik angezeigt. Meine hingegen als ICON-Grafik.
    Kann Dir die gerne mal umwandeln und an Deine beim Kommentar angegebene Mailadresse schicken.
    In kürze erscheint auch ein Beitrag zu einem kostenlosen Icon Editor.

Kommentare

Benachrichtige mich bei neuen Kommentaren