hcard-examples-in-wild: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
m (added site which uses hCard)
m (Replace <entry-title> with {{DISPLAYTITLE:}})
 
(49 intermediate revisions by 26 users not shown)
Line 1: Line 1:
<entry-title>hCard Examples in the wild</entry-title>
{{note|<p>As of 2017 there are millions of hCards in the wild (e.g. on WordPress by default for years), and thus hCard examples are closed to new additions. Existing examples may be removed if no longer applicable, or may be updated for historical accuracy purposes only.</p><p>DO NOT add new examples to this page. If you do, we'll assume you've actively disregarded this warning, and you'll be banned.</p><p>Please use [[h-card]] which supersedes hCard and add to [[h-card#Examples_in_the_wild|h-card examples in the wild]] accordingly. Thank you.</p>}}
 
{{DISPLAYTITLE:hCard Examples in the wild}}
<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>
Line 9: Line 11:


== new and uncategorized examples ==
== 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|hCard]] markup. Examples without direct links to pages with 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.
'''Have hCard?''' Great! Now go add [[h-card]]. <del datetime="2018-03-08">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|hCard]] markup.</del> Examples without direct links to pages with 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.
You may want to use these buttons on your pages with hCards. See [[buttons#hCard]] for any recent additions.


[http://www.movers-in-london.co.uk/house-removals-london A-Plus Moving Services London] uses hCard on their [http://www.movers-in-london.co.uk/removals-faq FAQ] page.
 
[http://www.manwithavanplus.com Man with avan Plus]uses hcard in many pages as well [http://www.manwithavanplus.com/about-us about us page].
* [https://manwithavan.co.uk/ Man With A Van] uses hCard markup on their [https://manwithavan.co.uk/man-with-a-van/ About] page.
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
* [https://upclosed.com/ UpClosed] uses hCard on their biography pages - [https://upclosed.com/people/bryant-eslava Bryant Eslava Biography]
* [http://eurofundgroup.com/en/vcards Euround Group] and [http://www.eurofundcp.com/en/vcards Eurofund Capital Partners] are generating hCards along with vCards and ICS (for old iOS devices) dynamically
* [http://www.movers-in-london.co.uk/house-removals-london A-Plus Moving Services London] uses hCard on their [http://www.movers-in-london.co.uk/removals-faq FAQ] page.
* [http://www.10barremovalsandstorage.com Office Removals Hull] contains hCard on [http://www.10barremovalsandstorage.com/cotact-us Contact] page.
* [http://www.manwithavanplus.com Man with avan Plus]uses hcard in many pages as well [http://www.manwithavanplus.com/about-us about us page].
* [https://www.acelockservice.com/ Locksmith Jacksonville FL] uses hCard markup on their index page.
* [https://www.manwithvanlondon.com/ ManwithvanLondon.com] uses hCard markup on their [https://www.manwithvanlondon.com/contact// About] page.
* [http://www.sitepromotioncoach.com/about/] uses hCard markup on their main about us page.
* [http://www.sitepromotioncoach.com/about/] uses hCard markup on their main about us page.
* [http://www.aldridgedentists.co.uk/ Anchor Road Dental Practice] uses hCard markup on its  [http://www.aldridgedentists.co.uk/contact-us/ Contact] page.The page also includes a [http://aldridgedentists.co.uk/anchorroaddentalpractice.vcf vCard].
* [http://www.aldridgedentists.co.uk/ Anchor Road Dental Practice] uses hCard markup on its  [http://www.aldridgedentists.co.uk/contact-us/ Contact] page.The page also includes a [http://aldridgedentists.co.uk/anchorroaddentalpractice.vcf vCard].
* [http://www.customerserviceguru.co.uk/budgeting-loan-number/ The Budgeting Loan Contact Number Page] Uses hCard markup.
* [http://www.customerserviceguru.co.uk/budgeting-loan-number/ The Budgeting Loan Contact Number Page] Uses hCard markup.
*[http://piing.com.sg/ Laundry Service Singapore] Uses hCard markup.
*[http://piing.com.sg/ Laundry Service Singapore] Uses hCard markup.
* [https://www.easymanandvanremovals.co.uk/ Easy man&van] uses hCard markup on their [http://www.easymanandvanremovals.co.uk/man-and-van-hire-peterborough/ About] page.
* http://www.cadmap.co.uk/ Cadmap Land & Building Surveyors uses hCard markup on the footer of each page.
* http://www.cadmap.co.uk/ Cadmap Land & Building Surveyors uses hCard markup on the footer of each page.
* [http://expertdent.ca/en ExpertDent dental clinics] uses hCard markup in the header as well as the contact section for its three dental care clinics].
* [http://expertdent.ca/en ExpertDent dental clinics] uses hCard markup in the header as well as the contact section for its three dental care clinics].
Line 32: Line 39:
* [http://nicolasbouliane.com Nicolas Bouliane - Conception de sites internet] uses hCards on the contact page as well as in the header and footer.
* [http://nicolasbouliane.com Nicolas Bouliane - Conception de sites internet] uses hCards on the contact page as well as in the header and footer.
* [http://qwikfix.co.uk/barclays/ Barclays Bank Customer Service]uses hCard for contact information.
* [http://qwikfix.co.uk/barclays/ Barclays Bank Customer Service]uses hCard for contact information.
* [http://www.lslps.co.uk/ LSL Property Services]uses hCard markup for details of Press Contacts.  Example: [http://www.lslps.co.uk/news Property News Page]
* [http://www.lslps.co.uk/ LSL Property Services]uses hCard markup for details of Press Contacts.  Example: [http://www.lslps.co.uk/news Property News Page]
* [http://www.breaflorist.net/pages/Florist-La-Habra/display La Habra Florist] - Uses hCard markup in their la habra florsit page below.
* [http://www.breaflorist.net/pages/Florist-La-Habra/display La Habra Florist] - Uses hCard markup in their la habra florsit page below.
Line 834: Line 842:
* [http://www.confidence2smile.co.uk/ Confidence 2 Smile] uses hCard for business address and contact details.
* [http://www.confidence2smile.co.uk/ Confidence 2 Smile] uses hCard for business address and contact details.
* [http://www.dovetaildental.co.uk/ Dovetail Dental] uses hCard for business address and contact details.
* [http://www.dovetaildental.co.uk/ Dovetail Dental] uses hCard for business address and contact details.
* [https://wecare-removals.co.uk WeCare Removals and Storage] uses hCard for business address and contact details.
* [http://www.electricalcerts.co.uk/ Electrical Certs] uses hCard for business address and contact details.
* [http://www.electricalcerts.co.uk/ Electrical Certs] uses hCard for business address and contact details.
* [http://www.removalslondon.co/ Removals London] uses hCard for business address and contact details.
* [http://www.removalslondon.co/ Removals London] uses hCard for business address and contact details.

Latest revision as of 16:25, 18 July 2020

ℹ️ Note:

As of 2017 there are millions of hCards in the wild (e.g. on WordPress by default for years), and thus hCard examples are closed to new additions. Existing examples may be removed if no longer applicable, or may be updated for historical accuracy purposes only.

DO NOT add new examples to this page. If you do, we'll assume you've actively disregarded this warning, and you'll be banned.

Please use h-card which supersedes hCard and add to h-card examples in the wild accordingly. Thank you.


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? Great! Now go add h-card. 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 to pages with 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
  • 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. [18].
    • 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 - [19] 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 category, 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. Event Speakers - event pages where the speaker for the event is marked up with hCard.
  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".
  8. Group Blogs - blogs with multiple authors marked up with hCard
  9. Wiki templates - community wikis that have templates that automatically generate hCards on pages
  10. Authors - pages about some other thing, such as books, perhaps reviews etc., which have marked up their authors with hCard
  11. Search Results - results pages from search engines (either generic or for people/organizations) that return people marked up with hCards.
  12. Listing Contact - contact information for a listing like a job posting, for sale offering, etc.

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

Groupings alphabetically by "family-name".

Nicely styled:

  • 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).
  • Rogie King's contact info is marked up with hCard and very nicely styled.
  • Tim Van Damme's home page is a beautiful hCard.
  • Paul Tarjan's home page has hCard and is a rel="me" hub

Simple web pages (sorted by family name)

Hidden! Invisible data is strongly discouraged, these examples have been grouped here in the hopes that the authors will someday make their hCards visible:

  • A.J. Brown's home page includes a hidden hCard at the bottom of the page.

Former. URLs that seem to have broken.

  • http://tomleo.com/about.html Tom Leo's about page had an hCard. (missing as of 2009-08-23)
  • http://bogomil.info?l=en/ Bogomil Shopov had an hCard for himself (missing as of 2011-125)

Organizations

Sites for specific organizations with their own hCard on home page, or contact/about page(s). Grouped by country, sorted alphabetically. When this section gets too big we can make a separate business directory page.

US orgs

Australia orgs

  • B&R Data Systems is an organisation hCard. We have also used the technorati tool to download as a vCard, which I think is useful for a business.

England orgs

Germany orgs

  • Hohenstaufen Gymnasium Kaiserslautern has hCard contact info
    • suboptimal: adr subproperties are not recognized due to lack of explicit "adr" property.
      • evidence that has helped drive the flatter design of microformats-2 including h-card which permits adr properties, e.g. 'street-address' directly inside the hCard instead of requiring an explicit 'adr' in the hierarchy. - Tantek 01:46, 17 May 2012 (UTC)

Georgia orgs

Netherlands orgs

Mis-sorted - this should be moved to a search results section:

Old: (these sites used to have hCard, some may have gone offline)

  • http://technorati.com Technorati (2004-2011)
    • http://technorati.com/about/ about, http://technorati.com/press/ press, and http://technorati.com/about/contact.html contact pages with hCard and have "Add to Address Book" links with the http://feed.technorati.com/contacts/ Technorati Contacts Feed service.
  • http://technorati.jp Technorati Japan (2004-2011)
    • http://technorati.jp/about/contact.html contact page marked up with hCard.

Institutions

  • Mozilla's WebFWD experts and team pages have hCards, including microformats-2 h-card markup.
  • 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 old Technorati contacts feed service to convert the hCards into vCards.
    • needs updating to use H2VX instead of Technorati
    • 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).

with some problems:

old:

  • 2005-2010(?) http://technorati.com/about/staff.html Technorati's Staff page had hCards for its employees (~31)
    • E.g. http://technorati.com/about/staff.html?s=matthew_levine#matthew_levine Matthew Levine, http://technorati.com/about/staff.html?s=ryan_king#ryan_king Ryan King, etc.

Online Profiles

Online Venues

Event Speakers

Speakers Listings

  • ... lots more to add from events since 2007, e.g. every dConstruct etc.

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

Wiki Templates

Authors

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)
  • YourTraces SocialSearch Try high results (hohe Relevanz) to get only websites marked with hcard as a person.

Listing Contact

Contact information for listings, e.g. job postings, items for sale, etc.

  • Best Security Jobs is a UK jobs board that uses hCard on the homepage for job listings.
  • search marketing executive published by SEOgadget.
    • invalid url property - href of the url property element lacks http://, thus being invalid and linking to a non-existent relative URL.
    • invalid XHTML - W3C validator reports this page as XHTML 1.0 Transitional (109 errors as of 2009-08-20).

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.