CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-disabled vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>comments - IndieWeb</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-zebra-design-disabled vector-feature-custom-font-size-clientpref-disabled vector-feature-client-preferences-disabled vector-feature-typography-survey-disabled vector-toc-available";var cookie=document.cookie.match(/(?:^|; )wikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"1c42c961433ef0d4cdb031a2","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"comments","wgTitle":"comments","wgCurRevisionId":96594,"wgRevisionId":96594,"wgArticleId":529,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":[],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"comments","wgRelevantArticleId":529,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[]};RLSTATE={"skins.vector.user.styles":"ready","site.styles":"ready","user.styles":"ready","skins.vector.user":"ready","user":"ready","user.options":"loading","mediawiki.page.gallery.styles":"ready","codex-search-styles":"ready", "skins.vector.styles":"ready","skins.vector.icons":"ready"};RLPAGEMODULES=["mediawiki.page.media","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/wiki/load.php?lang=en&modules=codex-search-styles%7Cmediawiki.page.gallery.styles%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector-2022"> <script async="" src="/wiki/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/wiki/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.41.0"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="description" content="Comments are displayed in the context of an original post, and may be a mix of syndicated reply posts from other sites received via Webmention, as well as locally created comments."> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"> <link rel="icon" href="/favicon.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="IndieWeb (en)"> <link rel="EditURI" type="application/rsd+xml" href="https://indieweb.org/wiki/api.php?action=rsd"> <link rel="license" href="/IndieWebCamp:Copyrights"> <link rel="alternate" type="application/atom+xml" title="IndieWeb Atom feed" href="/wiki/index.php?title=Special:RecentChanges&feed=atom"> <meta property="og:type" content="article"> <meta property="og:site_name" content="IndieWeb"> <meta property="og:title" content="comments"> <meta property="og:description" content="Comments are displayed in the context of an original post, and may be a mix of syndicated reply posts from other sites received via Webmention, as well as locally created comments."> <meta property="og:url" content="https://indieweb.org/comments"> <link rel="webmention" href="https://webmention.io/indiewebcamp/webmention"> <script src="https://cdn.usefathom.com/script.js" site="ZPHFRYAA" defer></script> </head> <body class="skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-comments rootpage-comments skin-vector-2022 action-view skin--responsive"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site" role="navigation"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-" class="vector-menu mw-portlet mw-portlet- emptyPortlet" > <div class="vector-menu-heading"> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-Join_the_community!" class="vector-menu mw-portlet mw-portlet-Join_the_community" > <div class="vector-menu-heading"> Join the community! </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🌈-Code-of-conduct" class="mw-list-item"><a href="/code-of-conduct"><span>🌈 Code of conduct</span></a></li><li id="n-🎁-2024-Gift-Calendar!" class="mw-list-item"><a href="/IndieWeb_Gift_Calendar"><span>🎁 2024 Gift Calendar!</span></a></li><li id="n-📅-Events:-IndieWebCamps,-Homebrew-Website-Clubs-(HWC),-Create-Days,-and-more!" class="mw-list-item"><a href="https://events.indieweb.org/"><span>📅 Events: IndieWebCamps, Homebrew Website Clubs (HWC), Create Days, and more!</span></a></li><li id="n-👥--Meetups:-2024-12-18" class="mw-list-item"><a href="https://events.indieweb.org/tag/hwc"><span>👥 Meetups: 2024-12-18</span></a></li><li id="n-🎪-IWC-San-Diego-12/7…8" class="mw-list-item"><a href="/next-iwc"><span>🎪 IWC San Diego 12/7…8</span></a></li><li id="n-❤️-Sponsor" class="mw-list-item"><a href="/how-to-sponsor"><span>❤️ Sponsor</span></a></li><li id="n-💬-Join-#indieweb-chat" class="mw-list-item"><a href="/discuss"><span>💬 Join #indieweb chat</span></a></li><li id="n-📜-Chat-log" class="mw-list-item"><a href="https://chat.indieweb.org/"><span>📜 Chat log</span></a></li> </ul> </div> </div> <div id="p-Get_on_the_IndieWeb" class="vector-menu mw-portlet mw-portlet-Get_on_the_IndieWeb" > <div class="vector-menu-heading"> Get on the IndieWeb </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🎉-Get-started" class="mw-list-item"><a href="/Getting_Started"><span>🎉 Get started</span></a></li><li id="n-ℹ️-FAQ" class="mw-list-item"><a href="/FAQ"><span>ℹ️ FAQ</span></a></li><li id="n-🗽-Principles" class="mw-list-item"><a href="/principles"><span>🗽 Principles</span></a></li> </ul> </div> </div> <div id="p-Recent" class="vector-menu mw-portlet mw-portlet-Recent" > <div class="vector-menu-heading"> Recent </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-📜-Community-Posts" class="mw-list-item"><a href="https://stream.indieweb.org/"><span>📜 Community Posts</span></a></li><li id="n-📢-IndieWeb-Podcasts" class="mw-list-item"><a href="/podcasts_about_the_indieweb"><span>📢 IndieWeb Podcasts</span></a></li><li id="n-📩-Subscribe-to-the-weekly-IndieWeb-newsletter" class="mw-list-item"><a href="/this-week-in-the-indieweb"><span>📩 Subscribe to the weekly IndieWeb newsletter</span></a></li> </ul> </div> </div> <div id="p-Developers" class="vector-menu mw-portlet mw-portlet-Developers" > <div class="vector-menu-heading"> Developers </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-🔩-Building-Blocks" class="mw-list-item"><a href="/Category:building-blocks"><span>🔩 Building Blocks</span></a></li><li id="n-📑-Projects" class="mw-list-item"><a href="/Projects"><span>📑 Projects</span></a></li><li id="n-🧰-Standards" class="mw-list-item"><a href="https://spec.indieweb.org/"><span>🧰 Standards</span></a></li><li id="n-💬-Join-developer-chat" class="mw-list-item"><a href="https://chat.indieweb.org/dev/"><span>💬 Join developer chat</span></a></li> </ul> </div> </div> <div id="p-Wiki_resources" class="vector-menu mw-portlet mw-portlet-Wiki_resources" > <div class="vector-menu-heading"> Wiki resources </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-👤-Login" class="mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2F"><span>👤 Login</span></a></li><li id="n-✳️-Recent-changes" class="mw-list-item"><a href="/Special:RecentChanges"><span>✳️ Recent changes</span></a></li><li id="n-🖼-Recent-uploads" class="mw-list-item"><a href="/Special:ListFiles"><span>🖼 Recent uploads</span></a></li><li id="n-🎲-Random-page" class="mw-list-item"><a href="/Special:Random"><span>🎲 Random page</span></a></li><li id="n-📑-5,536-articles" class="mw-list-item"><a href="/Special:Statistics"><span>📑 5,536 articles</span></a></li><li id="n-©-Wiki-content-is-CC0" class="mw-list-item"><a href="/IndieWebCamp:Copyrights"><span>© Wiki content is CC0</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/Main_Page" class="mw-logo"> <span class="mw-logo-container"> <img class="mw-logo-wordmark" alt="IndieWeb" src="/img/indiewebcamp-logo-lockup-color@1x.png" style="width: 10.125em; height: 4.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" id="" title="Search IndieWeb [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/wiki/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search IndieWeb" aria-label="Search IndieWeb" autocapitalize="none" title="Search IndieWeb [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links" aria-label="Personal tools" role="navigation" > <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet mw-portlet-vector-user-menu-overflow" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2Fcomments" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span>Log in</span></a></li> </ul> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="https://sso.indieweb.org/login?url=https%3A%2F%2Findieweb.org%2Fcomments" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site" role="navigation"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <input type="checkbox" id="vector-toc-collapsed-checkbox" class="vector-menu-checkbox"> <nav id="mw-panel-toc" role="navigation" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-How_to" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#How_to"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span>How to</div> </a> <button aria-controls="toc-How_to-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle How to subsection</span> </button> <ul id="toc-How_to-sublist" class="vector-toc-list"> <li id="toc-How_to_display" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_to_display"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span>How to display</div> </a> <ul id="toc-How_to_display-sublist" class="vector-toc-list"> <li id="toc-in_realtime" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#in_realtime"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.1</span>in realtime</div> </a> <ul id="toc-in_realtime-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-How_to_markup" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_to_markup"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span>How to markup</div> </a> <ul id="toc-How_to_markup-sublist" class="vector-toc-list"> <li id="toc-p-content_on_comment_body" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#p-content_on_comment_body"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2.1</span>p-content on comment body</div> </a> <ul id="toc-p-content_on_comment_body-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Markup_Issues" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Markup_Issues"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2.2</span>Markup Issues</div> </a> <ul id="toc-Markup_Issues-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-How_to_delete" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_to_delete"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3</span>How to delete</div> </a> <ul id="toc-How_to_delete-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-IndieWeb_Examples" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#IndieWeb_Examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span>IndieWeb Examples</div> </a> <button aria-controls="toc-IndieWeb_Examples-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle IndieWeb Examples subsection</span> </button> <ul id="toc-IndieWeb_Examples-sublist" class="vector-toc-list"> <li id="toc-Ryan_Barrett" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Ryan_Barrett"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span>Ryan Barrett</div> </a> <ul id="toc-Ryan_Barrett-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Aaron_Parecki" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Aaron_Parecki"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span>Aaron Parecki</div> </a> <ul id="toc-Aaron_Parecki-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Barnaby_Walters" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Barnaby_Walters"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span>Barnaby Walters</div> </a> <ul id="toc-Barnaby_Walters-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Ben_Werdmuller" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Ben_Werdmuller"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.4</span>Ben Werdmuller</div> </a> <ul id="toc-Ben_Werdmuller-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Pelle_Wessman" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Pelle_Wessman"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5</span>Pelle Wessman</div> </a> <ul id="toc-Pelle_Wessman-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-gRegor_Morrill" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#gRegor_Morrill"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.6</span>gRegor Morrill</div> </a> <ul id="toc-gRegor_Morrill-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Marty_McGuire" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Marty_McGuire"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.7</span>Marty McGuire</div> </a> <ul id="toc-Marty_McGuire-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Henrik_Carlsson" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Henrik_Carlsson"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.8</span>Henrik Carlsson</div> </a> <ul id="toc-Henrik_Carlsson-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Basil" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Basil"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.9</span>Basil</div> </a> <ul id="toc-Basil-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Manually_Display" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Manually_Display"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.10</span>Manually Display</div> </a> <ul id="toc-Manually_Display-sublist" class="vector-toc-list"> <li id="toc-Michael_Van_Der_Velden" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Michael_Van_Der_Velden"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.10.1</span>Michael Van Der Velden</div> </a> <ul id="toc-Michael_Van_Der_Velden-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Tom_Morris" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Tom_Morris"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.10.2</span>Tom Morris</div> </a> <ul id="toc-Tom_Morris-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Tantek" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Tantek"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.10.3</span>Tantek</div> </a> <ul id="toc-Tantek-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Kartik_Prabhu" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Kartik_Prabhu"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.10.4</span>Kartik Prabhu</div> </a> <ul id="toc-Kartik_Prabhu-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Past_Practices" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Past_Practices"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.11</span>Past Practices</div> </a> <ul id="toc-Past_Practices-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Past_Examples" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Past_Examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.12</span>Past Examples</div> </a> <ul id="toc-Past_Examples-sublist" class="vector-toc-list"> <li id="toc-Laurent_Eschenauer" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Laurent_Eschenauer"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.12.1</span>Laurent Eschenauer</div> </a> <ul id="toc-Laurent_Eschenauer-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Sandeep_Shetty" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Sandeep_Shetty"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.12.2</span>Sandeep Shetty</div> </a> <ul id="toc-Sandeep_Shetty-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Policy_Examples" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Policy_Examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span>Policy Examples</div> </a> <button aria-controls="toc-Policy_Examples-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Policy Examples subsection</span> </button> <ul id="toc-Policy_Examples-sublist" class="vector-toc-list"> <li id="toc-Other_examples" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Other_examples"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span>Other examples</div> </a> <ul id="toc-Other_examples-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Why" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Why"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.2</span>Why</div> </a> <ul id="toc-Why-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Articles" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Articles"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.3</span>Articles</div> </a> <ul id="toc-Articles-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Related" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Related"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.4</span>Related</div> </a> <ul id="toc-Related-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Silos" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Silos"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span>Silos</div> </a> <button aria-controls="toc-Silos-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Silos subsection</span> </button> <ul id="toc-Silos-sublist" class="vector-toc-list"> <li id="toc-Tumblr" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Tumblr"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span>Tumblr</div> </a> <ul id="toc-Tumblr-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Twitter" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Twitter"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span>Twitter</div> </a> <ul id="toc-Twitter-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Facebook" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Facebook"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3</span>Facebook</div> </a> <ul id="toc-Facebook-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Native_Comments" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Native_Comments"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span>Native Comments</div> </a> <ul id="toc-Native_Comments-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Comments_Embeds" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Comments_Embeds"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span>Comments Embeds</div> </a> <ul id="toc-Comments_Embeds-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Comment_Hiding" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Comment_Hiding"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span>Comment Hiding</div> </a> <ul id="toc-Comment_Hiding-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Difference_between_comments_and_mentions" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Difference_between_comments_and_mentions"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span>Difference between comments and mentions</div> </a> <ul id="toc-Difference_between_comments_and_mentions-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-FAQ" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#FAQ"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span>FAQ</div> </a> <button aria-controls="toc-FAQ-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle FAQ subsection</span> </button> <ul id="toc-FAQ-sublist" class="vector-toc-list"> <li id="toc-Why_use_p-summary_when_I_can_truncate_e-content" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Why_use_p-summary_when_I_can_truncate_e-content"> <div class="vector-toc-text"> <span class="vector-toc-numb">9.1</span>Why use p-summary when I can truncate e-content</div> </a> <ul id="toc-Why_use_p-summary_when_I_can_truncate_e-content-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Why_use_u-comment_instead_of_p-comment" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Why_use_u-comment_instead_of_p-comment"> <div class="vector-toc-text"> <span class="vector-toc-numb">9.2</span>Why use u-comment instead of p-comment</div> </a> <ul id="toc-Why_use_u-comment_instead_of_p-comment-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Discussion" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Discussion"> <div class="vector-toc-text"> <span class="vector-toc-numb">10</span>Discussion</div> </a> <button aria-controls="toc-Discussion-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Discussion subsection</span> </button> <ul id="toc-Discussion-sublist" class="vector-toc-list"> <li id="toc-How_to_mark_up_nested_comments?" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_to_mark_up_nested_comments?"> <div class="vector-toc-text"> <span class="vector-toc-numb">10.1</span>How to mark up nested comments?</div> </a> <ul id="toc-How_to_mark_up_nested_comments?-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Brainstorming" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Brainstorming"> <div class="vector-toc-text"> <span class="vector-toc-numb">11</span>Brainstorming</div> </a> <button aria-controls="toc-Brainstorming-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Brainstorming subsection</span> </button> <ul id="toc-Brainstorming-sublist" class="vector-toc-list"> <li id="toc-Scaling_Presentation" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Scaling_Presentation"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.1</span>Scaling Presentation</div> </a> <ul id="toc-Scaling_Presentation-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Collapsing" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Collapsing"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.2</span>Collapsing</div> </a> <ul id="toc-Collapsing-sublist" class="vector-toc-list"> <li id="toc-Collapsing_comment_threads" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Collapsing_comment_threads"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.2.1</span>Collapsing comment threads</div> </a> <ul id="toc-Collapsing_comment_threads-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Collapsing_similar_comments" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Collapsing_similar_comments"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.2.2</span>Collapsing similar comments</div> </a> <ul id="toc-Collapsing_similar_comments-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Displaying_top_comments" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Displaying_top_comments"> <div class="vector-toc-text"> <span class="vector-toc-numb">11.3</span>Displaying top comments</div> </a> <ul id="toc-Displaying_top_comments-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Articles_2" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Articles_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">12</span>Articles</div> </a> <ul id="toc-Articles_2-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Previous_specifications_for_display" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Previous_specifications_for_display"> <div class="vector-toc-text"> <span class="vector-toc-numb">13</span>Previous specifications for display</div> </a> <button aria-controls="toc-Previous_specifications_for_display-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span> <span>Toggle Previous specifications for display subsection</span> </button> <ul id="toc-Previous_specifications_for_display-sublist" class="vector-toc-list"> <li id="toc-Trackback_display" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Trackback_display"> <div class="vector-toc-text"> <span class="vector-toc-numb">13.1</span>Trackback display</div> </a> <ul id="toc-Trackback_display-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Pingback_display" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Pingback_display"> <div class="vector-toc-text"> <span class="vector-toc-numb">13.2</span>Pingback display</div> </a> <ul id="toc-Pingback_display-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-See_Also" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#See_Also"> <div class="vector-toc-text"> <span class="vector-toc-numb">14</span>See Also</div> </a> <ul id="toc-See_Also-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> <div class="mw-content-container"> <main id="content" class="mw-body h-entry" role="main"> <header class="mw-body-header vector-page-titlebar"> <label id="vector-toc-collapsed-button" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet vector-button-flush-left cdx-button--icon-only" for="vector-toc-collapsed-checkbox" role="button" aria-controls="vector-toc" tabindex="0" title="Table of Contents"> <span class="vector-icon mw-ui-icon-wikimedia-listBullet"></span> <span>Toggle the table of contents</span> </label> <nav role="navigation" aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">comments</span></h1> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/comments" title="View the content page [c]" accesskey="c"><span>Page</span></a></li><li id="ca-talk" class="new vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=Talk:comments&action=edit&redlink=1" rel="discussion" title="Discussion about the content page (page does not exist) [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="p-variants" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="p-variants-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-variants" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="p-variants-label" for="p-variants-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/comments"><span>Read</span></a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=comments&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e"><span>View source</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/wiki/index.php?title=comments&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/comments"><span>Read</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/wiki/index.php?title=comments&action=edit"><span>View source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/wiki/index.php?title=comments&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/Special:WhatLinksHere/comments" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/Special:RecentChangesLinked/comments" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-print" class="mw-list-item"><a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/wiki/index.php?title=comments&oldid=96594" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/wiki/index.php?title=comments&action=info" title="More information about this page"><span>Page information</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <nav class="vector-page-tools-landmark vector-sticky-pinned-container" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From IndieWeb</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="en" dir="ltr"><div class="mw-parser-output"><p><span class="p-summary"><b><dfn>Comments</dfn></b> are displayed in the context of an original post, and may be a mix of syndicated <a href="/reply" title="reply">reply</a> posts from other sites received via <a href="/Webmention" title="Webmention">Webmention</a>, as well as <a href="/local_comments" title="local comments">locally created comments</a>.</span> </p> <meta property="mw:PageProp/toc" /> <h2><span class="mw-headline" id="How_to">How to</span></h2> <h3><span class="mw-headline" id="How_to_display">How to display</span></h3> <p>Goal: display received comments in high fidelity, at least as nicely designed as the comments that are "natively" displayed on blog posts and <a href="/silo" title="silo">silo</a> posts (e.g. replies on <a href="/Twitter" title="Twitter">Twitter</a> posts, comments on <a href="/Facebook" title="Facebook">Facebook</a> posts, <a href="/Flickr" title="Flickr">Flickr</a>/<a href="/Instagram" title="Instagram">Instagram</a> photos, etc. - see <a href="#Silos">Silos</a> below for analysis of their practices). </p><p>Per <a href="/comment#Accept_a_comment" title="comment">Accept a comment</a>, your system should already be: </p> <ul><li>Listening for <a href="/webmention" class="mw-redirect" title="webmention">webmention</a> on your server (have your server software support it)</li></ul> <p>And when your server receives a webmention URL: </p> <ul><li>parse the <b><a href="/h-entry" title="h-entry">h-entry</a></b> at that URL (only use the first h-entry if there's more than one, seriously, it's supposed to be a permalink) - use a <a href="/microformats2" title="microformats2">microformats2</a> parser to do so.</li> <li>if its hyperlink to the original post has an <a href="/in-reply-to" title="in-reply-to">in-reply-to</a> url, then continue processing it as a comment. Otherwise, add it to the "Related Articles" or "Mentions" section in the <a href="/posts#Footer_sections" title="posts">post footer</a>.</li> <li><b>get commenter information to display</b> <ul><li>if the h-entry has a <b>p-author</b>, use its <b>h-card</b>:</li> <li>otherwise get the first<a href="#first-rel-author">*</a> <b>rel-author</b> link on the page, retrieve the URL it points to, and use its representative <b>h-card</b>: <ul><li><b>logo/photo</b></li> <li><b>name</b></li> <li><b>url</b> (of commenter profile/homepage)</li></ul></li></ul></li> <li><b>get the text of the comment to display</b> <ul><li>IF the h-entry has an <b>e-content</b>, AND if the text is not too long (per your own site UI preference/design, but note that "too long" may be both by character/word count or by number of lines if the content contains newlines), THEN use that, after <a href="/sanitize" title="sanitize">sanitizing</a> (filtering out unsafe HTML).</li> <li>IF there is no <b>e-content</b> OR it's too long, THEN <ul><li>IF the h-entry has a <b>p-summary</b>, AND the text is not too long, THEN use that (useful author crafted summary or for longer posts where only a part of it is the comment) <ul><li>IF the <b>p-summary</b> is too long (per your own site UI preference/design), THEN truncate the <b>p-summary</b> yourself (per below TRUNCATING details)</li></ul></li> <li>ELSE truncate the <b>e-content</b> (if any) yourself (per TRUNCATING).</li></ul></li> <li>OTHERWISE (no <b>e-content</b> and no <b>p-summary</b>), IF it has a <b>p-name</b>, THEN use that <ul><li>IF the <b>p-name</b> is too long (per your own site UI preference/design)</li> <li>THEN truncate the <b>p-name</b> yourself (per TRUNCATING).</li></ul></li> <li>TRUNCATING: IF the text of the comment (however you got it above) is too long (your site, your judgment), THEN abbreviate it with some intelligent ellipsing code (e.g. see <a href="/Twitter#POSSE_abbr_note_to_twitter" title="Twitter">POSSEing an abbreviated note to Twitter</a> for some thinking) and provide a "See more" / "View more" / "More ..." link to the permalink (useful to have an explicit link to the whole comment right next to the ellipsis when YOU (your site) has chosen to truncate or show only a summary because comments can themselves have an ellipsis at the end).</li></ul></li> <li><b>get more comment info to display</b> <ul><li>use the h-entry <b>dt-published</b> for the time of the reply <ul><li>additionally, its <b>dt-updated</b> could be used for an "edited: datetime" annotation in your display</li></ul></li> <li>use its <b>u-url</b> for the permalink (hyperlink the time of reply to the permalink)</li></ul></li> <li><b>optional location brainstorm</b> - because not many have implemented location info in posted replies <ul><li>use the h-entry <b>p-geo</b> / p-latitude / p-longitude for location - you may need to use a service to translate that into a human readable neighborhood / city / state / country name. perhaps hyperlink to a map, or an aggregation on your site of all posts (and comments) near that location. <ul><li>(Issue: perhaps <a href="/h-entry" title="h-entry">h-entry</a> could use a <a href="/wiki/index.php?title=p-location&action=edit&redlink=1" class="new" title="p-location (page does not exist)">p-location</a> property similar to <a href="/h-event" title="h-event">h-event</a> that would permit embedding of an <a href="/wiki/index.php?title=h-adr&action=edit&redlink=1" class="new" title="h-adr (page does not exist)">h-adr</a> with structured address information.)</li></ul></li></ul></li></ul> <p>With that information a sufficiently rich display should be possible in a "Comments" section in the footer on the original post permalink. Add to that for each comment: </p> <ul><li><a href="/webaction" class="mw-redirect" title="webaction">webaction</a> like/favorite/props button/link</li></ul> <p>And you've hopefully got a comment display of similar fidelity to anything the <a href="/silos" class="mw-redirect" title="silos">silos</a> have. </p><p>Note: some of this has been implemented! </p> <ul><li><a href="/Storytlr" title="Storytlr">Storytlr</a> receives comment posts via <a href="/pingback" title="pingback">pingback</a>, then parses the post content and author information from the <a href="/h-entry" title="h-entry">h-entry</a> and <a href="/h-card" title="h-card">h-card</a> on the page, and then displays: <ul><li>author of comment from h-card / name, photo, url properties</li> <li>contents of comment post from h-entry / content, published, url properties</li> <li>e.g.: <a class="external free" href="http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html">http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html</a></li></ul></li> <li>... what implementation will be next?</li></ul> <p>Issues: </p> <ul><li><b><span id="first-rel-author">"*first" rel-author</span></b> is good enough because a) there aren't many multiauthor blogs, comparatively speaking, and more importantly b) this is retrieving a *reply* post, and those are always written by a single person, so there should only be a single rel-author on *that* page. Real-world counter-examples welcome.</li></ul> <h4><span class="mw-headline" id="in_realtime">in realtime</span></h4> <p>Even better, if you can display comments in <b><a href="/real-time" class="mw-redirect" title="real-time">real-time</a></b> on people viewing a post, when they're received by your server, it looks amazing to the user. Idea/challenge <a href="/events/2013-09-30-indieweb-dinner#Realtime_inline_display_of_comments" title="events/2013-09-30-indieweb-dinner">2013-09-30</a>. </p><p>How to overview: </p> <ul><li>keep a websocket open from the browser view of your post with comments to your server</li> <li>have your server push comments to your browser view your post through the open websocket.</li></ul> <p>See also: <a class="external text" href="http://aaronparecki.com/articles/2013/10/13/1/realtime-indieweb-comments">detailed how to, sample code, demo video</a> </p> <h3><span class="mw-headline" id="How_to_markup">How to markup</span></h3> <p>The post the comments are in reply to should be a top-level h-entry, and comments on it should be marked up as h-cites nested under the comment property. For example: </p> <pre><div class="h-entry"> <h1 class="p-name">The Main Entry</h1> <p class="p-author h-card">John Smith</p> <p class="e-content">A few insights I've had:</p> <h2>Comments</h2> <div class="u-comment h-cite"> <a class="u-author h-card" href="http://jane.example.com/">Jane Bloggs</a> <p class="p-content p-name">Ha ha ha great article John.</p> <a class="u-url" href="http://jane.example.com/c12"> <time class="dt-published">2015-07-12 HH:MM</time> </a> </div> <div class="u-comment h-cite"> <a class="u-author h-card" href="http://kim.example.net">Kim Codes</a> <p class="p-content p-name">What were the insights?</p> <a class="u-url" href="http://kim.example.net/k23"> <time class="dt-published">2015-07-12 HH:MM</time> </a> </div> • • • </div> </pre> <p><br /> What each of these do: </p> <ul><li><b>u-comment</b> - identifies the element as a comment on the h-entry, for comment discovery when reading an <a href="/h-entry" title="h-entry">h-entry</a> for <a href="/salmention" class="mw-redirect" title="salmention">salmention</a> receiving.</li> <li>u-comment <b>h-cite</b> - identifies the comment as a citation of an actual comment likely copied from somewhere else, for providing a hint for comment discovery to crawl further for an original. <ul><li>The <a class="external text" href="http://microformats.org/wiki/microformats2-prefixes"><b>u-</b> prefix</a> on the "comment" property works to get the u-url from inside the h-cite</li></ul></li> <li><b>u-author</b> - URL to the comment author's site</li> <li>u-author <b>h-card</b> - h-card to structure the author's URL and name into a single structure</li> <li><b>p-content</b> - complete text content of the comment</li> <li>p-content <b>p-name</b> - use the text of the comment as a label for the comment if necessary in a compact list presentation</li> <li><b>u-url</b> - permalink of the comment, necessary for <a href="/salmention" class="mw-redirect" title="salmention">salmention</a> receivers to uniquely identify individual comments</li> <li><b>dt-published</b> - when the comment was published, provides a text label for linking to the permalink</li></ul> <p>See also: </p> <ul><li><a class="external free" href="http://microformats.org/wiki/comment-brainstorming#microformats2_p-comment_h-entry">http://microformats.org/wiki/comment-brainstorming#microformats2_p-comment_h-entry</a></li></ul> <p>Which documents a bunch of pre-indieweb thinking of how to markup comments, especially when comments were only made natively on a post directly, rather than being propagated peer-to-peer. </p><p>In general this "how to" and the indieweb approach is a further simplification of the microformats comment-brainstorming, with properties added as needed by real world needs. </p> <h4><span class="mw-headline" id="p-content_on_comment_body">p-content on comment body</span></h4> <p>Note that class="p-content" is used for the body of the comment, here's why: </p> <ol><li><b>p-* instead of e-*</b>: The easiest and safest thing to do is to only show plain text comment content from someone else's site. Therefore use p-content instead of e-content. If you were including links, images, or anything else richer than plain text from someone else's site, then you could use e-content.</li> <li><b>p-content instead of p-summary</b>: Typical comments are small enough to display in their entirety, thus that common case is the entirety of the content not a summary, therefore p-content is more appropriate than p-summary. If for some reason you find it necessary to truncate the comment (or use someone else's "p-summary"), then yes, you should use p-summary instead of p-content.</li></ol> <h4><span class="mw-headline" id="Markup_Issues">Markup Issues</span></h4> <ul><li>I think the h-cite markup only works for comments via pingback/webmention, but what about comments made directly on the post using a comment-form? -- <a href="/User:Notizblog.org" class="mw-redirect" title="User:Notizblog.org">pfefferle</a> <ul><li>Native comments make sense as "h-entry" since the copy of them on the post is likely the canonical copy. - <a href="/User:Tantek.com" title="User:Tantek.com">Tantek</a> 13:45, 12 July 2015 (PDT)</li></ul></li></ul> <h3><span class="mw-headline" id="How_to_delete">How to delete</span></h3> <div style="text-indent:2em;font-style:italic">Main article: <a href="/deleted#Handling" title="deleted">deleted#Handling</a></div> <p>How to delete comments received from other sites. </p><p>If an indie web <a href="/reply" title="reply">reply</a>/comment post is <a href="/deleted" title="deleted">deleted</a>, that user's site is expected to send another webmention accordingly. </p><p>If when attempting to retrieve the reply permalink URL your server receives a 410 GONE, then your server is expected to delete the existing syndicated copy of that comment. </p><p>See <a href="/deleted#Handling" title="deleted">handling deleted posts</a> for details. </p> <h2><span class="mw-headline" id="IndieWeb_Examples">IndieWeb Examples</span></h2> <p>Automatically: </p> <h3><span class="mw-headline" id="Ryan_Barrett">Ryan Barrett</span></h3> <p><span class="h-card" style="white-space:nowrap"><img src="https://snarfed.org/ryan_profile_square_thumb.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Snarfed.org" title="User:Snarfed.org">Ryan Barrett</a></span> using <a href="/WordPress" title="WordPress">WordPress</a>, reply comments since 2013-01-15 e.g. </p> <ul><li><a class="external free" href="https://snarfed.org/2013-01-15_healed_with_beard">https://snarfed.org/2013-01-15_healed_with_beard</a> (native comments since 2003-08-09, e.g. <a class="external free" href="https://snarfed.org/2003-08-09_back_from_vacation">https://snarfed.org/2003-08-09_back_from_vacation</a>)</li></ul> <p>Uses: </p> <ul><li><code>u-comment h-cite</code> on each embedded comment since ????-??-?? (formerly <code>p-comment</code>)</li></ul> <h3><span class="mw-headline" id="Aaron_Parecki">Aaron Parecki</span></h3> <p><span class="h-card" style="white-space:nowrap"><img src="https://aaronparecki.com/images/profile.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Aaronparecki.com" title="User:Aaronparecki.com">Aaron Parecki</a></span> using <a href="/p3k" title="p3k">p3k</a> since 2013-05-29 (first received comment shown) </p> <ul><li><a class="external free" href="http://aaronparecki.com/notes/2013/05/21/1/xkcd">http://aaronparecki.com/notes/2013/05/21/1/xkcd</a></li></ul> <p>Uses: </p> <ul><li><code>p-comment h-cite</code> on each embedded comment</li></ul> <p>Aaron has also supported real-time display of received comments on his posts on <a class="external text" href="http://Aaronparecki.com">aaronparecki.com</a> using <a href="/p3k" title="p3k">p3k</a> since <a class="external text" href="http://aaronparecki.com/articles/2013/10/13/1/realtime-indieweb-comments">2013-10-13</a>. </p> <h3><span class="mw-headline" id="Barnaby_Walters">Barnaby Walters</span></h3> <p><span class="h-card"><img src="https://waterpigs.co.uk/photo-2021-04-22-100w.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Waterpigs.co.uk" title="User:Waterpigs.co.uk">Barnaby Walters</a></span> using <a href="/Taproot" title="Taproot">Taproot</a> since 2013-06-26 (date of first comment received) and marking up using .p-comment.h-entry (since ????-??-??) e.g.: </p> <ul><li><a class="external free" href="http://waterpigs.co.uk/notes/4QgMZN/">http://waterpigs.co.uk/notes/4QgMZN/</a></li></ul> <p>Uses: </p> <ul><li><code>p-comment h-cite</code> on each embedded comment</li></ul> <h3><span class="mw-headline" id="Ben_Werdmuller">Ben Werdmuller</span></h3> <p><span class="h-card"><img src="http://werd.io/file/538d0a4cbed7de5111a1ad31/thumb.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Werd.io" title="User:Werd.io">Ben Werdmüller</a></span> using <a href="/idno" class="mw-redirect" title="idno">idno</a> since 2013-07-04 (date of first comment received), e.g.: </p> <ul><li><a class="external free" href="http://werd.io/view/51d5097fbed7ded0633a5956#comments">http://werd.io/view/51d5097fbed7ded0633a5956#comments</a></li></ul> <p>Uses: </p> <ul><li><code>u-comment h-cite</code> on each embedded comment</li></ul> <h3><span class="mw-headline" id="Pelle_Wessman">Pelle Wessman</span></h3> <p><span class="h-card" style="white-space:nowrap"><img src="http://voxpelli.com/avatar.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Kodfabrik.se" title="User:Kodfabrik.se">Pelle Wessman</a></span> using <a class="external text" href="http://webmention.herokuapp.com/">webmention.herokuapp.com</a> since 2014-01-04 (first comment received) and <code>u-responses</code> to link to an external <code>h-feed</code> with a list of all received comments. Example: </p> <ul><li><a class="external free" href="http://voxpelli.com/2013/12/webmentions-for-static-pages/">http://voxpelli.com/2013/12/webmentions-for-static-pages/</a></li></ul> <p>Uses: </p> <ul><li><code>h-feed</code> of <code>h-entry</code> for each comment</li></ul> <h3><span class="mw-headline" id="gRegor_Morrill">gRegor Morrill</span></h3> <p><span class="h-card" style="white-space:nowrap"><img src="https://gregorlove.com/site/assets/files/6268/profile-2021-square.300x0.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Gregorlove.com" title="User:Gregorlove.com">gRegor Morrill</a></span> using <a href="/Nucleus" title="Nucleus">Nucleus CMS</a> (initially, now <a href="/ProcessWire" title="ProcessWire">ProcessWire</a>) since 2014-01-08, e.g. </p> <ul><li><a class="external free" href="http://gregorlove.com/2014/01/1178/">http://gregorlove.com/2014/01/1178/</a></li> <li>Displaying a consolidated list of local blog comments with webmentions, in chronological order.</li> <li><del>Displaying likes/favorites as meta information if a comment is received from the same person. See the <a href="/User:Gregorlove.com/webmention#Relating_webmentions_together" title="User:Gregorlove.com/webmention">implementation notes</a> for more information.</del></li></ul> <p>Uses: </p> <ul><li><code>u-comment h-cite</code> on each embedded comment</li></ul> <h3><span class="mw-headline" id="Marty_McGuire">Marty McGuire</span></h3> <p><span class="h-card" style="white-space:nowrap"><img src="https://martymcgui.re/img/logo.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Martymcgui.re" title="User:Martymcgui.re">Marty McGuire</a></span> using <a class="external text" href="https://webmention.io">webmention.io</a> since 2017-03-17 (first comment displayed) to display replies and comments backfed from bridgy. Example: </p> <ul><li><a class="external free" href="https://martymcgui.re/2017/03/04/125651/">https://martymcgui.re/2017/03/04/125651/</a></li></ul> <p>Uses: </p> <ul><li><code>u-comment h-cite</code> on each embedded comment</li></ul> <h3><span class="mw-headline" id="Henrik_Carlsson">Henrik Carlsson</span></h3> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/File:henrik-carlssons-blog.png" class="mw-file-description"><img src="/images/thumb/e/e8/henrik-carlssons-blog.png/200px-henrik-carlssons-blog.png" decoding="async" width="200" height="925" class="mw-file-element" srcset="/images/thumb/e/e8/henrik-carlssons-blog.png/300px-henrik-carlssons-blog.png 1.5x, /images/thumb/e/e8/henrik-carlssons-blog.png/400px-henrik-carlssons-blog.png 2x" /></a><figcaption>Henrik’s feed with inline comments.</figcaption></figure> <p><a class="external h-card" href="http://henrikcarlsson.se/">Henrik Carlsson</a> displays comments on his site. He does not just show them on the individual post <a href="/permalink" title="permalink">permalink</a> pages, but also below posts displayed in <a href="/feeds" class="mw-redirect" title="feeds">feeds</a>. Listen to <a class="external text" href="http://blog.henrikcarlsson.se/2017/10/microcast-on-inline-comments-and-indieweb-cmses/">his argument on this</a>. </p> <h3><span class="mw-headline" id="Basil">Basil</span></h3> <p>The post provides quick insight as to like and share counts but focus on verbal feedback - making for a more cleaner interface. By keeping the more expressive aspect of one's replies (comments versus a like or reply) as the content of the post, it makes the region less busy. </p> <figure class="mw-halign-right" typeof="mw:File/Thumb"><a href="/File:Screenshot_20200518_145505.png" class="mw-file-description"><img src="/images/thumb/3/3e/Screenshot_20200518_145505.png/200px-Screenshot_20200518_145505.png" decoding="async" width="200" height="77" class="mw-file-element" srcset="/images/thumb/3/3e/Screenshot_20200518_145505.png/300px-Screenshot_20200518_145505.png 1.5x, /images/thumb/3/3e/Screenshot_20200518_145505.png/400px-Screenshot_20200518_145505.png 2x" /></a><figcaption>Showing the response content on Basil's post about Microsub.</figcaption></figure> <ul><li><a class="external free" href="https://web.archive.org/web/20200518184116/https://trivial.observer/blog/micropub/">https://web.archive.org/web/20200518184116/https://trivial.observer/blog/micropub/</a></li></ul> <h3><span class="mw-headline" id="Manually_Display">Manually Display</span></h3> <p>E.g. List of links in a <a href="/posts#Footer_sections" title="posts">post footer</a> section: </p> <h4><span class="mw-headline" id="Michael_Van_Der_Velden">Michael Van Der Velden</span></h4> <p><a href="/User:Mikevdv.dev" title="User:Mikevdv.dev">Michael Van Der Velden</a> has been displaying webmention-comments since 2022-08-25 (date of comments being publicly enabled) </p> <ul><li><a class="external free" href="https://mikevdv.dev/blog/2022-08-25-switching-to-webmention-comments">https://mikevdv.dev/blog/2022-08-25-switching-to-webmention-comments</a></li></ul> <h4><span class="mw-headline" id="Tom_Morris">Tom Morris</span></h4> <p><span class="h-card" style="white-space:nowrap"><img src="https://tommorris.org/images/me.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Tommorris.org" title="User:Tommorris.org">Tom Morris</a></span> sometimes adds links+favicons to a “this post is discussed further at” section (<a class="external text" href="https://web.archive.org/web/20160316210842/https://tommorris.org/posts/2506">Archived example</a>). </p> <h4><span class="mw-headline" id="Tantek">Tantek</span></h4> <p><span class="h-card" style="white-space:nowrap"><img src="https://tantek.com/logo.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Tantek.com" title="User:Tantek.com">Tantek Çelik</a></span> sometimes maintains a citation list of posts which link to one of his posts, e.g. </p> <ul><li><a class="external free" href="http://tantek.com/2013/073/b1/silos-vs-open-social-web#silos-vs-open-social-web-comments">http://tantek.com/2013/073/b1/silos-vs-open-social-web#silos-vs-open-social-web-comments</a></li></ul> <p>And more recently is experimenting with manually incorporating indieweb <a href="/reply" title="reply">reply</a> posts into a comments section: </p> <ul><li><a class="external free" href="http://tantek.com/2015/190/b1/blinking-fever#blinking-fever-comments">http://tantek.com/2015/190/b1/blinking-fever#blinking-fever-comments</a></li></ul> <p>Uses: </p> <ul><li><code>u-comment h-cite</code> on each embedded comment</li></ul> <h4><span class="mw-headline" id="Kartik_Prabhu">Kartik Prabhu</span></h4> <p><span class="h-card"><img src="https://lh3.googleusercontent.com/-r3A9y0QWUGA/T4XzCE5BhCI/AAAAAAAAPRU/zAXHDpcuuqg/s50-c/Recursion-small.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Kartikprabhu.com" title="User:Kartikprabhu.com">Kartik Prabhu</a></span> sometimes manually adds comments/replies to his comments on other sites that don't support webmention: </p> <ul><li><a class="external free" href="https://kartikprabhu.com/notes/re-metric-clifford-signs2#response-replies">https://kartikprabhu.com/notes/re-metric-clifford-signs2#response-replies</a></li></ul> <h3><span class="mw-headline" id="Past_Practices">Past Practices</span></h3> <ul><li><a href="/User:Tantek.com" title="User:Tantek.com">Tantek</a> used to maintain lists of links to his posts of people’s names linked to comment permalinks: <ul><li>2002: <a class="external text" href="http://tantek.com/log/2002/12.html#L20021216t2238">inline list with flags to represent comment languages</a></li> <li>2003: <a class="external text" href="http://tantek.com/log/2003/12.html#L20031215t0830">inline list with some text annotations</a>.</li> <li>2005: <a class="external text" href="http://tantek.com/log/2005/10.html#d02t1813">block list with follow-ups to comments</a></li></ul></li></ul> <h3><span class="mw-headline" id="Past_Examples">Past Examples</span></h3> <h4><span class="mw-headline" id="Laurent_Eschenauer">Laurent Eschenauer</span></h4> <p><a href="/User:Eschnou.com" title="User:Eschnou.com">Laurent Eschenauer</a> using <a href="/Storytlr" title="Storytlr">Storytlr</a>: displayed comment posts from the IndieWeb marked up with <a href="/h-entry" title="h-entry">h-entry</a> and received via <a href="/pingback" title="pingback">pingback</a>, and comments posted locally on his posts, in an integrated time-ordered "Comments" section, since 2013-04-19 (til ~2016). e.g.: </p> <ul><li><a class="external free" href="https://web.archive.org/web/20141207162739/https://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html">https://web.archive.org/web/20141207162739/https://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html</a></li></ul> <h4><span class="mw-headline" id="Sandeep_Shetty">Sandeep Shetty</span></h4> <p><a href="/User:Sandeep.io" title="User:Sandeep.io">Sandeep Shetty</a> using <a href="/Projects#Converspace" class="mw-redirect" title="Projects">Converspace</a> since 2013-06-22 (date of first comment; was up til ~2016) </p> <ul><li><a class="external free" href="https://web.archive.org/web/20160310211032/http://www.sandeep.io/64">https://web.archive.org/web/20160310211032/http://www.sandeep.io/64</a></li></ul> <h2><span class="mw-headline" id="Policy_Examples">Policy Examples</span></h2> <p>Some sites have a policy around what kind of comments are permitted on their site and what to expect before, during and after a comment's posted. </p> <ul><li><span class="h-card" style="white-space:nowrap"><img src="https://beesbuzz.biz/static/headshot.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Beesbuzz.biz" title="User:Beesbuzz.biz">fluffy</a></span> has one at <a class="external free" href="http://beesbuzz.biz/comment-policy">http://beesbuzz.biz/comment-policy</a></li> <li><a class="external free" href="https://kevq.uk/commenting-guidelines">https://kevq.uk/commenting-guidelines</a></li> <li><a class="external free" href="http://www.shakesville.com/2010/01/commenting-policy.html">http://www.shakesville.com/2010/01/commenting-policy.html</a></li></ul> <h3><span class="mw-headline" id="Other_examples">Other examples</span></h3> <ul><li><a class="external text" href="https://www.math.columbia.edu/~woit/wordpress/?wp_super_faq=why-did-you-delete-my-comment">Peter Woit</a>, physicist at Columbia University: <ul><li><blockquote><p><a class="external text" href="https://www.math.columbia.edu/~woit/wordpress/?page_id=4338">Why did you delete my comment?</a>: I delete a lot of the comments submitted here. For some postings, the majority of submitted comments get deleted. I don't delete comments because the commenter disagrees with me, actually comments agreeing with me are deleted far more often than ones that disagree with me. The overall goal is to try and maintain a comment section worth reading, so comments should ideally be well-informed and tell us something true that we didn't already know. The most common reason for deleting a comment is that it's off-topic. Often people are inspired by something in a posting to start discussing something else that interests them and that they feel is likely to interest others here. Unfortunately I have neither the time nor inclination to take on the thankless job of running a general discussion forum here.</p></blockquote></li></ul></li> <li><a class="external free" href="https://web.archive.org/web/20200119183724/https://slatestarcodex.com/comments/">https://web.archive.org/web/20200119183724/https://slatestarcodex.com/comments/</a></li></ul> <h3><span class="mw-headline" id="Why">Why</span></h3> <p>It can be useful to set expectations for others about what one will allow or not on one's own site. </p><p>Ideally people are posting their comments and replies on their own sites and sending <a href="/webmentions" class="mw-redirect" title="webmentions">webmentions</a>, so even if their content is moderated or removed from the site to which they're replying, they still own a copy of the original content. </p> <h3><span class="mw-headline" id="Articles">Articles</span></h3> <ul><li>The Atlantic 2020-06-23 <a class="external text" href="https://www.theatlantic.com/technology/archive/2020/06/my-little-pony-nazi-4chan-black-lives-matter/613348/">My Little Pony Fans Are Ready to Admit They Have a Nazi Problem: Even a niche subculture built around magical cartoon horses is reckoning with racism.</a> Extended example of the derpibooru.org community and long term consequences of permissive community management and comment policy</li></ul> <h3><span class="mw-headline" id="Related">Related</span></h3> <div style="text-indent:2em;font-style:italic">Main article: <a href="/annotation" title="annotation">annotation</a></div> <ul><li><span class="h-cite"><span class="dt-published">2017-04-26</span> <span class="p-author"><a href="http://audreywatters.com/" class="external h-card">Audrey Watters</a></span>: <cite><a class="external u-url p-name" href="http://hackeducation.com/2017/04/26/no-annotations-thanks-bye">Un-Annotated</a></cite> (<a href="http://web.archive.org/web/20170511011933/http://hackeducation.com/2017/04/26/no-annotations-thanks-bye" class="external u-url">archived</a>)</span></li> <li><span class="h-cite"><span class="dt-published">2017-06-24</span> <span class="p-author"><a href="http://audreywatters.com/" class="external h-card">Audrey Watters</a></span>: <cite><a class="external u-url p-name" href="http://audreywatters.com/2017/06/24/annotations-again">More Thoughts on Annotations</a></cite> (<a href="https://web.archive.org/web/20170630184650/http://audreywatters.com/2017/06/24/annotations-again" class="external u-url">archived</a>)</span></li></ul> <h2><span class="mw-headline" id="Silos">Silos</span></h2> <p>In general existing blog/silo posts display comments (in either chronological or reverse chronological order) with the following details: </p> <ul><li><b>commenter logo/photo</b></li> <li><b>commenter name</b> <ul><li><b>hyperlinked to commenter profile</b></li></ul></li> <li><b>full text</b> of comment</li> <li><b>time</b> of comment <ul><li>often in relative time since rather than absolute datetime <ul><li>though see reasons why <a class="external text" href="http://aaronparecki.com/articles/2012/08/23/1/you-should-not-be-displaying-relative-dates">you should not be displaying relative dates</a></li></ul></li> <li><b>hyperlinked to comment permalink</b></li></ul></li> <li><b>commenter location</b> (variable granularity) at time of comment writing <ul><li><b>hyperlinked</b> to silo aggregation of activity at that location</li></ul></li> <li><b>like/favorite button</b> (to like or favorite the comment/@-reply)</li></ul> <h3><span class="mw-headline" id="Tumblr">Tumblr</span></h3> <p><a href="/Tumblr" title="Tumblr">Tumblr</a> groups various different response types into a generic “notes” feed, at the bottom of each post (<a class="external text" href="http://www.kungfugrippe.com/post/47159818629/something-something-syncing#notes">example</a>). They show: </p> <ul><li>The author’s username</li> <li>The author’s profile photo</li></ul> <h3><span class="mw-headline" id="Twitter">Twitter</span></h3> <p><a href="/Twitter" title="Twitter">Twitter</a> shows all tweets which are both in-reply-to a particular tweet AND contain the original tweeters @name below the tweet metadata in chronological order. They provide a “reply” box above (?) the reply feed (<a class="external text" href="https://twitter.com/wilto/status/322028394944532480">example</a>). The tweets have: </p> <ul><li>The authors name</li> <li>The author’s @name</li> <li>The author’s profile photo</li> <li>A relative timestamp</li> <li>The tweet content</li> <li>A bunch of actions (on hover)</li></ul> <p>Twitter replies are ordered according to an undocumented "relevance" heuristic <a class="external free" href="https://help.twitter.com/en/using-twitter/twitter-conversations#ranking">https://help.twitter.com/en/using-twitter/twitter-conversations#ranking</a> </p> <h3><span class="mw-headline" id="Facebook">Facebook</span></h3> <p><a href="/Facebook" title="Facebook">Facebook</a> treats comments as completely secondary to “full” posts, showing them in chronological order beneath the post’s action bar. Facebook only show the latest ~4 comments if there are more, and display the leave-a-comment box below. They have: </p> <ul><li>The author’s name</li> <li>The author’s profile photo</li> <li>The comment content</li> <li>A relative timestamp</li> <li>'via mobile' if applicable</li> <li>Like button w/ like counter</li></ul> <p><span class="mw-default-size" typeof="mw:File"><a href="/File:facebook-post-with-responses.png" class="mw-file-description"><img src="/images/0/06/facebook-post-with-responses.png" decoding="async" width="578" height="368" class="mw-file-element" /></a></span> </p> <h2><span class="mw-headline" id="Native_Comments">Native Comments</span></h2> <p>There is no consensus on the use or avoidance of "native" comments on personal sites. There is some evidence that such comments are often filled with spam and require extra <a href="/admin_tax" title="admin tax">admin tax</a>. However, there's also the reduced effort it takes for other people to participate on a blog without having a domain or having to log in. </p><p>Other Examples: </p> <ul><li>GitHub Blog asks for feedback on posts via Twitter, e.g.: <ul><li><a class="external free" href="https://blog.github.com/2018-10-30-oct21-post-incident-analysis/#conclusion">https://blog.github.com/2018-10-30-oct21-post-incident-analysis/#conclusion</a></li> <li><blockquote><p>Have feedback on this post? Let @github know on Twitter.</p></blockquote></li> <li>No evidence they actually literally use "Twitter for comments" because no comments from Twitter are shown on the post.</li></ul></li></ul> <h2><span class="mw-headline" id="Comments_Embeds">Comments Embeds</span></h2> <p>Some <a href="/silos" class="mw-redirect" title="silos">silos</a> have a comments embed which is used by various sites to host comments elsewhere: </p> <ul><li><a href="/Disqus" title="Disqus">Disqus</a> - their focus is to provide comments or ("discussion" - hence their name) sections on other pages.</li> <li><a href="/Facebook" title="Facebook">Facebook</a> - see <a href="/Facebook#Comments_Embed" title="Facebook">Comments Embed</a></li> <li><a class="external text" href="https://www.hypercomments.com/">HyperComments</a></li> <li>Github issues and discussions can be used to host comments: See <a href="/GitHub#Using_Github_for_comments" title="GitHub"> Using Github for comments</a></li></ul> <p>Open source commenting embed: </p> <ul><li><a class="external text" href="https://commento.adtac.pw">commento</a> - go-based <ul><li>also available as a paid service: <a class="external free" href="https://commento.io/">https://commento.io/</a></li></ul></li> <li><a class="external text" href="https://github.com/phusion/juvia">Juvia</a> - a commenting system you can install on your own server similar to Disqus and <a href="/Intense_Debate" title="Intense Debate">Intense Debate</a></li> <li><a class="external text" href="https://github.com/skx/e-comments/">e-comments</a> - External comments for static HTML pages, a lightweight self-hosted disqus alternative.</li> <li><a class="external text" href="http://coralproject.net/products/talk.html">Mozilla Talk</a> - System for comment moderation and display (Javascript)</li> <li><a class="external text" href="https://github.com/gka/schnack">schnack</a> - nodejs-based commenting embed with oauth support</li> <li><a class="external text" href="https://cactus.chat/">cactus.chat</a> - <a href="/Python" title="Python">Python</a> application with an embed for commenting using <a href="/Matrix" title="Matrix">Matrix</a></li></ul> <h2><span class="mw-headline" id="Comment_Hiding">Comment Hiding</span></h2> <p><a class="external text" href="https://stevenf.com/shutupcss/">shutup.css</a> is custom stylesheet that hides comments on many popular websites. As such it is empirical research on how silos mark up comments. See <a class="external text" href="http://stevenf.com/shutup/shutup-latest.css">the CSS</a> for details. </p> <h2><span class="mw-headline" id="Difference_between_comments_and_mentions">Difference between comments and mentions</span></h2> <p>If the original post does not have an explicit <a href="/in-reply-to" title="in-reply-to">in-reply-to</a> property indicating that it's a direct reply to your post, then you should not present it in the same style or group as you present comments. This can mislead viewers to think that a generic mention is a comment on the post, which can change the interpretation of the original post out of context. For example, see the exchange below for an illustration of how presenting a mention as a comment can change the meaning. </p><p><br /> </p> <ul class="gallery mw-gallery-traditional"> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><span typeof="mw:File"><a href="/File:2018-05-22-tweet-jb-develops-mott.png" class="mw-file-description" title="Someone saw what appeared to be a comment on rachelandrews' blog post, and brought it to the attention of the author."><img alt="Someone saw what appeared to be a comment on rachelandrews' blog post, and brought it to the attention of the author." src="/images/thumb/d/db/2018-05-22-tweet-jb-develops-mott.png/120px-2018-05-22-tweet-jb-develops-mott.png" decoding="async" width="120" height="115" class="mw-file-element" srcset="/images/thumb/d/db/2018-05-22-tweet-jb-develops-mott.png/180px-2018-05-22-tweet-jb-develops-mott.png 1.5x, /images/thumb/d/db/2018-05-22-tweet-jb-develops-mott.png/240px-2018-05-22-tweet-jb-develops-mott.png 2x" /></a></span></div> <div class="gallerytext"> <p>Someone saw what appeared to be a comment on rachelandrews' blog post, and brought it to the attention of the author. </p> </div> </li> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><span typeof="mw:File"><a href="/File:2018-05-22-rachelandrew-post-with-comment.png" class="mw-file-description" title="The mention that was inadvertently presented as a comment."><img alt="The mention that was inadvertently presented as a comment." src="/images/thumb/6/69/2018-05-22-rachelandrew-post-with-comment.png/120px-2018-05-22-rachelandrew-post-with-comment.png" decoding="async" width="120" height="72" class="mw-file-element" srcset="/images/thumb/6/69/2018-05-22-rachelandrew-post-with-comment.png/180px-2018-05-22-rachelandrew-post-with-comment.png 1.5x, /images/thumb/6/69/2018-05-22-rachelandrew-post-with-comment.png/240px-2018-05-22-rachelandrew-post-with-comment.png 2x" /></a></span></div> <div class="gallerytext"> <p>The mention that was inadvertently presented as a comment. </p> </div> </li> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><span typeof="mw:File"><a href="/File:2018-05-22-mott-mention.png" class="mw-file-description" title="The original blog post that mentions rachelandrews' post, which is not an explicit reply."><img alt="The original blog post that mentions rachelandrews' post, which is not an explicit reply." src="/images/thumb/d/d1/2018-05-22-mott-mention.png/120px-2018-05-22-mott-mention.png" decoding="async" width="120" height="93" class="mw-file-element" srcset="/images/thumb/d/d1/2018-05-22-mott-mention.png/180px-2018-05-22-mott-mention.png 1.5x, /images/thumb/d/d1/2018-05-22-mott-mention.png/240px-2018-05-22-mott-mention.png 2x" /></a></span></div> <div class="gallerytext"> <p>The original blog post that mentions rachelandrews' post, which is not an explicit reply. </p> </div> </li> <li class="gallerybox" style="width: 155px"> <div class="thumb" style="width: 150px; height: 150px;"><span typeof="mw:File"><a href="/File:2018-05-22-mott-tweet-reply.png" class="mw-file-description"><img src="/images/thumb/c/c0/2018-05-22-mott-tweet-reply.png/85px-2018-05-22-mott-tweet-reply.png" decoding="async" width="85" height="120" class="mw-file-element" srcset="/images/thumb/c/c0/2018-05-22-mott-tweet-reply.png/128px-2018-05-22-mott-tweet-reply.png 1.5x, /images/thumb/c/c0/2018-05-22-mott-tweet-reply.png/171px-2018-05-22-mott-tweet-reply.png 2x" /></a></span></div> <div class="gallerytext"> </div> </li> </ul> <h2><span class="mw-headline" id="FAQ">FAQ</span></h2> <h3><span class="mw-headline" id="Why_use_p-summary_when_I_can_truncate_e-content">Why use p-summary when I can truncate e-content</span></h3> <p><i>Q: I guess if I grab the e-content and think it's too long, I might as well just truncate it myself. why would I need the p-summary?</i> </p><p>A: Because the p-summary is likely (or even just possibly) explicitly crafted by the author/publishers to be a more meaningfully truncated version of the e-content than you could yourself automatically truncate. </p> <h3><span class="mw-headline" id="Why_use_u-comment_instead_of_p-comment">Why use u-comment instead of p-comment</span></h3> <p><b>Q:</b> Why use <code>u-comment</code> around the comment instead of <code>p-comment</code>? </p><p><b>A:</b> <code>u-comment</code> will parse the comment's implied value as the comment's URL, which is useful for <a href="/salmention" class="mw-redirect" title="salmention">salmention</a> support. <a class="external autonumber" href="http://indiewebcamp.com/irc/2015-07-22#t1437612361069">[1]</a> </p> <h2><span class="mw-headline" id="Discussion">Discussion</span></h2> <ul><li>Long posts where only a part of it is in-reply-to another post and a large chuck of it is a tangent should not be published as a reply/comment and instead should be published as a mention. Noting this here because this is accounted for above in the "How to display > get the text of the comment to display" section and it might wrongly send the message that (largely tangential) posts like these should be marked up with in-reply-to. (See <a class="external autonumber" href="http://indiewebcamp.com/irc/2013-07-07/line/1373241638">[2]</a>)</li> <li><a class="external free" href="https://the-pastry-box-project.net/marie-connelly/2014-june-24">https://the-pastry-box-project.net/marie-connelly/2014-june-24</a></li> <li>For places where comments can't be included in line the use of a <code>u-responses</code> to point to another page containing a list of <code>h-entry</code> objects with all of the received comments would be useful. Useful in blog lists and when using an external WebMention endpoint such as <a class="external text" href="http://webmention.herokuapp.com/">webmention.herokuapp.com</a> <a href="/User:Kodfabrik.se" title="User:Kodfabrik.se">Kodfabrik.se</a></li></ul> <h3><span id="How_to_mark_up_nested_comments.3F"></span><span class="mw-headline" id="How_to_mark_up_nested_comments?">How to mark up nested comments?</span></h3> <p>Nested comments could easily be caused by <a href="/Salmention" title="Salmention">Salmention</a>. <a href="/reply-chain" title="reply-chain">reply-chain</a> has some examples of people showing multiple replies. </p><p>The only one currently nesting comments seems to be <span class="h-card"><a href="https://ben.thatmustbe.me" class="external u-url"><img src="https://ben.thatmustbe.me/image/static/icon_64.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /></a> <span class="p-name p-nickname"><a href="/User:Ben.thatmustbe.me" title="User:Ben.thatmustbe.me">Ben Roberts</a></span></span>. He adds `u-comment h-cite` elements within `u-comment h-cite`. An example taken from <a class="external free" href="https://ben.thatmustbe.me/note/2014/4/24/1/_">https://ben.thatmustbe.me/note/2014/4/24/1/_</a>: </p> <pre><div class="comment u-comment h-cite"> <div class='comment_header'> <span class="minicard h-card u-author"> <img class='comment_author u-photo' src="https://ben.thatmustbe.me/image/static/icon_128.jpg" /> <span class="p-name u-url" href="https://ben.thatmustbe.me" rel="nofollow" title="Ben Roberts" > Ben Roberts </span> </span> <a href="https://ben.thatmustbe.me/note/2014/9/12/1/_" class="u-url permalink"> <time class="date dt-published" datetime="2014-09-12 13:40:56">September 12, 2014 1:40 PM</time> </a> </div> <div class='comment_body p-content p-name'> On account of I got called out on it, I now have back context in my replies! </div> <div class="subcomment u-comment h-cite"> <div class='comment_header'> <span class="minicard h-card u-author"> <img class='comment_author u-photo' src="https://kylewm.com/static/img/users/kyle.jpg" /> <span class="p-name u-url" href="https://kylewm.com" rel="nofollow" title="Kyle Mahan" > Kyle Mahan </span> </span> <a href="https://kylewm.com/2014/09/great-work-ben-have-a-feeling-you" class="u-url permalink"> <time class="date dt-published" datetime="2014-09-12 16:29:19">September 12, 2014 4:29 PM</time> </a> </div> <div class='comment_body p-content p-name'> Great work, Ben! Have a feeling you have started a trend :P </div> </div> </div> </pre> <p>This mark-up could be repeatedly nested. </p> <h2><span class="mw-headline" id="Brainstorming">Brainstorming</span></h2> <h3><span class="mw-headline" id="Scaling_Presentation">Scaling Presentation</span></h3> <p>How do you scale the display of hundreds (or more) of comments or responses in general? </p><p>E.g. see: </p> <ul><li><span class="h-card" style="white-space:nowrap"><img src="https://aaronparecki.com/images/profile.jpg" class="" style="height:1.1em;vertical-align:-.1em" alt="" /> <a href="/User:Aaronparecki.com" title="User:Aaronparecki.com">Aaron Parecki</a></span>'s 100+ item facepile of likes: <a class="external free" href="https://aaronparecki.com/2017/03/02/9/midi-poop-emoji">https://aaronparecki.com/2017/03/02/9/midi-poop-emoji</a></li></ul> <h3><span class="mw-headline" id="Collapsing">Collapsing</span></h3> <p>Similar to how many use <a href="/facepile" title="facepile">facepiles</a> to collapse the display of <a href="/likes" title="likes">likes</a> and <a href="/reposts" title="reposts">reposts</a>, there may be opportunities to collapse displays of comments. </p><p>Related: </p> <ul><li><a href="/like#markup_for_hypertext_design" title="like">collapsing series of adjacent like posts from the same person</a></li> <li><a href="/likes" title="likes">likes</a> e.g. as a <a href="/facepile" title="facepile">facepile</a> or shorter summary of a few people and a count e.g.: <ul><li><a class="external free" href="https://gregorlove.com/2017/10/hello-san-diego/#responses">https://gregorlove.com/2017/10/hello-san-diego/#responses</a></li></ul></li></ul> <p>Use-cases: </p> <h4><span class="mw-headline" id="Collapsing_comment_threads">Collapsing comment threads</span></h4> <ul><li><b>Thread of comments</b> (see also <a href="/salmentions" class="mw-redirect" title="salmentions">salmentions</a>) that you may want to manually/automatically collapse to show only the first in a thread and perhaps a count of number in that thread)</li></ul> <p>E.g. Some prior art here from forum software which tends to show a list of threads, then you have to click into a thread to see the comments on that thread. </p> <h4><span class="mw-headline" id="Collapsing_similar_comments">Collapsing similar comments</span></h4> <ul><li><b>Same or similar comments</b>. Some posts may elicit very similar or identical comments from many people, which could be collapsed by showing the comment once, with multiple authors that said the same thing represented perhaps by a facepile or series of icons (instead of the usual single comment author icon)</li></ul> <p>Examples: </p> <ul><li>Numerous "nice" @-replies on <a class="external free" href="https://twitter.com/SwiftOnSecurity/status/1168915870959226882">https://twitter.com/SwiftOnSecurity/status/1168915870959226882</a></li> <li>FB clustering of "happy birthday/bday" type comments on someone's birthday and summarizing with "N people wished this person a happy birthday" (feels like it could be bad emotional design though, inciting comparison of number of well wishers on special events)</li></ul> <p>Minimum viable way to match these comments: </p> <ul><li>trim whitespace and punctuation and then case insensitive string equal <ul><li>perhaps don't trim a "?" as it sufficiently alters the meaning of the reply, e.g. "nice!" vs. "nice?"</li></ul></li></ul> <h3><span class="mw-headline" id="Displaying_top_comments">Displaying top comments</span></h3><p> Consider alternative to pure time order display of comments to some sort of cross-network "top comments" ordering per: <a class="external free" href="https://fxtwitter.com/mikebutcher/status/1827157111337284010">https://fxtwitter.com/mikebutcher/status/1827157111337284010</a> </p><blockquote><p>Somebody needs to build that @Techmeme-like feature that pulls in top comments on a subject from X, Threads, & BlueSky, so that journalists have greater sources, thus removing X’s hold over the media & politics. (Mastodon is unlikely to go mainstream, sorry everyone).</p></blockquote> <h2><span class="mw-headline" id="Articles_2">Articles</span></h2> <ul><li>2010-01-13 Chris Coyer <i><a class="external text" href="https://css-tricks.com/curating-comments-threads/">Curating Comments Threads</a></i> on CSS-Tricks</li></ul> <ul><li>2013-05-16 Audrey Watters: <a class="external text" href="http://hackeducation.com/2013/05/16/the-comments-are-closed">The Comments Are Closed</a> - many specific criticisms of comments, and the burden of maintaining them</li></ul> <ul><li>2016 <a class="external text" href="https://www.theguardian.com/technology/series/the-web-we-want">The Guardian series: the web we want</a> “How can we end online abuse, and have better conversations on the web?” discusses challenges of online comments, e.g. <ul><li>2016-04-12 <a class="external text" href="https://www.theguardian.com/technology/2016/apr/12/the-dark-side-of-guardian-comments">The dark side of Guardian comments</a> <blockquote><p>We decided to treat the 70m comments that have been left on the Guardian – and in particular the comments that have been blocked by our moderators – as a huge data set to be explored rather than a problem to be brushed under the carpet.</p></blockquote></li></ul></li></ul> <ul><li>2019-06-27 <a class="external text" href="https://www.zachleat.com">Zach Leatherman</a> <i><a class="external text" href="https://www.zachleat.com/web/snarky/">Render Snarky Comments in Comic Sans</a></i> (with details for "Clown Shouting" effect)</li></ul> <p><br /> </p> <h2><span class="mw-headline" id="Previous_specifications_for_display">Previous specifications for display</span></h2> <p>(this historical section could be moved to its own page) </p><p>Included here for thoroughness / historical purposes - a critique of <span id="Existing_specifications_for_display">existing specifications for display</span>. </p><p>Summary: Existing specifications either don't say much or provide bad advice for what to display (if anything) in response to receiving a webmention. </p> <h3><span class="mw-headline" id="Trackback_display">Trackback display</span></h3> <div style="text-indent:2em;font-style:italic">Main article: <a href="/Trackback" title="Trackback">Trackback</a></div> <p>The <a class="external text" href="http://movabletype.org/documentation/trackback/specification.html">TrackBack Specification</a> (and <a class="external text" href="http://en.wikipedia.org/wiki/Trackback">Trackback Wikipedia page</a>) doesn't appear to have any explicit implementation guidance for how to display trackback pings that have been received. </p><p>In practice however, many CMS's display trackbacks in a section explicitly labeled "Trackbacks:", and for each such trackback ping: </p> <ul><li>title of the post that sent the trackback</li> <li>ellipsed [...] ... [...] summary text, which is nearly unreadable without more context, and doesn't even show what phrase linked to the original blog post if any.</li> <li>the overall visual design is very dated and has fallen behind modern comment presentation designs</li></ul> <h3><span class="mw-headline" id="Pingback_display">Pingback display</span></h3> <div style="text-indent:2em;font-style:italic">Main article: <a href="/pingback#Poor_display" title="pingback">pingback#Poor_display</a></div> <p>See <a href="/pingback#Poor_display" title="pingback">Pingback: Poor display</a> for detail on how the specification itself provides very poor advice on display. </p><p>Pingback display practices appear to have been mostly based on Trackback display practices. Unfortunately, in practice Pingback displays are nearly always useless, e.g. </p> <ul><li><a class="external free" href="https://blog.mozilla.org/blog/2013/04/10/gearing-up-for-the-next-chapter/">https://blog.mozilla.org/blog/2013/04/10/gearing-up-for-the-next-chapter/</a></li></ul> <p>Problems demonstrated: </p> <ul><li>"Pingback from" is jargon - provides no value to the user - only noise</li> <li>the title of the comment blog post is useless as it provides a summary of the original blog post</li> <li>the [...] ... [...] summary text is nearly unreadable without more context, and doesn't even show what phrase linked to the original blog post <ul><li>in the first pingback, even just including the entire first paragraph of the comment post would have been better. And if it wasn't a reply then it should just be a list of related articles (date, author, linked post name, all marked up with <a href="/h-cite" title="h-cite">h-cite</a>), rather than including cryptic broken summaries.</li></ul></li> <li>the overall visual design is very dated and has fallen behind modern comment presentation designs</li></ul> <h2><span class="mw-headline" id="See_Also">See Also</span></h2> <ul><li><a href="/reply" title="reply">reply</a></li> <li><a href="/comment" title="comment">comment</a></li> <li><a href="/local_comments" title="local comments">local comments</a></li> <li><a href="/webmention" class="mw-redirect" title="webmention">webmention</a></li> <li><a href="/h-entry" title="h-entry">h-entry</a></li> <li><a href="/h-card" title="h-card">h-card</a></li> <li><a class="external free" href="https://aaronparecki.com/2016/12/23/7/day-3#Resized%20avatars%20for%20comments%20and%20other%20reactions">https://aaronparecki.com/2016/12/23/7/day-3#Resized%20avatars%20for%20comments%20and%20other%20reactions</a></li> <li><a class="external free" href="https://twitter.com/BootstrapCook/status/1016033576683540482?s=19">https://twitter.com/BootstrapCook/status/1016033576683540482?s=19</a> (regarding a <a href="/WordPress" title="WordPress">WordPress</a> blog, <a class="external text" href="https://cookingonabootstrap.com/">Cooking on a Bootstrap</a>, and its "native comments") <ul><li>"After 6 years, I've closed the comments on Bootstrap.<br /><br />280,000 of them.<br /><br />4.2million seconds spent reviewing for threats and vitriol.<br /><br />1,167 hours of dread and hesitation.<br /><br />146 working days lost to ignorance and bile. <br /><br />Two dozen Police investigations.<br /><br />10 hours sleep last night." <a class="external text" href="https://twitter.com/BootstrapCook">@BootstrapCook</a> July 8, 2018</li></ul></li> <li><a class="external free" href="https://www.cjr.org/analysis/dissenter-plugin.php">https://www.cjr.org/analysis/dissenter-plugin.php</a> - contains examples of large publications that turned off their commenting functioning ostensibly to limit trolling and problematic commenting behaviors</li> <li><a class="external free" href="https://lifehacker.com/block-comments-on-the-web-with-this-chrome-extension-1834538815">https://lifehacker.com/block-comments-on-the-web-with-this-chrome-extension-1834538815</a></li> <li>Concerns re: displaying aspects of comments <a class="external free" href="https://twitter.com/kReEsTaL/status/1148204547950727168">https://twitter.com/kReEsTaL/status/1148204547950727168</a> translated: <blockquote><p>But hey, what discouraged me from using Webmentions is the fact of publishing on my blog the tweet, the name and the avatar of people who did not explicitly authorize me to do so ... Myself it would burden me to appear on the blog of I do not know who without permission.</p></blockquote> <ul><li>"Mais bon, ce qui m’a dissuadée d’utiliser les Webmentions, c’est le fait de publier sur mon blog le tweet, le nom et l’avatar de personnes qui ne m’ont pas explicitement autorisé à le faire… Moi-même ça me lourderait d’apparaître sur le blog de je sais pas qui sans permission." <a class="external text" href="https://marieguillaumet.com">@kReEsTaL</a> July 8, 2019</li></ul></li> <li>Consider potential abuse before displaying comments without any filtering / moderation UX, e.g. <a class="external free" href="https://twitter.com/fvsch/status/1148159831087419392">https://twitter.com/fvsch/status/1148159831087419392</a> <ul><li>"I see a few people on the Indie Web movement adding Webmentions to their blogs and I'm wondering: it looks like they're all men? What happens _when_ (not if) you have thousands of webmentions that are 95% abuse and threats from white/male supremacists?" <a class="external text" href="https://fvsch.com">@fvsch</a> July 8, 2019</li></ul></li> <li>Remarkbox <a class="external free" href="https://www.remarkbox.com/">https://www.remarkbox.com/</a> a hosted comment system</li> <li><a class="external free" href="https://utteranc.es/">https://utteranc.es/</a></li> <li>Brainstorming, especially the framing of "mean time to comment": <a class="external free" href="https://twitter.com/bmann/status/1355646110375628800">https://twitter.com/bmann/status/1355646110375628800</a> <ul><li>"That would be @benwerd, of course :P<br /><br />Bringing @withknown back in the form of social comments / community around blogs would be pretty awesome. I talked about #MicroPub and #IndieWeb and the concept of mean-time-to-comment as part of the puzzle of getting feedback on a site." <a class="external text" href="https://bmannconsulting.com">@bmann</a> January 30, 2021</li></ul></li> <li>Example: using GitHub issues for comments on their posts: this issue seems to be setup to literally be the comment thread for a particular post: <a class="external text" href="https://github.com/karlcow/otsukare.info/issues/2">#2 Browser Wish List - Bookmark This Selection</a> — which if the issue was marked up as a syndication of the post, Bridgy could backfeed the issue comments to the post! See also <a class="external free" href="https://utteranc.es/">https://utteranc.es/</a></li> <li>Why it’s ok (and good!) to limit who can comment on your posts (commenters can make their own posts!) 8m16s video: <a class="external free" href="https://www.instagram.com/tv/CUkhxAOrNbG/">https://www.instagram.com/tv/CUkhxAOrNbG/</a></li> <li>Brainstorm: How to display replies in a <a href="/reader" title="reader">reader</a>: When a reader sees <a href="/reply" title="reply">reply</a> posts in the collection of feeds being followed, it can display those (as comments) when it displays the original posts in the collection of feeds being followed. The point (deliberate design) is to display replies from feeds you already follow, in the context of the original post, rather than displaying "all replies".</li> <li>Consider new section or page: Community Guidelines on commenting, replying to posts on a site (which would impact which comments are display on posts). E.g. real world personal site example of such Community Guidelines: <a class="external free" href="https://kottke.org/threads/guidelines">https://kottke.org/threads/guidelines</a></li> <li>flatter or at least full display of comments is better than displaying comments only one deep: <a class="external free" href="https://www.threads.net/@ryanhatesthis/post/Cy8vNefOmGb/">https://www.threads.net/@ryanhatesthis/post/Cy8vNefOmGb/</a></li></ul>    </div> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://indieweb.org/wiki/index.php?title=comments&oldid=96594">https://indieweb.org/wiki/index.php?title=comments&oldid=96594</a>"</div></div> <div id="catlinks" class="catlinks catlinks-allhidden" data-mw="interface"></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" role="contentinfo" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 26 August 2024, at 04:54.</li> <li id="footer-info-copyright">Content is available under <a href="/IndieWebCamp:Copyrights" class="mw-redirect" title="IndieWebCamp:Copyrights">a CC0 public domain dedication</a> unless otherwise noted.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="/IndieWeb:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/IndieWeb:About">About IndieWeb</a></li> <li id="footer-places-disclaimers"><a href="/IndieWeb:General_disclaimer">Code of Conduct</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="http://creativecommons.org/publicdomain/zero/1.0/"><img src="https://i.creativecommons.org/p/zero/1.0/88x31.png" alt="a CC0 public domain dedication" width="88" height="31" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/"><img src="/wiki/resources/assets/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/wiki/resources/assets/poweredby_mediawiki_132x47.png 1.5x, /wiki/resources/assets/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul> <li> <button class="cdx-button cdx-button--icon-only vector-limited-width-toggle" id=""><span class="vector-icon mw-ui-icon-fullScreen mw-ui-icon-wikimedia-fullScreen"></span> <span>Toggle limited content width</span> </button> </li> </ul> </div> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgBackendResponseTime":181,"wgPageParseReport":{"limitreport":{"cputime":"0.105","walltime":"2.603","ppvisitednodes":{"value":580,"limit":1000000},"postexpandincludesize":{"value":5966,"limit":2097152},"templateargumentsize":{"value":1503,"limit":2097152},"expansiondepth":{"value":8,"limit":100},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":7285,"limit":5000000},"timingprofile":["100.00% 1613.774 1 -total"," 13.81% 222.894 4 Template:main"," 11.66% 188.113 1 Template:snarfed"," 7.62% 123.000 1 Template:benthatmustbeme"," 7.16% 115.615 1 Template:gregorlove"," 6.62% 106.864 12 Template:sparkline"," 6.29% 101.524 2 Template:citation"," 6.02% 97.199 1 Template:tommorris"," 5.74% 92.553 1 Template:benwerd"," 4.96% 80.013 1 Template:barnabywalters"]},"cachereport":{"timestamp":"20241217165556","ttl":86400,"transientcontent":false}}});});</script> </body> </html>