HTML vCard mittels Mikroformat erstellen
In diesem Beitrag erfahrt ihr wie ihr mit HTML eine vCard mittels Mikroformat erstellen könnt.
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="https://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="https://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
vcard
umschließt die gesamte vCard.adr
umschließt alle Daten die zur Adresse gehören.title
zeichnet einen Titel (Dr., Prof., etc) aus.fn
zeichnet Vor- und Nachnamen aus.org
zeichnet Firma oder Organisation aus.street-address
zeichnet die Straße aus.postal-code
zeichnet die Postleitzahl aus.locality
zeichnet die Stadt aus.country-name
zeichnet das Land aus.tel
zeichnet eine Telefonnummer aus.fax
zeichnet eine Faxnummer aus.email
zeichnet eine E-Mail-Adresse aus.url
zeichnet eine URL (Internetadresse) aus.bday
zeichnet ein Geburtsdatum aus.
Danke sehr hilfreicher Artikel!
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/
[…] vCard mittels Microformat “hCard” erstellen […]
[…] Artikel lesen » […]
[…] – vCard mittels Microformat “hCard” erstellen auf Kulturbanause saved by ThePieNinja2009-07-26 – hcard saved by kiriko1232009-07-26 – Confluence 2.8 Release Notes […]
Ich finde diese Vcard super, nur werden deutsche Umlaute und Sonderzeichen wie zB: é nicht richtig dargestellt. Was kann man dagegen machen?
LG, Eva
@ 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.
@ 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.
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
[…] vCard mittels Microformat “hCard” erstellen […]
Soweit ich weiß, reicht es, wenn du alles mit einem DIV der Classe „vCard“ umschließt.
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é
[…] hier wenn Ihr wissen wollt wie Ihr eine vCard mittels Microformat “hCard” erstellen […]
@ 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.
Hallo,
kann ich die vcard auch einbinden, ohne die eigentlichen Informationen auszugeben? Quasi als Anhängsel, wie bei RSS-Feeds?
lg
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 …
[…] Artikel lesen » […]