comments

From IndieWeb
(Redirected from Comments)

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.

How to

How to display

Goal: display received comments in high fidelity, at least as nicely designed as the comments that are "natively" displayed on blog posts and silo posts (e.g. replies on Twitter posts, comments on Facebook posts, Flickr/Instagram photos, etc. - see Silos below for analysis of their practices).

Per Accept a comment, your system should already be:

  • Listening for webmention on your server (have your server software support it)

And when your server receives a webmention URL:

  • parse the h-entry 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 microformats2 parser to do so.
  • if its hyperlink to the original post has an in-reply-to url, then continue processing it as a comment. Otherwise, add it to the "Related Articles" or "Mentions" section in the post footer.
  • get commenter information to display
    • if the h-entry has a p-author, use its h-card:
    • otherwise get the first* rel-author link on the page, retrieve the URL it points to, and use its representative h-card:
      • logo/photo
      • name
      • url (of commenter profile/homepage)
  • get the text of the comment to display
    • IF the h-entry has an e-content, 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 sanitizing (filtering out unsafe HTML).
    • IF there is no e-content OR it's too long, THEN
      • IF the h-entry has a p-summary, 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)
        • IF the p-summary is too long (per your own site UI preference/design), THEN truncate the p-summary yourself (per below TRUNCATING details)
      • ELSE truncate the e-content (if any) yourself (per TRUNCATING).
    • OTHERWISE (no e-content and no p-summary), IF it has a p-name, THEN use that
      • IF the p-name is too long (per your own site UI preference/design)
      • THEN truncate the p-name yourself (per TRUNCATING).
    • 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 POSSEing an abbreviated note to Twitter 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).
  • get more comment info to display
    • use the h-entry dt-published for the time of the reply
      • additionally, its dt-updated could be used for an "edited: datetime" annotation in your display
    • use its u-url for the permalink (hyperlink the time of reply to the permalink)
  • optional location brainstorm - because not many have implemented location info in posted replies
    • use the h-entry p-geo / 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.
      • (Issue: perhaps h-entry could use a p-location property similar to h-event that would permit embedding of an h-adr with structured address information.)

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:

And you've hopefully got a comment display of similar fidelity to anything the silos have.

Note: some of this has been implemented!

Issues:

  • "*first" rel-author 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.

in realtime

Even better, if you can display comments in real-time on people viewing a post, when they're received by your server, it looks amazing to the user. Idea/challenge 2013-09-30.

How to overview:

  • keep a websocket open from the browser view of your post with comments to your server
  • have your server push comments to your browser view your post through the open websocket.

See also: detailed how to, sample code, demo video

How to markup

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: 

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


What each of these do:

  • u-comment - identifies the element as a comment on the h-entry, for comment discovery when reading an h-entry for salmention receiving.
  • u-comment h-cite - 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.
    • The u- prefix on the "comment" property works to get the u-url from inside the h-cite
  • u-author - URL to the comment author's site
  • u-author h-card - h-card to structure the author's URL and name into a single structure
  • p-content - complete text content of the comment
  • p-content p-name - use the text of the comment as a label for the comment if necessary in a compact list presentation
  • u-url - permalink of the comment, necessary for salmention receivers to uniquely identify individual comments
  • dt-published - when the comment was published, provides a text label for linking to the permalink

See also:

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.

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-content on comment body

Note that class="p-content" is used for the body of the comment, here's why:

  1. p-* instead of e-*: 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.
  2. p-content instead of p-summary: 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.

Markup Issues

  • 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? -- pfefferle
    • Native comments make sense as "h-entry" since the copy of them on the post is likely the canonical copy. - Tantek 13:45, 12 July 2015 (PDT)

How to delete

Main article: deleted#Handling

How to delete comments received from other sites.

If an indie web reply/comment post is deleted, that user's site is expected to send another webmention accordingly.

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.

See handling deleted posts for details.

IndieWeb Examples

Automatically:

Ryan Barrett

Ryan Barrett using WordPress, reply comments since 2013-01-15 e.g.

Uses:

  • u-comment h-cite on each embedded comment since ????-??-?? (formerly p-comment)

Aaron Parecki

Aaron Parecki using p3k since 2013-05-29 (first received comment shown)

Uses:

  • p-comment h-cite on each embedded comment

Aaron has also supported real-time display of received comments on his posts on aaronparecki.com using p3k since 2013-10-13.

Barnaby Walters

Barnaby Walters using Taproot since 2013-06-26 (date of first comment received) and marking up using .p-comment.h-entry (since ????-??-??) e.g.:

Uses:

  • p-comment h-cite on each embedded comment

Ben Werdmuller

Ben Werdmüller using idno since 2013-07-04 (date of first comment received), e.g.:

Uses:

  • u-comment h-cite on each embedded comment

Pelle Wessman

Pelle Wessman using webmention.herokuapp.com since 2014-01-04 (first comment received) and u-responses to link to an external h-feed with a list of all received comments. Example:

Uses:

  • h-feed of h-entry for each comment

gRegor Morrill

gRegor Morrill using Nucleus CMS (initially, now ProcessWire) since 2014-01-08, e.g.

  • http://gregorlove.com/2014/01/1178/
  • Displaying a consolidated list of local blog comments with webmentions, in chronological order.
  • Displaying likes/favorites as meta information if a comment is received from the same person. See the implementation notes for more information.

Uses:

  • u-comment h-cite on each embedded comment

Marty McGuire

Marty McGuire using webmention.io since 2017-03-17 (first comment displayed) to display replies and comments backfed from bridgy. Example:

Uses:

  • u-comment h-cite on each embedded comment

Henrik Carlsson