like: Difference between revisions

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

♥ like is a popular webaction button and in some cases post type on various silos such as Facebook and Instagram (represented as a heart (♥)). It is similar to but different from a favorite.

How

mark up and post a like

To post a "like", the post's h-entry MUST hyperlink to the permalink of the thing that is being liked, with class="u-like-of". E.g.

<span class="h-entry"> ... 
 <a class="u-like-of" href="http://someothersite.example.com/permalink47">...</a>
</span>

Demonstrates an h-entry for a "like" of http://someothersite.example.com/permalink47.

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">Blah blah blah, this is a note</div>
  
  <article class="p-like h-cite">
    <a class="p-author h-card" href="http://example.com">Example Liker</a> liked this.
    <a class="u-like-of" href=""></a>
  </article>
</article>

IndieWeb Examples

Examples in the wild of indieweb creators publishing reposts. Add yourself!

Sandeep

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

• http://www.sandeep.io/40
  • is a "like" of http://aaronparecki.com/notes/2013/06/09/1/jawboneup-fuelband-qs

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

Ben Werdmuller

Ben Werdmuller as of IndieWebCamp 2013 implemented likes on werd.io, but called them favorites (because he preferred the term, though they behave like likes).

Example:

• http://werd.io/view/51d1fd3dbed7de817a526da2
  • Is a like of: http://tantek.com/2013/182/t2/publish-elsewhere-syndicate-silo-pesetas-indieweb

Brid.gy

As of the end of 2013, Bridgy now sends webmentions for Facebook and Twitter likes, Twitter favorites, and Google+ +1s. It uses class="u-like u-like-of" to support both the original property and the counterproposal above.

Ryan Barrett

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

• http://snarfed.org/2014-02-04_re-today-is-the-last-day-of-luckily-can-be-used-as-a-replacement
  • is a like of: http://aaronparecki.com/notes/2014/02/01/1/

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

Kyle Mahan

Kyle Mahan posts likes on kylewm.com since 2014-03-13, e.g.,

• https://kylewm.com/like/2014/03/13/2
  • is a like of http://caseorganic.com/notes/2014/03/12/1/
• likes are POSSEd to Twitter if the target publishes a [rel-syndication] URL for Twitter

Kartik Prabhu

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

• [1] - permalink to Kartik's first indie like
  • is a like of: http://adactio.com/notes/7024/ & https://twitter.com/adactio/status/486979851287793667

Acegiak

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

• http://acegiak.net/2014/03/28/kyle-mahan-all-how-i-hate-that-java-util-map-getobject-is-not-generified-probably-the-biggest-source-of-my-java-api-related-bugs-2/
  • is a like of http://kylewm.com/note/2014/03/28/1
• http://acegiak.net/2014/03/27/hexington-stand-up-comic-gifskumail-nanjiani/
  • is a like, repost and comment of http://hexington.tumblr.com/post/80872320480/stand-up-comic-gifs-kumail-nanjiani

Aaron Parecki

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

• https://aaronparecki.com/likes/2014/12/26/1/
  • is a like of indieweb post https://indiewebcat.com/notes/2014/12/23/3/businesscatual
• announcement: https://aaronparecki.com/replies/2014/12/26/1/indieweb-20150101

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, with a thumbs-up icon as a visual affordance on "like" buttons. 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:

FB likes in allactivity

Like posts in-stream appear much more succinctly:

• In the /username/allactivity stream:

  👍 Tantek Çelik likes Indie Web Camp.
  March 19

  with a small link-preview of the liked thing to the right of that. The user's name is linked to their profile, and the name of the thing liked is linked to it. The date/time e.g. "March 19th" is invisible at first and shows only upon hovering over the entry, at which point it appears and is linked to the like post permalink.

FB likes in right sidebar

In the right-side notifications stream:

Tantek Çelik likes
Indie Web Camp.

---

Tantek Çelik likes
Jane Smith's photo.

---

Tantek Çelik likes
John Smith's post.

Hovering over these in-stream like posts shows a pop-up to the left with the liked post/thing, including content, comments, and buttons/actions to interact with it.

likes vs liked

Facebook explicitly uses the present tense verb "likes" whereas others (e.g. notification#Platform_Examples, Instagram) use the past tense "liked".

• The use of the present tense "likes" term is an odd inconsistency even with other items in Facebook's right sidebar stream which use past tense verbs: "commented", "took [a photo]", "added [n new photos]", "shared [user's video]", "shared [a link]". Unlikely that's a mistake, likely there was a deliberate reason for "likes" instead of "liked".
• Possible explanation: maybe to imply "still likes it" instead of "liked this in the past". Thus perhaps focusing on the emotional state (present, likes), rather than the action ("liked").

Instagram

♥ Instagram also uses like in their UI, but gives it a heart icon.

Variants

Some sites have a feature similar to likes but called something else.

We Heart It

♥ We Heart It uses the text word "heart" as a verb and "hearted" as a past tense indicator.

500px

500px has a heart button (with white heart icon on red background ♥) in addition to and right next to a Like button: E.g. on http://500px.com/photo/79538847/lifeguard-cottages-cuckmere-haven-by-al-power?from=user

Icon considerations

Star vs Heart

For a couple years, registered Airbnb users have been able to star the properties they browse, and save them to a list. But Gebbia’s team wondered whether just a few tweaks here and there could change engagement, so they changed that star to a heart. To their surprise, engagement went up by a whopping 30%.[2]

Emphasis added.

Brainstorming

notification first design

Seems sensible to start with a notification first design of what a like post could look like. Some ideas, based on research on notification examples. Assumptions:

• Notifications may have only one "action" upon activation, which can be assumed to activate a link or a the equivalent thereof. For posts, they would activate permalinks (thus no reason to include them explicitly).
• Notifications have an implication of being (semi-)realtime, and show when they were received, which is close enough to a published date as to not need an explicit published date.

Using "likes" explicitly instead of "liked" for the same (apparent) reason the Facebook examples do.

Liking an indieweb post:

• likes Aaron Parecki's post.

• likes Aaron Parecki's note/reply/checkin/RSVP.

• likes Aaron Parecki's article "A Little Twitter Developer History".

Liking a tweet:

• likes @aaronpk's tweet.

Liking an Instagram photo:

• likes aaronpk's photo.

Sequential likes can be clustered for more efficient presentation:

• likes @aaronpk's tweet and Aaron Parecki's post.

• likes aaronpk's photo, @aaronpk's tweet, and Aaron Parecki's post.

text only design

Going from a notification first design to a text only design, we must:

• drop the expectation of a primary activation action

However, these days, most text-only conduits/presentations also auto-link, thus providing URLs in the text provides user-activation options, buttons/actions/navigation of a sort.

• drop the expectation of realtime, as the text may go through any number of text-like conduits such as IM, IRC, Email, SMS, Twitter delayed much after the post time.

Thus it makes sense to add any links inline, and an explicit time of publication.

Liking an indieweb post:

• likes Aaron Parecki's post http... . (2014-12-27 21:00)

• likes Aaron Parecki's note/reply/checkin/RSVP http... . (2014-12-27 22:00)

• likes Aaron Parecki's article "A Little Twitter Developer History" http... . (2014-12-27 23:00)

Liking a tweet:

• likes @aaronpk's tweet http... . (2014-12-27 23:30)

Liking an Instagram photo:

• likes aaronpk's photo http... . (2014-12-27 23:30)

Sequential likes on the same day can be clustered for more efficient presentation:

• likes @aaronpk's tweet http... (23:30) and Aaron Parecki's post http... (21:00) on 2014-12-27

• likes aaronpk's photo http... (23:45), @aaronpk's tweet http... (23:30), and Aaron Parecki's post http... (21:00) on 2014-12-27

inline hypertext design

The next progressive enhancement from text is lightly styled hypertext, including images and hyperlinks.

Liking an indieweb post:

• likes Aaron Parecki's post.2014-12-27 21:00

  • " Aaron Parecki's post" links to the permalink of the thing liked
    • instead of separate " Aaron Parecki" links to his home page and "post" links to the permalink of the thing liked
  • "2014-12-27 21:00" links to the permalink of the like post, when displayed elsewhere, e.g. in-stream.

• likes Aaron Parecki's note/reply/checkin/RSVP.2014-12-27 22:00

  • etc.

• likes Aaron Parecki's article "A Little Twitter Developer History".2014-12-27 23:00

  • similarly for an event or review
  • could be marked up with h-cite as well.

Liking a tweet:

• likes @aaronpk's tweet.2014-12-27 23:30

  • "@aaronpk's tweet" links to the permalink of the favorited tweet
    • instead of separate "@aaronpk" link to Twitter profile and "tweet" link to tweet permalink

Liking an Instagram photo:

• likes aaronpk's photo.2014-12-27 23:45

  • "aaronpk's photo" links to the permalink of the liked photo
    • instead of "aaronpk" link to his IG profile and "photo" link to the IG photo permalink

These designs work for both in-stream like posts, and like post permalinks.

In-stream, collapse multiple sequential like posts from the same day:

• likes @aaronpk's tweet (23:30) and Aaron Parecki's post (21:00).

   2014-12-27

  
  

• likes aaronpk's photo (23:45), @aaronpk's tweet (23:30), and Aaron Parecki's post (21:00).

   2014-12-27

  
  

Where the times (e.g. "21:00") link to the permalinks of each like post respectively, and the date "2014-12-27" links to the archive of all like posts for that day, which will likely show these (and maybe others) in expanded form like the above individual like posts stacked one on top the other.

markup for hypertext design

Minimal markup for liking an indieweb post:

<p class="h-entry">likes 
  <a class="u-like-of" href="http://aaronparecki.com/...">Aaron Parecki's post</a>.
  <a class="u-url" href="/2014/361/f1">
    <time class="dt-published">2014-12-27 21:00</time>
  </a>
</p>

Similarly, for note/reply/checkin/RSVP.

authorship is presumed to work via rel-author, e.g. for such posts in a stream/archive on a page. On a permalink page, such pages typically contain authorship information already somewhere, presuming the h-entry for them is on the body rather than the div in the above example.

Markup for liking an indieweb article with a name in particular, one could use a simple embedded h-cite as well:

<p class="h-entry">likes 
  <a class="u-like-of h-cite" href="http://aaronparecki.com/...">
    <span class="p-author">Aaron Parecki</span>'s 
    article "<span class="p-name">A Little Twitter Developer History</span>"
  </a>.
  <a class="u-url" href="/2014/361/f3">
    <time class="dt-published">2014-12-27 23:00</time>
  </a>
</p>

This would also be a good consuming code test case to make sure it follow authorship and didn't misinterpret the author of the article as the author of the like.

Markup for multiple in-stream sequential like posts from the same day, collapsed:

<p>
<span class="h-entry"><span class="p-name">likes 
  <a class="u-like-of" href="http://twitter.com/aaronpk/...">@aaronpk's tweet</a></span>
  (<a class="u-url" href="/2014/361/f4"
     ><time class="dt-published" datetime="2014-12-27 23:30">23:30</time></a>)
</span> and
<span class="h-entry"><abbr class="p-name" title="likes Aaron Parecki's post">
  <a class="u-like-of" href="http://aaronparecki.com/...">Aaron Parecki's post</a></abbr>
  (<a class="u-url" href="/2014/361/f1"
     ><time class="dt-published" datetime="2014-12-27 21:00">21:00</time></a>)
</span>.
<a href="/2014/361/f"><time>2014-12-27</time></a>
</p>

<p>
<span class="h-entry"><span class="p-name">likes 
  <a class="u-like-of" href="http://instagram.com/...">aaronpk's photo</a></span>
  (<a class="u-url" href="/2014/361/f5"
     ><time class="dt-published" datetime="2014-12-27 23:45">23:45</time></a>)
</span>,
<span class="h-entry"><abbr class="p-name" title="likes @aaronpk's tweet">
  <a class="u-like-of" href="http://twitter.com/aaronpk/...">@aaronpk's tweet</a></abbr>
  (<a class="u-url" href="/2014/361/f4"
     ><time class="dt-published" datetime="2014-12-27 23:30">23:30</time></a>)
</span>, and
<span class="h-entry"><abbr class="p-name" title="likes Aaron Parecki's post">
  <a class="u-like-of" href="http://aaronparecki.com/...">Aaron Parecki's post</a></abbr>
  (<a class="u-url" href="/2014/361/f1"
     ><time class="dt-published" datetime="2014-12-27 21:00">21:00</time></a>)
</span>.
<a href="/2014/361/f"><time>2014-12-27</time></a>
</p>

CSS styling for images, colors, layout is left as an exercise to the builder.

URL design

URL design for like post permalinks is likely to be very similar to other posts.

Any use of date in the permalink should work like any other post.

Some additional details:

• character short code for short URLs.
  • 'f' is suggested by the Whistle shortener design (for favorite, avoiding "l" (for like) since it often looks like "1" or "I" for URL retypability).
• slugs
  • recommendation: no slug
  • research: existing #IndieWeb_Examples mostly have no slug, or put some sort of auto-text-content slug from the liked post, even if it has no slug of its own
  • avoid: putting a slug on a like post (especially more of a slug than the liked post) because you should not do more "SEO" than the original liked post, which is a risk. Having a like post show up higher in search results than the liked post itself is both bad form/rude, and worse for the user, who should see the original post in search results before any likes about it.

Thus if your post permalink paths are of the form:

• /YYYY/DDD/tn

Then a "like" post permalink may have a path like:

• /2014/363/f1

Discussion

Likes of different things

Facebook seems to differentiate between likes of posts and likes of pages. This seems like an important semantic difference. Is the indieweb equivalent of liking a page a favourite? - user:acegiak.net

Previous markup

Previously the class "u-like" was used, but "u-like-of" is better.

Advantages of u-like-of over u-like for this purpose:

• Reads better

  it reads better, more consistently with in-reply-to, e.g. “this post is in-reply-to that post”, “this post is a like-of that post” — Barnaby Walters

  KartikPrabhu supports like-of for ease of reading specially easy for beginners

• Frees up u-like for linking to permalinks of likes. This frees up "u-like" (and "p-like") to actually indicate that the URL being linked is a like itself (e.g. similar to "p-comment").

Related

Possibly related posts and videos to "likes" and "liking"

• http://www.pbs.org/wgbh/pages/frontline/generation-like/

See Also

• favorite
• posts
• silos
• Facebook
• Instagram
• note
• quote
• repost
• webactions
• responses - other specialized types of replies