hcard-examples-in-wild: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
<entry-title>hCard Examples in the wild</entry-title>
<h1>hCard Examples in the wild</h1>
<div style="height:7.5em;text-align:center;font-weight:bold;font-size:larger">
<div style="height:7.5em;text-align:center;font-weight:bold;font-size:larger">
<span style="padding:3em 0;float:left;width:33%">[[hcard-examples-in-wild#examples_by_category|Want hCards]]</span><span style="padding:3em 0;float:left;width:33%">[[hcard-examples-in-wild#new_and_uncategorized_examples|Have hCards]]</span>
<span style="padding:3em 0;float:left;width:33%">[[hcard-examples-in-wild#examples_by_category|Want hCards]]</span><span style="padding:3em 0;float:left;width:33%">[[hcard-examples-in-wild#new_and_uncategorized_examples|Have hCards]]</span>
</div>
</div>
{{TOC-right}}


This page is an '''informative''' section of the [[hcard|hCard specification]].
This page is an '''informative''' section of the [[hcard|hCard specification]].
Line 14: Line 16:
http://www.davidjanes.com/images/mf_hcard.png <!-- was originally http://www.crowley.nl/images/hcard.png --> <!-- http://rbach.priv.at/2006/buttons/hcard.png --> http://www.boogdesign.com/images/buttons/microformat_hcard.png
http://www.davidjanes.com/images/mf_hcard.png <!-- was originally http://www.crowley.nl/images/hcard.png --> <!-- http://rbach.priv.at/2006/buttons/hcard.png --> http://www.boogdesign.com/images/buttons/microformat_hcard.png


* [http://www.canisphouse.com Canisp House Bed and Breakfast]Establishment uses hcard to mark up business address. Validates with Google Rich Snippets.
* [http://eckstein.id.au Gary Eckstein] uses an hCard for [http://eckstein.id.au contact information].
* [http://www.jondon.com/stores/index.htm Local Stores Locations Page], the store details on store pages are Hcard.
* [http://www.sucklings.co.nz/contact-us Contact page of Sucklings Shoes Store], the store details are an Hcard.
* [http://www.a3architekten.com/ Contact details of a3architekten]. A combination of two hCards looking like one.
* [http://www.sigmacom.nl/ Corporate website of Sigmacom]. hCards were implemented in the footer
* [http://www.fpc.wa.gov.au Forest Products Commission] hCards to markup addresses & contact info for:
** all its offices and media contacts: [http://www.fpc.wa.gov.au/content_migration/about_us/contacting_us.aspx office locations]
** search results for suppliers of timber within Western Australia: [http://www.fpc.wa.gov.au/BuyTimber/Search?Species=&Region= find a timber supplier]
* [http://www.hirners.com Hirners Hotel Guide] uses hCards to markup addresses and contact info of every property, including geo coordinates. Example: [http://www.hirners.com/properties/4-atlanta-hotel-in-vienna-austria Hotel Atlanta in Vienna, Austria]
* [http://www.cartuse-imprimante.ro/ Cartuse Imprimante], printers and printer cartridges supplier, uses an hCard on home page and contact page of the website.
* [http://www.seminee-fedo.ro/ Fedo], interior fireplaces design company uses an hCard on every page of the website.
* [http://www.eurodata.com.ro/ Eurodata Serv], IT consulting and service company uses an hCard on every page of the website.
* [http://www.chipwreck.de/blog/contact/ Mario Fischer] uses a hCard with his contact information
* [http://joebergantine.com/contact Joe Bergantine] has marked up his contact information with hCard and XFN
* [http://www.nonleaguegrounds.com nonleaguegrounds.com], a database of English non-league football stadiums, uses hCards on every specific club detail page.  Example: [http://www.nonleaguegrounds.com/gb/london/afc-wimbledon AFC Wimbledon]
* [http://www.simourix.nl/ Simourix Hosting] uses an hCard for contact information on the website.
* [http://www.aquastop-vochtwering.nl/ Aquastop vochtwering] uses an hCard on every page of the website.
* [http://www.kennysaunders.com/ Kenny Saunders] uses an hCard on for contact information on this business card website.
* [http://annuaire.leperon.fr/ L’Annuaire du Cheval] is a French directory of equestrian professionals. We have just added hCards to all the client pages. Sample one here [http://annuaire.leperon.fr/client/0b1s/tarder-camille-et-frederic Tarder]. We also added an 'add to your address book' button but had to take it out again as some Windows machines choked on the accents, not recognising the UTF-8.
*[http://www.cheapholidays.com/ Cheap Holidays] uses an hCard on each page footer.
*[http://www.flightline.co.uk/ Flightline] uses an hCard on each page footer.
*[http://www.affordablestorage.net.nz/contactus.html Affordable Storage] Uses hCard for contact information.
* [http://www.norfolkblackhistorymonth.org.uk/contact.html Norfolk Black History Month] - Uses hCard on the Contact page and throughout the site, providing contact information for event locations, organisers and partner organisations.
* [http://www.veganusofa.com/ VeganUSofA] - Uses hCard for organization and business address. Example: [http://www.veganusofa.com/index.php?listing=4 The All Vegan Store].
*[http://adrianindo.blogspot.com ADRIAN'S BLOG] have included hCard to introduce myself more closely with the visitors of my blog. the hCard has been listed as a name, blog url and organizations. This hCard you can see on the lower right sidebar of my blog layout.
* [http://www.canadianpokerexpo.com The Canadian Poker Expo (Toronto)], a Poker Lifestyle Expo focusing specifically on the Toronto market, is using hCard for [http://www.canadianpokerexpo.com/Contact-Us/Contact-Form their contact page] as part of their efforts to increase the site's local relavance.
* [http://www.semineeas.ro Seminee As], a Romanian fireplace manufacturer, uses hCard for [http://www.semineeas.ro/contact/ contact info] with optional vCard download.
*[http://www.gastrohep.com/aboutus.asp GastroHep.com] About Us page uses an hCard for the contact address.
*[http://leemannphotography.ca/?p=contact Lee Mann Photography] Uses an hCard on the main Contact page as well as the blog.Ideally it will soon be on the footer of every single page.
*[http://www.kimburgess.info Kim Burgess] Minimalist info website with hCard markup positioned throughout.
*[http://www.plumbset.co.uk/ContactUs.htm PlumbSet UK Ltd] Uses hCard for the contact address, including multiple street-address entries.
*[http://www.manuhealth.com/products/manuka-soap-75gm Manuhealth Natural Remedies] Uses hCard for the return address on product pages.
*[http://www.farmaciasarria.com/esp/mapa.php Farmàcia Sarrià - Farmàcia Finestres Capdevila] uses an hCard for his contact information.
*[http://www.naturesbestshot.com Nature's Best Shot Photography] - uses an hcard on the contact page
*[http://www.noomii.com/life-coach Noomii.com Coach Directory] - each professional life coach in the directory is an hcard
*[http://www.ethical-junction.org/member/org-2012.html Ethical Junction CIC - Profile page] We use hCard for every organisation on their profile page
*[http://www.bowtietv.com Bow Tie Television] Uses hCard for contact information on every page and in the contacts section.
*[http://www.tauruslogistics.co.nz/about/contact Taurus Logistics] Uses hCard for contact information.
*[http://www.professdiamond.com/ professdiamond] encodes Thai as UTF8 in an inline hCard at the bottom of every page.
*[http://avonvalleylocalguide.iinet.net.au/ Avon Valley Local Guide] uses hCard for contact information of advertisers.
*[http://www.arizonafirstresponse.com/ Arizona First Response] uses an hCard on each page footer.
*[http://dillingham.me.uk/ Iain Dillingham] uses an hCard on each page footer, and has a styled example (with the microformats logo) on his [http://dillingham.me.uk/contact.html contact page].
*[http://www.pixeflips.com/ Pixelflips Web &amp; Interface Design] hCard is used in the footer of all pages for easy access to contact information.
*[http://www.herminesperr.at/ Hermine Sperr, Qualified Practitionier of the Grinberg Method&reg; in Wien/Austria] A hcard is used for contact information on every page on her website.
* [http://www.barnard.edu/ Barnard College] - College faculty profiles use hCard for contact info. Example: [http://www.barnard.edu/faculty/profiles/mehrling_p.html P. Mehrling's profile].
* [http://www.ivycat.com/ IvyCat Website Services] - Web design & hosting firm uses hCard for business contact info. Example: [http://www.ivycat.com/contact/ Contact Us].
* [http://www.modeltrainswithlarry.com/ ModelTrainsWithLarry] - Uses hCard for organization and business address. Example: [http://www.modeltrainswithlarry.com/index.php?listing=502 Choo Choo Barn].
* [http://www.gardeningwithlarry.com/ GardeningWithLarry] - Uses hCard for organization and business address. Example: [http://www.gardeningwithlarry.com/index.php?listing=2681 United States Botanic Garden].
* [http://abyrvalg.com/ Abyrvalg] - russian city community. Uses hCard to display local businesses address. Example: [http://moscow.abyrvalg.com/biz/faq-cafe FAQ cafe in Moscow].
* [http://www.jdclark.org/v1 Jordan Clark], from the Swansea area of Wales in the United Kingdom, uses [http://www.jdclark.org/card hcard for contact information].
* [http://whichtwitterapp.com/ WhichTwitterApp] provides [http://whichtwitterapp.com/reviews/iphone/tweetie reviews of twitter apps] using hCard, hReview, rel-tag and rel-home.
* [http://www.robinleysen.be/Robin.html Robin Leysen] has a hCard on a separate page. Tried to be as complete as possible. hCard validated with Optimus.
* [http://www.jay-photographics.de/ Jay Photographics] Photographer from Stuttgart, Germany. The hcard format is used on all pages for contact information.
* [http://www.uniquesite.co.uk/ UNIQUEsite] Website designer based in Brighton, UK. Uses the hcard format for contact information.
* [http://www.slideshare.net/ SlideShare] uses hcard to identify its users. see [http://hcard.geekhood.net/?url=http%3A%2F%2Fwww.slideshare.net%2Fkcmani#result Validated hcard] and [http://www.slideshare.net/kcmani Mani's SlideShare profile]
* [http://chrisruppel.com Chris Ruppel], a web developer in Dallas, TX, uses an hcard for contact information site-wide (as well as XFN)
* [http://greenspiritgardeners.com/ Green Spirit Gardeners] uses the hCard format throughout the site, including on the portfolio page for [http://greenspiritgardeners.com/portfolio/ commercial clients] and the [http://greenspiritgardeners.com/contact/ contact] page.
* [http://www.dorettebos.nl/ Dorette Bos Coaching &amp; Training] uses hcard microformat on the [http://www.dorettebos.nl/contact.php contactpage]
* [http://volunteers.st/ Steffi &amp; the volunteers] is an Austrian band and uses hcards for [http://volunteers.st/ band-contact in the footer] and on the page of the [http://volunteers.st/crew.html crew]
* [http://www.textundkonzept.at Bernhard Ulrich] an Austrian copywriter uses the hcard format [http://www.textundkonzept.at on all pages of his website] for his contact information
* [http://www.powerbrand.at/contact.html POWERBRAND] a brand name development agency uses a [http://www.powerbrand.at/contact.html hcard for contact information]
*[http://www.koerperarbeit.net/ Anita Braunsberger, Qualified Practitionier of the Grinberg Method&reg; in Linz/Austria] A hcard is used for contact information on her website.
*[http://www.carpetscleansandiego.com Durbin's Carpet Care] displays a vCard for contact information and relevancy
*[http://www.nationalrural.org/organisation.aspx?id=96a3fc04-5c03-4d31-bb8a-2c55cc29aed4 National Rural Knowledge Exchange] uses an hCard with geo tags when displaying an organisations information
* [http://www.tinstar.co.uk/about-tinstar-design/contact-tinstar-design.html Tinstar Design] uses an hCard for company contact information.
* [http://www.interdixit.com/esp/contacto.php Interdixit] uses an hCard for his contact information.
* [http://www.sisnova.com/ Sisnova] uses hCard for his location pages.
* [http://www.fenoyarquitectura.com/esp/situacion.php Eduard Fenoy i Associats] uses an hCard.
* [http://www.deltronic.com/ Deltronic Corporation] of Santa Ana, CA has posted an hCard with geo tags on its [http://www.deltronic.com/contact.shtml Contact] page.  Background image of a contact card reinforces content.  For those without enabling browser extensions, both hCard "logo" and text link make vCard available via external parser.
* [http://transitionsmft.org/ Transitions Marriage and Family Therapy] has an hCard with geo tags in the footer of each page. There is also an hCard for each counselor on the [http://transitionsmft.org/about.php About] and [http://transitionsmft.org/contact.php Contact]pages.
* [http://ball.in.th/ ball.in.th] uses hCard to display all usernames.
* Italian business directory and community portal [http://www.cylex.it/ cylex.it] implements hCard for companies’ contact information with geo tags. Example: [http://www.cylex.it/azienda/computerland-10559319.html company profile]
* [http://jermy.musicremedy.com/ Jermy Leeuwis MSc] uses an hCard for his contact information.
* [http://idoinfotech.com Gary Eckstein] uses an hCard for [http://idoinfotech.com/contact contact information].
* [http://www.drsuarez.net/  Dr. Suarez]  uses hCard on his  [http://www.drsuarez.net/cvitae.html resume page]
* [http://www.drsuarez.net/  Dr. Suarez]  uses hCard on his  [http://www.drsuarez.net/cvitae.html resume page]
* [http://sourceforge.net/projects/adx/ addressbook.xml] provides hCard support:  [http://elektronengehirn.net/addressbook/addressbook.html adx live example]
* [http://sourceforge.net/projects/adx/ addressbook.xml] provides hCard support:  [http://adx.elektronengehirn.net/addressbook.html adx live demo]
* [http://aplawrence.com APlawrence.com] is using hCard for its [http://aplawrence.com/Links/consultants.html Unix and Linux Consultants Page]
* [http://aplawrence.com APlawrence.com] is using hCard for its [http://aplawrence.com/Links/consultants.html Unix and Linux Consultants Page]
* [http://www.afonsoduarte.com Afonso Duarte's Portfolio]. Uses an hCard for the contact information.
* [http://www.afonsoduarte.com Afonso Duarte's Portfolio]. Uses an hCard for the contact information.
Line 105: Line 34:
* [http://www.squaremeal.co.uk/ Square Meal Restaurant Guide] uses hCards and hReviews for all restaurant listings and [http://www.squaremeal.co.uk/review/Ristorante_Semplice/1596 visitor reviews].
* [http://www.squaremeal.co.uk/ Square Meal Restaurant Guide] uses hCards and hReviews for all restaurant listings and [http://www.squaremeal.co.uk/review/Ristorante_Semplice/1596 visitor reviews].
* [http://www.vegan-nottingham.co.uk/ Vegan Nottingham Guide] uses hcards, including geo information, for each entry in the guide.
* [http://www.vegan-nottingham.co.uk/ Vegan Nottingham Guide] uses hcards, including geo information, for each entry in the guide.
* [http://www.cgtworld.com/ Cybernation Gamers Tournament] uses hCard in all users profiles like [http://www.cgtworld.com/profile/id-1/ Moonlext's Profile] and in the [http://www.cgtworld.com/about/press.html press page of CGT].
* [http://www.cgtworld.com/ Cybernation Gamers Tournament] uses hCard in all users profiles like [http://www.cgtworld.com/user/profile-id-1.html Moonlext's Profile] and in the [http://www.cgtworld.com/about/press.html press page of CGT].
* [http://fcctlh.org First Christian Church of Tallahassee] Uses hCard in the footer of all pages.
* [http://fcctlh.org First Christian Church of Tallahassee] Uses hCard in the footer of all pages.
* [http://www.pseps.com/vc-people/a.cfm The PSEPS Venture Capital and Private Equity Directory] Venture capital and private equity directory using microformats (both for professionals and firms).
* [http://www.pseps.com/vc-people/a.cfm The PSEPS Venture Capital and Private Equity Directory] Venture capital and private equity directory using microformats (both for professionals and firms).
Line 171: Line 100:
* [http://autopendium.com Autopendium] has resources (e.g. suppliers, clubs) marked up with throughout the site, e.g. [http://autopendium.com/clubs/8-Volvo-Enthusiasts-Club]
* [http://autopendium.com Autopendium] has resources (e.g. suppliers, clubs) marked up with throughout the site, e.g. [http://autopendium.com/clubs/8-Volvo-Enthusiasts-Club]
* [http://display-block.co.uk Display-Block] uses hCard contacts for People and Companies on my personal Blog.
* [http://display-block.co.uk Display-Block] uses hCard contacts for People and Companies on my personal Blog.
* [http://bergantinedesign.us Bergantine Design] has contact information marked up with hCard throughout the site
* [http://www.codesignville.com/ Codesignville] uses hCard for his contact details.
* [http://www.codesignville.com/ Codesignville] uses hCard for his contact details.
* [http://fan-expo.com/Contactez-nous,2  Forum des Acteurs du Numérique] (a French trade show and exhibition dedicated to content management) uses hCard for contact information (exhibition staff and exhibitors). It also makes use of hCalendar as well as rel-tag when relevant.
* [http://fan-expo.com/Contactez-nous,2  Forum des Acteurs du Numérique] (a French trade show and exhibition dedicated to content management) uses hCard for contact information (exhibition staff and exhibitors). It also makes use of hCalendar as well as rel-tag when relevant.
Line 287: Line 217:
* [http://redmonk.com/contact/ RedMonk Contact page] uses hCard for RedMonk firm as well as each analysts.
* [http://redmonk.com/contact/ RedMonk Contact page] uses hCard for RedMonk firm as well as each analysts.
* [http://source.ibegin.com/ iBegin Source] uses hCard to identify business information for all 10.5+ million businesses listed.
* [http://source.ibegin.com/ iBegin Source] uses hCard to identify business information for all 10.5+ million businesses listed.
* [http://www.lounews.com/ The Louisville News Company] uses hCard for site-wide contact information for the company and for the site developer.
* [http://cloudislands.com/contact.php Cloud Islands] uses hCard for our Contact Info.
* [http://cloudislands.com/contact.php Cloud Islands] uses hCard for our Contact Info.
* [http://www.international.unt.edu UNT International] uses hCard to mark up contact information sitewide (see esp. [http://www.international.unt.edu/offices/ieli/people/instructors/profiles the IELI instructor profile listing])
* [http://www.international.unt.edu UNT International] uses hCard to mark up contact information sitewide (see esp. [http://www.international.unt.edu/offices/ieli/people/instructors/profiles the IELI instructor profile listing])
Line 556: Line 487:
* [http://twinsparc.com/ Twinsparc] put an hCard in the header and footer of all their pages.
* [http://twinsparc.com/ Twinsparc] put an hCard in the header and footer of all their pages.
* [http://tantek.com/microformats/2005/web2/speakers.html Web 2.0 Conference speakers page marked up with hCard]
* [http://tantek.com/microformats/2005/web2/speakers.html Web 2.0 Conference speakers page marked up with hCard]
* [http://we05.com/ Web Essentials 05] marked up all their [http://we05.com/presenters.cfm presenters with hCard].
* [http://www.uoguelph.ca/directory/ The University of Guelph] includes hCard info in its directory.
* [http://www.uoguelph.ca/directory/ The University of Guelph] includes hCard info in its directory.
* [http://www.echildcare.com.au/ 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!
* [http://www.echildcare.com.au/ 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!
Line 569: Line 501:
* [http://www.monster-prague.cz/ Monster Prague Openings] supports hCard, e.g. home page, contact list to come.
* [http://www.monster-prague.cz/ Monster Prague Openings] supports hCard, e.g. home page, contact list to come.
* [http://www.vogelelaw.com/contact.html Colette Vogele] has an hCard on her contact page with many types of name and contact information. (Marked up by [http://www.talkingtiger.net Naomi Raine]).
* [http://www.vogelelaw.com/contact.html Colette Vogele] has an hCard on her contact page with many types of name and contact information. (Marked up by [http://www.talkingtiger.net Naomi Raine]).
* [http://www.fixya.com/repair/cars/us/ca/san_francisco FixYa] (the troubleshooting site) has an hCard (vCard) in the repair directory displaying information about all kinds service providers.
* [http://www.alive77.cn/ z.Yleo77] it's my blog, from now on,supports hCard, eg: article pages..
* [http://www.wfl-networks.co.uk/ WFL-Networks Computer Repair in Aylesbury] a localised IT Support company in Buckinghamshire, UK supporting hCard on its contact pages.


== examples by category ==
== examples by category ==
Line 586: Line 515:
# '''[[hcard-examples-in-wild#Authors|Authors]]''' - pages about some other thing, such as books, perhaps reviews etc., which have marked up their authors with hCard
# '''[[hcard-examples-in-wild#Authors|Authors]]''' - pages about some other thing, such as books, perhaps reviews etc., which have marked up their authors with hCard
# '''[[hcard-examples-in-wild#Search_Results|Search Results]]''' - results pages from search engines (either generic or for people/organizations) that return people marked up with hCards.
# '''[[hcard-examples-in-wild#Search_Results|Search Results]]''' - results pages from search engines (either generic or for people/organizations) that return people marked up with hCards.
# '''[[hcard-examples-in-wild#Listing_Contact|Listing Contact]]''' - contact information for a listing like a job posting, for sale offering, etc.


In addition there is a separate "[[hcard-examples-in-wild#UTF8_Examples|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.
In addition there is a separate "[[hcard-examples-in-wild#UTF8_Examples|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.
Line 593: Line 521:


=== Individuals ===
=== Individuals ===
Groupings alphabetically by "family-name".
Sort alphabetically by "family-name".
 
Nicely styled:
* [http://www.jaredhanson.net/ Jared Hanson]'s home page has a beautiful hCard with numerous ways of contacting him, and live updating of his online status on various messaging networks (uses javascript).
* [http://rogieking.com/#contact Rogie King]'s contact info is marked up with hCard and very nicely styled.
* [http://timvandamme.com/ Tim Van Damme]'s home page is a beautiful hCard.
** needs a few minor fixes: http://tr.im/hctvd (links to hCard validator results)
 
Simple web pages:
* [http://dbaron.org/ David Baron]'s home page is marked up with hCard.
* [http://dbaron.org/ David Baron]'s home page is marked up with hCard.
* [http://abernier.name Antoine Bernier]'s UID hcard:
* [http://ajbrown.org/ A.J. Brown]'s home page includes a hidden hCard at the bottom of the page.
** Dynamic VCF download link (through [http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri= hcard parser])
* [http://tantek.com/ Tantek Çelik]'s home page includes an inline author hCard at the bottom of the page.
** Dynamic QRcode (through [http://microform.at/hcard2qrcode/ hcard2qrcode])
** Dynamic avatar (through [http://www.gravatar.com/ Gravatar])
** [http://wiki2008.openid.net/Delegation openID] ready
** [http://hcard.geekhood.net/?url=http%3A%2F%2Fabernier.name valid]
* [http://tantek.com/ Tantek Çelik]'s home page includes an inline author hCard at the bottom of the page.
* [http://christophertcressman.com/ Christopher T. Cressman] put his contact details on [http://christophertcressman.com/ Who is Chris Cressman?] and marked them up with hCard.
* [http://christophertcressman.com/ Christopher T. Cressman] put his contact details on [http://christophertcressman.com/ Who is Chris Cressman?] and marked them up with hCard.
 
* [http://tomleo.com/about.html Tom Leo]'s about page has an hCard. Ya Microformats!
* [http://factoryjoe.com/hcard.html Chris Messina] has a page set aside with his contact details.
* [http://factoryjoe.com/hcard.html Chris Messina] has a page set aside with his contact details.
* [http://blog.roub.net/ Paul Roub] has an hCard for himself on his blog's home page.
* [http://blog.roub.net/ Paul Roub] has an hCard for himself on his blog's home page.
Line 617: Line 532:
* [http://blogs.msdn.com/cwilso/ Chris Wilson] has an hCard for himself on [http://blogs.msdn.com/cwilso/about.aspx his about page].
* [http://blogs.msdn.com/cwilso/ Chris Wilson] has an hCard for himself on [http://blogs.msdn.com/cwilso/about.aspx his about page].
* ...
* ...
Hidden! Invisible data is strongly discouraged, these examples have been grouped here in the hopes that the authors will someday make their hCards visible:
* [http://ajbrown.org/ A.J. Brown]'s home page includes a hidden hCard at the bottom of the page.
Former. URLs that seem to have broken.
* <nowiki>http://tomleo.com/about.html</nowiki> Tom Leo's about page had an hCard. (missing as of 2009-08-23)


=== Organizations ===
=== Organizations ===
* [http://www.michrome.com Michrome Marketing Lists (UK)] use hCard on all their search result data.  For example, [http://michrome.com/free-leads/162-Bradford-BD9 Startup Companies in Bradford].
* [http://technorati.com Technorati] (3)
* [http://technorati.com Technorati] (3)
** [http://technorati.com/about/ about], [http://technorati.com/press/ press], and [http://technorati.com/about/contact.html contact] pages are marked up with hCard and have "Add to Address Book" links that use the [http://feed.technorati.com/contacts/ Technorati Contacts Feed service].
** [http://technorati.com/about/ about], [http://technorati.com/press/ press], and [http://technorati.com/about/contact.html contact] pages are marked up with hCard and have "Add to Address Book" links that use the [http://feed.technorati.com/contacts/ Technorati Contacts Feed service].
Line 666: Line 574:
**'''suboptimal''': <code>postal-code</code> and <code>country-name</code> include preprended commas
**'''suboptimal''': <code>postal-code</code> and <code>country-name</code> include preprended commas
**'''suboptimal''': <code>fn</code> is used; should be <code>fn org</code>
**'''suboptimal''': <code>fn</code> is used; should be <code>fn org</code>
* [http://www.easthampshire.org/ easthampshire.org] - hCard on events and events map - e.g. http://easthampshire.org/eventdetail/wine_society_evening/1372606 and http://easthampshire.org/eventmap/wine_society_evening/1372606 built by [http://www.callendercreates.com Callender Creates]


=== Speakers Listings ===
=== Speakers Listings ===
Line 679: Line 586:
* 12: [http://tantek.com/microformats/2005/syndicate/speakers-list.html Syndicate - Speaker List] (hCarded version hosted at tantek.com)
* 12: [http://tantek.com/microformats/2005/syndicate/speakers-list.html Syndicate - Speaker List] (hCarded version hosted at tantek.com)
* 10: [http://tantek.com/microformats/2005/web2/speakers.html Web 2.0 Conference 2005 -- Speakers] (hCarded version hosted at tantek.com)
* 10: [http://tantek.com/microformats/2005/web2/speakers.html Web 2.0 Conference 2005 -- Speakers] (hCarded version hosted at tantek.com)
* 09: [http://web.archive.org/web/20051102094339/we05.com/ Web Essentials 05] - [http://web.archive.org/web/20051102094339/we05.com/presenters.cfm The Presenters<nowiki>original URL: http://we05.com/presenters.cfm</nowiki> (appears to have stopped working as of 2007-12-18, perhaps earlier). Web Essentials 2005 (we05) was the [http://tantek.com/log/2005/10.html#d06t1720 first conference to adopt hCard and hCalendar] on their website and marked up all their presenters with hCard.
* 09: Web Essentials 2005 - The Presenters <nowiki>http://we05.com/presenters.cfm</nowiki> (appears to have stopped working as of 2007-12-18, perhaps earlier) mirror on tantek.com: [http://tantek.com/microformats/2005/we05/presenters.html Web Essentials 2005 - The Presenters]. Web Essentials 2005 (we05) was the [http://tantek.com/log/2005/10.html#d06t1720 first conference to adopt hCard and hCalendar] on their website.


=== Group Blogs ===  
=== Group Blogs ===  
Line 694: Line 601:
** '''suboptimal''': honorific-prefix could be explicitly marked up
** '''suboptimal''': honorific-prefix could be explicitly marked up
*** Error appears for external users only. Won't be fixed any time soon. -- [[User:PhilWilson|PhilWilson]] 00:03, 28 Jan 2006 (GMT)
*** Error appears for external users only. Won't be fixed any time soon. -- [[User:PhilWilson|PhilWilson]] 00:03, 28 Jan 2006 (GMT)
=== Listing Contact ===
Contact information for listings, e.g. job postings, items for sale, etc.
* [http://seogadget.co.uk/search-marketing-executive-upto-30k-portsmouth/ search marketing executive] published by [http://seogadget.co.uk/ SEOgadget].
** '''invalid url property''' - href of the url property element lacks <nowiki>http://</nowiki>, thus being invalid and linking to a non-existent relative URL.
** '''invalid XHTML''' - W3C validator reports this page as [http://validator.w3.org/check?uri=http://seogadget.co.uk/search-marketing-executive-upto-30k-portsmouth/ XHTML 1.0 Transitional] (109 errors as of 2009-08-20).


===UTF8 Examples===
===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).
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).
* [http://sphinx.net.ru/author/ Dmitry Dzhus] embedded his UTF8 encoded hCard with Russian characters in «Author» page of his website.
* [http://sphinx.net.ru/author/ Dmitry Dzhus] embedded his UTF8 encoded hCard with Russian characters in «Author» page of his website.
* [http://ecdlweb.com/ ECDLWeb.com] encodes hCard and Geo information of ECDL and ICDL test centres in UTF-8. Test case for Central European ([http://ecdlweb.com/en/czech-republic/sps-ceska-lipa Czech], [http://ecdlweb.com/en/hungary/athene-idegenforgalmi-informatikai-es-uzletemberkepzo-szakkozepiskola Hungarian] etc.) and [http://ecdlweb.com/en/belarus/belhard Cyrillic] characters.
* [http://tantek.com/ Tantek's Thoughts] encodes Çelik as inline UTF8.
* [http://tantek.com/ Tantek's Thoughts] encodes Çelik as inline UTF8.
* [http://technorati.jp/about/contact.html Technorati Japan contact information] encodes Japanese as inline UTF8.
* [http://technorati.jp/about/contact.html Technorati Japan contact information] encodes Japanese as inline UTF8.

Revision as of 00:11, 15 March 2010

hCard Examples in the wild

Want hCardsHave hCards

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" for inspiration, or try parsing and indexing.

new and uncategorized examples

Have hCard? If you have a site with hCard(s), add it to the top of this list. Include at least one URL to a page that includes actual hCard markup. Examples without direct links hCard(s) will be removed. Check back after a few days, to see if anyone has found any problems with the examples supplied. Note that examples may be categorized and moved to the grouped section below.

You may want to use these buttons on your pages with hCards. See buttons#hCard for any recent additions. mf_hcard.png microformat_hcard.png

  • The Brownbook - the open yellow pages The Brownbook is a peer-produced (like a wiki, but not a using a wiki engine) local business search website. It Uses hCard to allow users to export local business contact details to Outlook or other desktop apps, plus for providing detailed maps from Google.
    • Example of a search results page: Hairdressers in Egham
      • suboptimal: Adresses, e.g "2 Station Rd North, Egham, Surrey", are marked up as street-address
    • Example of a single business's details The Hair Emporium.
      • suboptimal: Adresses, e.g "2 Station Rd North, Egham, Surrey", are marked up as street-address
  • Sylphen is a IT-solutions-provider and uses hCards on the Contact
    • invalid two of the three examples lack the required fn or fn org property
  • Wikipedia templates generating Geo
  • reefscape.net Personal blog page that has a hidden hCard in the about section on every page. A vCard can be downloaded using the Technorati service.
    • Hidden.
  • www.cosmotourist.com and www.cosmotourist.de A new German and English portal around travel tips. Using hidden hCard for hotel listings, wherever address data is available.
    • Hidden.
  • Venn uses a hidden hCard on the contact page.
    • Hidden.
  • Last FM has hCards hidden on their profile pages e.g. [12].
    • Hidden.
  • Kriss Watt has hidden an hCard his blog footer.
    • Hidden.
  • Frances Berriman has a hidden vCard in the footers of her website.
    • Hidden.
  • CandleScience Candle Supply added a hidden hcard sitewide.
    • Hidden.
  • Meryl K. Evans has a hidden hCard on her homepage.
    • Hidden.
  • High Flyers Careers, India's first flight-crew placement agency uses microformats for their corporate information page. Using standards couldn't be easier or better.
    • Has honorific prefixes as part of "fn", rather than marked up separatley.
  • Spotstor.com eg - [13] uses hCard on profile pages (where user has elected to show contact information).
  • Natural England (new UK government agency, formed 2006-10-01).
    • No "fn" - which makes it invalid.
  • G3:2 uses hCard with geo tags in the copyright and on the about me page
    • Address data is hidden using CSS.
  • ZDnet Contact Us Page supports hCard.
  • Gerard Braad has published an example on his profile page that is almost consistent with his original vCard file. Also progress is made for transforming his FoaF file to a hCard encoded representation (also done for my spouse:Yong Yuan)
    • (2005-09-27) PASSED, PASSED
    • WARNINGS
      • uses 'n given-name' and 'n family-name' instead of nesting the given- and family- names inside the 'n'
      • has one 'tel' value with a bunch of values stuffed in
      • probably more problems --RyanKing 17:19, 5 Jan 2006 (PST)
  • Cori Schlegel discusses how he has updated his contact page with hCard
    • INVALID - using 'prefix' instead of 'honorific-prefix' and type's in classnames (in both adr and tel) and has two photo's (the second could be 'logo') --RyanKing 15:15, 5 Jan 2006 (PST)
  • Landsbanki Føroya
    • INVALID - using embedded RDF/XML invalidly
  • Yellow Pencil Using microformats to present company contact information
    • First hcard has empty "fn" and no "n". "fn" should be with "org" -- ScottReynen 21:29, 19 Jun 2006 (CST)

examples by category

Want hCard? Get started with writing an hCard using the hCard creator to write up some contact information, validate and publish it, or following the hCard authoring tips to add hCard markup to your current site. Check out this section for similar examples of types of pages that benefit from hCard markup.

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. 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 company / service name.
  5. 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".
  6. 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".
  7. Group Blogs - blogs with multiple authors marked up with hCard
  8. Authors - pages about some other thing, such as books, perhaps reviews etc., which have marked up their authors with hCard
  9. Search Results - results pages from search engines (either generic or for people/organizations) that return people marked up with hCards.

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

Sort alphabetically by "family-name".

Organizations

Institutions

with some problems:

Online Profiles

Online Venues

  • Sydney Directory Wiki supports hCard and geographical coordinates for locations, e.g. the Sydney Opera House.
  • Airfix Stockists and Distributors, e.g. [14]
    • suboptimal: street-address contains street address, locality and region (e.g. "99 Hobs Moat Rd, Solihull, W. Midlands")
    • suboptimal: postal-code and country-name include preprended commas
    • suboptimal: fn is used; should be fn org

Speakers Listings

2007

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

2006

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

2005

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

Group Blogs

  • 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".

Authors

  • LazyLibrary uses author hCard's on every book page. Example: [15]
    • suboptimal Example has an fn of "Dorling Kindersley, David West Reynolds" which should be split into two hCards! (site would also benefit from hReview).

Search Results

  • University of Bath Person Finder results are encoded with hCards so you can easily create a vCard from any result.
    • invalid: attempt to use Implied-N optimization where that's not possible,
    • suboptimal: honorific-prefix could be explicitly marked up
      • Error appears for external users only. Won't be fixed any time soon. -- PhilWilson 00:03, 28 Jan 2006 (GMT)

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).

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.

non-HTML examples

missing

Examples that used to have one or more hCards but now don't seem to have any. If you do find one, please include direct links to at least two (assuming there are two or more) pages at the referenced site that have one or more hCards.

related pages

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.