HTML vCard mittels Mikroformat erstellen

vCards sind elektronische Visitenkarten die per Mausklick ins Adressbuch (lokal, online, mobil, etc.) importiert werden können. Mikroformate sind Markup Auszeichnungen die es dem Programm (z. B. Browser) ermöglichen den semantischen Zusammenhang von Zeichenfolgen zu verstehen. Der Computer stellt folglich nicht nur eine Reihenfolge von Zeichen dar, sondern er versteht auch in was für einem Zusammenhang die Daten stehen und was sie bedeuten. In diesem Beitrag erklären wir wie vCards mittels Mikroformaten in Internetseiten integriert werden können.

HTML mit Microformat auszeichnen

Im folgenden seht Ihr den gewöhnlichen HTML-Code zur Darstellung einer Adresse.

<address>
  kulturbanause
  Jonas Hellwig
  Reichenberger Str. 29
  10999 Berlin
  Deutschland
</address>
Fon: +49 (0)30 - 555 709 666
E-Mail: <a href="mailto:info@kulturbanause.de">info@kulturbanause.de</a>
Web: <a href="http://kulturbanause.de">kulturbanause.de</a>

Um nun diesen gewöhnlichen HTML-Code als ein Mikroformat auszuzeichnen, müssen einige (vordefinierte und feststehende) Klassen eingefügt werden. Danach sieht das ganz wie folgt aus:

<div id="hcard-Jonas-Hellwig" class="vcard">
  <address class="adr">
     <div class="org">kulturbanause</div>
     <div class="fn">Jonas Hellwig</div>
     <div class="street-address">Reichenberger Str. 29</div>
     <div class="postal-code">10999</div>
     <div class="locality">Berlin</div>
     <div class="country-name">Deutschland</div>
  </address>
  Fon: <span class="tel">+49 (0)30 - 555 709 666</span>
  E-Mail: <a class="email" href="mailto:info@kulturbanause.de">info@kulturbanause.de</a>
  Web: <a class="url" href="http://kulturbanause.de">kulturbanause.de</a>
</div>

Die Klassen habe ich in diesem Fall in <div>– bzw- <span>-Elemente geschrieben, sie können selbstverständlich auch auf andere Tags angewendet werden.

Übersicht vCard Mikroformate

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 17 Kommentare

  1. Yevgen
    schrieb am 13.11.2012 um 19:21 Uhr:

    Danke sehr hilfreicher Artikel!

    Antworten
  2. Klaus
    schrieb am 19.09.2012 um 22:26 Uhr:

    uuund Jahre später führt mich Google noch immer hier hin. Danke für den Beitrag. Anstatt eine vcard nochmal als Download einzubinden, kann man diese auch automatisch aus dem Mikroformat generieren lassen. Siehe hier: http://www.philognosie.net/index.php/article/articleview/631/

    Antworten
  3. Websites für das iPhone erstellen und optimieren | kulturbanause blog
    schrieb am 31.07.2011 um 01:40 Uhr:

    […] vCard mittels Microformat “hCard” erstellen […]

    Antworten
  4. Firefox-Extention "Operator" zur Nutzung von Microformats | kulturbanause blog
    schrieb am 31.03.2011 um 16:40 Uhr:

    […] Artikel lesen » […]

    Antworten
  5. Websites tagged "hcard" on Postsaver
    schrieb am 29.07.2009 um 12:47 Uhr:

    […] – vCard mittels Microformat “hCard” erstellen auf Kulturbanause saved by ThePieNinja2009-07-26 – hcard saved by kiriko1232009-07-26 – Confluence 2.8 Release Notes […]

    Antworten
  6. Eva
    schrieb am 17.04.2009 um 12:19 Uhr:

    Ich finde diese Vcard super, nur werden deutsche Umlaute und Sonderzeichen wie zB: é nicht richtig dargestellt. Was kann man dagegen machen?

    LG, Eva

    Antworten
    • Jonas
      schrieb am 24.04.2009 um 18:58 Uhr:

      @ Eva: Ich habe lediglich eine Lösung für die „echten“ vCards, die du aus Outlook oder Mail exportieren kannst. Hier werden für deutsche Sonderzeichen unsichtbare Bits hinzugefügt die zu fehlerhaften Darstellungen führen können. Abhilfe schafft hier das umkodieren der Datei in UTF8, z.B. mit Notepad++.
      Über eine Info zu oben angesprochenem Problem wäre ich selbst sehr dankbar.

      Antworten
  7. Jonas
    schrieb am 07.11.2008 um 09:46 Uhr:

    @ Evelyn: Was du mit dem hier gezeigten Code erstellst, ist eine vCard als Mikroformat. Diese ermöglicht verbesserte Funktionalität in neuen Browsern oder auf Smartphones.
    Wenn du eine vCard als Download anbieten möchtest (die dann ins lokale Adressbuch übernommen werden kann) so musst du lediglich eine erstellen (Export-Funktion in Outlook oder Mail) und dann wie einen gewöhnlichen Download verlinken.
    Zu beachten ist jedoch, dass der Browser meist versucht die vCard zu öffnen anstatt sie herunterzuladen. Ich habe das Problem bisher immer mit einer „ForceDownload.php“ gelöst, die den Browser dazu zwingt die Datei zu speichern anstatt sie anzuzeigen.

    Antworten
  8. evelyn
    schrieb am 07.11.2008 um 00:03 Uhr:

    Hallöle,

    ich habe versucht eine vCard in eine Webseite zu integrieren mittels normalen Link, leider wird mir der Code nur angezeigt und nicht die Datei als Download angeboten.
    Woran könnte das liegen?
    Was mache ich falsch?

    MfG
    Evelyn

    Antworten
  9. Kulturbanause » Websites für das iPhone erstellen und optimieren
    schrieb am 24.09.2008 um 08:50 Uhr:

    […] vCard mittels Microformat “hCard” erstellen […]

    Antworten
  10. Jonas
    schrieb am 16.04.2008 um 12:12 Uhr:

    Soweit ich weiß, reicht es, wenn du alles mit einem DIV der Classe „vCard“ umschließt.

    Antworten
  11. Andre
    schrieb am 16.04.2008 um 10:54 Uhr:

    Hi Jonas!

    Mal ne kleine Frage:
    Du umschließt die vCard mit einem ist das zwingend erforderlich oder reichen die einzelnen Klassen aus?

    Grüße
    André

    Antworten
  12. Kulturbanause » Blog Archiv » XFN (XHTML Friends Network) Microformat
    schrieb am 15.04.2008 um 18:07 Uhr:

    […] hier wenn Ihr wissen wollt wie Ihr eine vCard mittels Microformat “hCard” erstellen […]

    Antworten
  13. Jonas
    schrieb am 13.04.2008 um 11:32 Uhr:

    @ Moritz:
    Du kannst natürlich die vCard auf visibility:hidden; setzen. Dann sollte das Microformat für den User nutzbar sein, ohne, dass die Adresse optisch auf der Seite erscheinen muss.
    Ich kann allerdings grad nicht abschätzen wie Google & Co. dann dieses Element behandeln. Da hat sich doch vor kurzem was getan was die display:none / visibility:hidden – Politik angeht oder?

    Edit: Ich habs grad mal ausprobiert. Es funktioniert nur mit visibility:hidden; wenn display:none; verwendet wird kann das Microformat nicht genutzt werden. Ich hab es in meiner Sidebar eingebaut. Rechts unter „More Infos“. Somit ist mein Kontakt nun auf allen Seiten zu nutzen.

    Antworten
  14. Moritz
    schrieb am 13.04.2008 um 11:21 Uhr:

    Hallo,
    kann ich die vcard auch einbinden, ohne die eigentlichen Informationen auszugeben? Quasi als Anhängsel, wie bei RSS-Feeds?
    lg

    Antworten
  15. holger
    schrieb am 04.04.2008 um 08:01 Uhr:

    vCard – immer mal wieder gehört und gesehen. nach der erklärung und installation des plug-in für ff der aha-effekt: welcher webdesigner, der unternehmenswebseiten betreut, könnte jetzt noch darauf verzichten.
    danke für den sehr hilfreichen (und leider notwendigen ) anschubser …

    Antworten
  16. Kulturbanause » Blog Archiv » Firefox-Extention “Operator” zur Nutzung von Microformats
    schrieb am 03.04.2008 um 19:44 Uhr:

    […] Artikel lesen » […]

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →