like

From IndieWeb

A like is a reaction post and popular UI button on posts, especially on various social media silos such as Facebook & Instagram, and also a webaction. It is similar to but different from a favorite.

  • See likes for displaying the set of likes received on a post, e.g. from other sites!

Why

This section is a stub. You can help the IndieWeb wiki by expanding it.

There are multiple reasons people post likes and multiple meanings attached to the "like" action itself

  • To show the author of the content that you enjoyed/appreciated their work
  • To indicate to the author of a post "thank you", or to acknowledge the receipt of a message or say "I saw this" without further comment in a longer string of back and forth messages. This intent may be better explicitly effectuated on one's own website by posting a read receipt.
  • To make the like counter on the content increase
  • To effectuate a bookmark or some other post type intent on platforms which don't explicitly have that functionality (this is relatively common on Twitter and some indicate it in their bios.) When posting on one's own website, it is recommended to create a specific bookmark post or other specific post type.

How

mark up and post a like

To post a like, the post's h-entry must have a property u-like-of with the URL of the thing that is being liked.

For example, to like http://othersite.example.com/permalink47: 

<div class="h-entry">
  <p class="p-summary"> Liked: <a class="u-like-of" 
href="http://othersite.example.com/permalink47">
http://othersite.example.com/permalink47</a> </p>
</div>

It could also be a nested h-cite, if the target is displayed similar to a reply-context: 

<div class="h-entry">
  <div class="h-cite u-like-of">
    Liked <a class="u-url" href="https://example.com/post">a post</a> by
    <span class="p-author h-card">
      <a class="u-url p-name" href="https://example.com">Author Name</a>
    </span>:
    <blockquote class="e-content">
      <p>The post being liked</p>
    </blockquote>
  </div>
</div>

The trailing preposition "of" helps communicate this in the same that we have u-in-reply-to instead of u-reply.

receive and markup incoming likes

Likes are received in exactly the same way comments are, by accepting incoming webmentions to URLs on your site. When validating the webmention source, check for a h-entry with a like-of property pointing to the target URL (your URL). If there is one, that h-entry is a like of your page! Store it however you wish, and optionally display it on the liked page.

Likes are commonly displayed either as a facepile, separate from any other comments/responses (example), or inline with other responses (example).

Likes are marked up similarly to other responses. Here’s an example h-entry with a like: 

<article class="h-entry">
  <a class="p-author h-card" href="http://waterpigs.co.uk">Barnaby Walters</a>
  <div class="e-content">This is a note. I make lots of them.</div>
  
  <article class="p-like h-cite">
    <a class="p-author h-card" href="http://cb.example.com">Example Liker CB</a> liked this 
    on <a class="u-url" href="http://cb.example.com/like47">
      <time class="dt-published">2014-05-18</time></a> 
  </article>
</article>

Note: a <a class="u-like-of" href=""></a> inside the h-cite is unnecessary, since the h-cite itself is on a u-like property inside the h-entry.

POSSE a like

If you're POSSEing a like of a silo post to the silo itself, use Bridgy Publish to do so (e.g. Twitter), call the silo API directly from your site (e.g. Flickr), or do so manually (e.g. Facebook).

If you're POSSEing a like of a post on a site that only supports comments, you can do so by POSSEing the plain-text equivalent of your like post (with a permalink to your original like post) as a comment directly on said site.

  • Name likes this post. (Originally liked at Permalink)

Examples:

  • ... none so far

Lastly you can POSSE a like of an indieweb post, onto another site like a silo, with a similar approach: POSSEing a plain-text equivalent of your like post as a silo post, perhaps with an destination-context consistent emoji to indicate that it’s a like post, followed by the name or summary of the post being liked, and a permashortlink to your original like post.

  • ⭐️ Example Post… (permashortlink of like)

Examples:

IndieWeb Examples

Examples in the wild of indieweb creators publishing likes. Add yourself to a new subsection at the bottom of this section!

Ryan Barrett

Ryan Barrett posts likes on snarfed.org since 2014-02-04, e.g.

Here's the bookmarklet/plugin and Android setup he uses to indie like (and reply, retweet, etc) with minimal friction on both web and mobile.

Barnaby Walters

Barnaby Walters posts likes on waterpigs.co.uk since ????-??-??, e.g.

  • ???? - permalink to Barnaby's first indie like
    • is a like of: ???

Kartik Prabhu

Kartik Prabhu posts likes on kartikprabhu.com since 2014-07-09, e.g.

Acegiak

Ashton McAllan posts likes on acegiak.net since at least 2014-03-27. Acegiak's posts may have multiple verbs for a single piece of content.

Aaron Parecki

Aaron Parecki posts likes on aaronparecki.com/likes since 2014-12-26. E.g.

Tantek

Tantek Çelik posts likes on tantek.com since 2014-12-31. E.g.

gRegor Morrill

gRegor Morrill manually posts likes on gregorlove.com since 2016-05-10.

Ryan Rix

Ryan Rix (rrix) can use Arcology to post likes by creating a post with a U-LIKE-OF property on it and syndicate them out to silos using Bridgy or through manual webmentions.

Jay Robinson

j4y_funabashi posts likes to http://j4y.co/ since 2016-03-16 E.g.

Rick Mendes

Rick Mendes: my like definition depends on what silo i'm facing the item I want to like. If on facebook it's probably because I actually like something my real friends did, if on Twitter it means I'm going to check this link/tweet later by coming back to my "like list", if on my own Known site, it's mostly to say I really like this post or this tweet and I take the time to "save" it on my own site. if the item makes me want to reshare it, i'll probably bookmark it or share it with the link & my commment. in short I think #indieweb simplify & deprivatise the "like" back to how each of us would like to use it, and that's the beauty of the web :) I only genuinely like things from people I know for real, and also since my #indieweb move I like items with the "reactions" plugin: so I do Like/POSSE from my instance and the item I want to like is probably coming from an indieweb site through Woodwind or if the tweet really matters I might take a mental note by liking it FROM my Known site.

Daniel Goldsmith

Daniel Goldsmith posts likes to View from Ascraeus since January 2018 using the nanopub script.

Nanopub uses XRay to extract full-featured data from the Liked post or tweet, and these are stored as json-formatted data in the front matter of the like post. In the case of a tweet, the action is also syndicated to the twitter.com silo.

fluffy

fluffy posts likes (and other response posts) to a "likes and replies" page.

capjamesg

capjamesg shares likes on his website on a dedicated /likes page. His /likes feed is marked up with microformats so it can be interpreted by feed readers and other consuming applications. All likes are marked up using the u-like-of attribute.

Here is how likes appear on James' website:

Joe Crawford

Joe Crawford shares a top level /likes page written in php with microformats markup up using twig templates ( See gist to inspect code)

Previous Examples

Sandeep

Sandeep Shetty posted "like" posts on his own site with a different presentation than other post types, e.g.:

In some ways this resembles a quote post (e.g. like on Tumblr) but the presentation is different enough (usually quote posts are either *only* the quote, or if the quote is entirety, it might just be a repost).

Services Examples

Brid.gy

As of the end of 2013, Bridgy now sends webmentions for Facebook and Twitter likes, Twitter favorites, and Google+ +1s. It publishes u-like-of markup.

(need an early permalink!)

Silo Examples

500px

500px uses a Like button with a thumbs up (👍) icon. E.g. on http://500px.com/photo/79538847/lifeguard-cottages-cuckmere-haven-by-al-power

Facebook

Facebook popularized like as a verb and "likes" as an indicator on posts, originally with a thumbs-up icon 👍 as a visual affordance on "like" buttons (use of 👍 retired 2013-11-07[1][2]). Examples:

FB like permalink

Here is an individual like post (linked from /username/allactivity) https://www.facebook.com/tantek.celik/posts/10100983037811143:0 (should be viewable without login). For likes of pages and maybe other objects, it's rendered like this:

Tantek Çelik likes Indie Web Camp.
March 19 · 🌎
Indie Web Camp
Community

110 Likes
1 talking about this

where person-icon and name is linked to profile, object of like is linked to object's page, date is linked to permalink, and below that a link-preview is shown for the page being liked.

For posts, the post is rendered with a small "X likes this" tag at the top: