hcard-examples-in-wild-reviewed

hCard Examples in the wild, reviewed

This page is an informative section of the hCard specification.

The following sites have published hCards, and thus are a great place to start for anyone looking for examples "in the wild" to try parsing, indexing, organizing etc. At the tine of review, these hCards were judged to have been marked-up correctly.

If people or organizations on your site are marked up with hCard (even just your own contact information), feel free to add it to hcard-examples-in-wild-pending

Want to get started with writing an hCard? Use the hCard creator to write up some contact information and publish it, or follow the hCard authoring tips to add hCard markup to your current contact page.

Buttons

You can use these buttons on pages with hCards. See buttons#hCard for any recent additions.

• (mirror: )
• 
• 
• CSS-powered button, as evidenced at microformat badges @ re-run

Reviewed Examples

Reviewed New Examples which are fine can be moved here to indicate that they've been reviewed. Or take the next step and note which type of example in the wild each of these are, and then please move them to the "Grouped Examples" sectionl

• OnYoMo uses hCard markup for all addresses listed in their local search results.
• Greg Bays, the author of vCardPlus! has made his sites vCard display page hCard complaint.
• Dr. Jon Rosenblitt uses hCard icon with Add to Address Book link.
• New Frontier Web Solutions uses hCard on their front page along with a link pointing to Brian Suda's X2V.
• shifting pixel photoblog has published an hCard.
• Aiden Kenny hasn't published his hCard yet, but he has published his hCard icon:
• Andy Hume uses hCards to mark-up the names and URLs of commentors on his blog, e.g. his blog post on "Using hCards in your blog".
• BidClix's Contact BidClix page has it's contact info marked up with an hCard.
• Brian Suda has managed to embed a photo in his hCard through the data URI scheme by converting the image to BASE64 code. View the Source to see how this is accomplished. The X2V link will extract the image and encode it for a vCard which will be displayed in some address book applications.
  • Inspired by this I thought to try the same for SVG at Barefoot ...
  • <img class="photo" style="display:none;" src="data:image/svg+xml;text,<?xml version='1.0' encoding='UTF-8' standalone='no'?><svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.0' width='50' height='80' id='svg3957'><defs id='defs3959' /><path d='M 28.91433,...32.192802 z' style='fill:#cc4d00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.625;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1' id='path9551' /></svg>" alt="Barefoot">
  • Does it work?? Well it parses OK. Some automated tools replace the < with %3C (etc., e.g. Brian Suda's vCard form). Unfortunately Kontact (KDE contacts tool) doesn't handle SVG as a vCard photo or logo format - I don't know if this is a standard. It seems it could work and maybe even does somewhere. Maybe the text field needs to be Base64 encoded? ... see pbhj's slashdot journal for a bit more on this.
• Cinema Treasures uses hCard to markup venue information for 10,000+ movie theaters.
• Dan Connolly's index of events and talks has hCards for many of the people he has met at those events. In Mar 2006, he moved a bunch of hotel contact info from his PDA to this page; it's now up to 32 hCards.
• Don Crowley has published his hCard as well as a nifty hCard button:
• Douglas W. Clifton added all types of contact information
• Eventful publishes all of its venue information pages with embedded hCards.
• Iowa Military Veterans Band Contacts - 95 hCards marked up by Scott Reynen
• Jack L. Wolfgang II has converted the addresses in his resume to hCards.
• Mathieu Drouet and Annie Leger both have hCards
• Oliver Brown has published his hCard.
• Paradigm Productions published a vCard as a ul (marked up by Peter Jacobson)
• Patrick H. Lauke has marked up his contact info with hCard.
• Paul Schreiber has published his hCard on [http://paulschreiber.com/about/?contact his about page.
• Paul Schreiber's Sunnyvale House Concerts site publishes hCards for upcoming artists, as well as an hCard for the page itself. In addition the Past Shows page contains hCards for all past artists.
• Paul Smith has created an hCard page which is Human Readable, and a link to X2V passing the same hCard page to generate a vCard.
• Phil Windley has published his hCard.
• Piercarlo Slavazza has published an hCard.
• Rob Mientjes has published his hCard on his about page.
• Robert Bachmann has published his hCard and a button.
• Scott Reynen has published his hCard on [http://www.randomchaos.com/document.php?source=scott_reynen his profile page.
• StackFrame, LLC has published employee and general contact information as hCards.
• Steven Ametjan has published his hCard on his about page.
• Syndicate - Speaker List as a set of hCards
• TagCamp contact list
• The Brothers McDowell have hCards at their Contact page.
• Twinsparc put an hCard in the header and footer of all their pages.
• Web 2.0 Conference speakers page marked up with hCard
• Web Essentials 05 marked up all their presenters with hCard.
• The University of Guelph includes hCard info in its directory.
• The Australian Child Care Index has over 3000 entries listing child care services across Australia - and every single one is marked up with an hCard!
• CADforless, Inc. we listed our partners using hCard
• Avon - publishes all 40,000+ Avon representatives' contact info with hCard.
• Flock About page supports hCard microformat.
  • by Flock
• Iowa Military Veterans Band
• Nature homepage, uses XOXO.
  • by Nature Publishing Group
• Sunnyvale House Concerts supports hCard and hCalendar.
• University of Bath Person Finder supports hCard, e.g. see Mrs A Smith page.
• Monster Prague Openings supports hCard, e.g. home page, contact list to come.

Grouped Examples

This section organizes examples into several rough categories as follows. If an example fits in more than one cateogry, use the *last* matching category in this list that matches the specific hCard example(s) in the wild that you are trying to categorize.

1. Individuals - one card per person, perhaps sort alphabetically by "family-name". People with their own hCards (typically) on their own site.
2. Organizations - one card per organization, alphabetical by "fn". Organizations with their own hCard(s) (typically) on their own site.
3. Institutions - which list more than one person, with a count estimating the # of hCards, e.g. 40k for Avon. Also indicate complexity of information supplied, eg. just name+number vs. complete details. Alphabetically sorted by "org" with perhaps a few individuals listed in a single sub-bullet, comma delimited, sorted by "family-name".
4. Group Blogs - blogs with multiple authors marked up with hCard
5. Online Profiles - which host profiles for more than one person, with a count estimating the # of hCards, e.g. 10m+ for Flickr.com. Alphabetically sorted by "fn" with perhaps a few individuals listed in a single sub-bullet, comma delimited, sorted by "family-name".
6. Online Venues - which provide listings for businesses or organizations, with a count estimating the # of venues, e.g. ~10k for Upcoming.org. Alphabetically sorted by service/site name, with perhaps a few specific venues listed in a single sub-bullet, comma delimited, sorted by "fn".
7. Speakers Listings - event sites' speakers pages where the speakers are marked up with hCard. Sort by date, sub-grouped by year. Most recent first. Perhaps a few individuals listed in a single sub-bullet each event, comma delimited, sorted by "family-name".

In addition there is a separate "UTF8 Examples" section that can be used to put another link to any hCard examples in the wild which exercise various non-ASCII7 / non-english characters for various property values.

As each section itself become quite large (we might be there already, once we sort through the above "Reviewed Examples"), it will probably be moved to a separate page, leaving its heading here in place, and replacing its contents here with a link to the separate page and perhaps a stats summary.

Individuals

• David Baron's home page is marked up with hCard.
• Tantek Çelik's home page includes an inline author hCard at the bottom of the page.
• Chris Wilson has an hCard for himself on his about page.
• Paul Roub has an hCard for himself on his blog's home page.
• Chris Messina has a page set aside with his contact details.
• ...

Organizations

• Technorati (3)
  • about, press, and contact pages are marked up with hCard and have "Add to Address Book" links that use the Technorati Contacts Feed service.
• Technorati Japan (1)
  • contact page is marked up with hCard.

Institutions

• O'Reilly's Conferences Team page has hCards for their team (~14) with a link to "Download the below contact info in vcf format" that uses the Technorati contacts feed service to convert the hCards into vCards.
  • suboptimal: The "org" shouldn't be hidden with "display:none". Instead, use the include-pattern to include the "org" from text elsewhere on the page (to avoid duplicating the text).
• Technorati's Staff page has hCards for its employees (~31)
  • E.g. Matthew Levine, Ryan King, etc.

with some problems:

• The IBM Employee Directory returns hCards in its query results
  • E.g. search for Michael Kaply,
  • but with some problems:
    • invalid: no "fn" (would be addressed by the implied fn from n proposal)
    • suboptimal: adr has no children and thus is not providing any data (may be addressed by the implied adr subproperties proposal)
• ...

Group Blogs

with some problems:

• The IBM Shortcuts Podcast has authors marked up with hCard but has some problems:
  • hidden: The root hCard element as well as every property contained therein is made invisible through a style attribute containing "position:absolute; visibility:hidden".

Online Profiles

• See hcard-supporting-profiles.

Online Venues

• Sydney Directory Wiki supports hCard and geographical coordinates for locations, e.g. the Sydney Opera House.

Speakers Listings

2007

to-do: check 2007 presentations as they likely contain links to conferences that marked up their speakers page(s) with hCard.

• 09: d.Construct 2007 speakers

2006

to-do: check 2006 presentations as they likely contain links to conferences that marked up their speakers page(s) with hCard.

• 09: d.Construct 2006 speakers

2005

to-do: check 2005 presentations as they likely contain links to conferences that marked up their speakers page(s) with hCard.

• 12: Syndicate - Speaker List (hCarded version hosted at tantek.com)
• 10: Web 2.0 Conference 2005 -- Speakers (hCarded version hosted at tantek.com)
• 09: Web Essentials 2005 - The Presenters http://we05.com/presenters.cfm (appears to have stopped working as of 2007-12-18, perhaps earlier) mirror on tantek.com: Web Essentials 2005 - The Presenters. Web Essentials 2005 (we05) was the first conference to adopt hCard and hCalendar on their website.

UTF8 Examples

These examples all contain one or more characters in UTF8 that are outside the ASCII7 range and make for excellent test cases to make sure you are handling UTF8 properly throughout your hCard parsing and transforming. And especially if you are generating vCards, these test cases will help you make sure you are generating UTF8 vCards in such a way that can be recognized by UTF8 supporting vCard applications. Sorted roughly alphabetically (per Unicode).

• Dmitry Dzhus embedded his UTF8 encoded hCard with Russian characters in «Author» page of his website.
• Tantek's Thoughts encodes Çelik as inline UTF8.
• Technorati Japan contact information encodes Japanese as inline UTF8.
• Vadym Hetman (Wikipedia-UK (Ukranian))

nickname only

These UTF8 examples only have UTF8 for the "nickname" property and are thus are a bit easier for testing than the previous examples.

• Various Wikipedia-EN articles, e.g. the "nickname" in: Noyabrsk (Russian), Thessaloniki (Greek), Kyoto (Japanese) and Beijing (Chinese)

Non-HTML examples

• Danny Ayers' SVG hCard demo

Related Pages

• hCard
• hCard cheatsheet - hCard properties
• hCard creator (feedback) - create your own hCard.
• hCard authoring - learn how to add hCard markup to your existing contact info.
• hCard examples - example usage of various classes within hCard.
• hCard examples in the wild - an on-going list of websites which use hCards.
• hcard-supporting-user-profiles - sites with user profiles marked up with hCard - a very common example.
• hCard FAQ - if you have any questions about hCard, check here.
• hCard implementations - websites or tools which either generate or parse hCards.
• hCard parsing - normative details of how to parse hCards.
• hCards and pages - semantic distinctions between different hCards on a page, and how to identify each
• hcard-user-interface - techniques and issues surrounding user-interfaces to author, publish, and display hCards.
• hCard profile - the XMDP profile for hCard
• hCard singular properties - an explanation of the list of singular properties in hCard.
• hCard tests - a wiki page with actual embedded hCards to try parsing.
• hCard advocacy - encourage others to use hCard
• hCard "to do" - jobs to do

The hCard specification is a work in progress. As additional aspects are discussed, understood, and written, they will be added. These thoughts, issues, and questions are kept in separate pages.

• hCard brainstorming - brainstorms and other explorations relating to hCard.
  • hcard-parsing-brainstorming - brainstorming specific to parsing of hCard
  • geo brainstorming
• hCard feedback - general feedback (as opposed to specific issues).
• hCard issues - specific issues with the specification.
• vCard errata - corrections to the vCard specification, which underlies hCard.
• vCard suggestions - suggested improvements to the vCard specification.