A web action is the interface and user experience of taking a specific discrete action, across the web, from one site to another site or application. 
You should put web action buttons (or links) on your posts so that users can quickly interact with them and perform common actions such as:
You should also consider putting web action buttons on your posts even when inline in a stream (composite, home page, or archive pages), so that users can quickly interact with your posts while reading through a collection of them (without having to dive into and out of each post to interact with it).
Any button in the UI of a post which creates a response to that post should be a webaction.
Why event specific
Clicking any of those should trigger the RSVP post creation handler on the user's own site to post the respective RSVP post.
Clicking that button should trigger the Invitation post creation handler on the user's own site to post an invitation post.
For example see the RSVP webaction buttons that Facebook provides users on event posts:
Why fallback silo webactions
If you POSSE your posts to one or more silos, you should consider providing fallback webaction buttons for one or more of those silos, since the user may have navigated to your post from its POSSE copy (which you could potentially detect via referer [sic] and provide fallbacks accordingly).
How to markup
How to markup web actions on your posts:
Note that everything inside the
Wrap favorite reply retweet
If you have Twitter "Favorite", "Reply", "Retweet" tweet action links, you can wrap those in
<indie-action do="like" with="http://tantek.com/2014/175/t1/pdf14-why-need-indieweb-video-slides"> <a target="" href="https://twitter.com/intent/favorite?tweet_id=481682185359880192"> <img src="http://si0.twimg.com/images/dev/cms/intents/icons/favorite_hover.png" alt=""/> Like </a> </indie-action> <indie-action do="repost" with="http://tantek.com/2014/175/t1/pdf14-why-need-indieweb-video-slides"> <a target="" href="https://twitter.com/intent/retweet?tweet_id=481682185359880192"> <img src="http://si0.twimg.com/images/dev/cms/intents/icons/retweet_hover.png" alt=""/> Repost </a> </indie-action> <indie-action do="reply" with="http://tantek.com/2014/175/t1/pdf14-why-need-indieweb-video-slides"> <a target="" href="https://twitter.com/intent/tweet?in_reply_to=481682185359880192"> <img src="http://si0.twimg.com/images/dev/cms/intents/icons/reply_hover.png" alt=""/> Reply </a> </indie-action>
1. Be sure to include these scripts (once per page is sufficient) to polyfill the
See: indie-config#How_to_consume for more details on the scripts (what each does etc.).
<indie-action do="post" with="permalink"> <a href=twitter>..</a> <a href=pinterest>...</a> ... </indie-action>
action do verbs
See also: webactions-verbs-brainstorming
For most actions (e.g. reply, repost, like), the URL should resolve to a post permalink.
Some actions may apply to a user / whole site (e.g. follow, add friend, invite), and those will likely thus resolve to a home page.
Some actions may apply to any URL (e.g. bookmark).
Main article: indie-config#How_to_consume
Until browsers have native support for handling web actions, you can make them work on your site with the consuming half of the indie-config polyfill.
In short, add to the head of your pages with web actions:
See indie-config: How to consume for more details.
How to handle web actions
To set up your site to handle web actions, that is, to respond when you activate web actions buttons, you can use the "publish" half of the indie-config poly-fill. "Publish" in the context of indie-config refers to the act of your site "publishing" that it can handle web actions.
See indie-config: How to publish for details of how to set this up on your site.
Examples of real world web sites using the
Laurent (all posts?) since ????-??-??, e.g.
Indienews comments pages, e.g.
Some of Barry Frost's post have webactions as of 2013-10-01, e.g.:
Glenn Jones notes, e.g.
Then at some point (2014-??-??) Kyle dropped webactions when he rebuilt/simplified his site theme
As of 2015-02-05, all post permalinks have "Reply" and "Like" webaction links, and supporting loading indie-config so anyone's site that registers an indie-config can use his webaction links to reply/like using their own site! E.g.
David Shanske on comments since 2015.
Malcolm Blaney on posts since 2015-09-08
There are at least two key use cases that are worthy of exploring for webactions:
1. Provide the familiar buttons UI of Twitter, so that notes on your own site feel "at least as useful" as syndicated tweet copies. This is for the scenario where a reader of your tweets clicks a permalink on the tweet copy, navigates back to the original on your own site (perhaps to read more or view better embedded images / video), the reader can still favorite/reply/retweet/tweet etc. your note (all verbs/buttons which will act on the tweet copy of that note).
There's been some demand for this in response to POSSEing out to Twitter:
Inline Comment UI
2. Provide a UI for indieweb users to comment / link-blog your notes/articles on their own site
By designing, developing for these two particular use cases, it may provide us a with a constrained enough design-space that we can come up with simple uses/guidelines for webactions that produce a good user experience on indieweb posts.
3. Additionally, some news articles include "Tweet this" links inside an article, inline with the content, or quotes. Such "Tweet this" links appear to be contextually handcrafted, including an elided version of the text they're adjacent to, along with a permalink to the article, and a "via @-name" where @-name is the article author or publisher's Twitter account. E.g.:
Generically, "Quote this" is a better non-silo-specific phrase for this functionality.
There are many possible web actions to place on / above / in a post. Here are some suggestions.
In general, successful interfaces have very few web actions on a piece of content, e.g.:
A note is most similar to a Twitter tweet, thus the following actions are recommended as buttons to be placed in the footer of a note, after info about the note such as date published, location:
If you POSSE to Twitter, providing familiar verbs (even wording and icons) provides a more comfortable and lower cognitive load actions interface to your readers.
An article is worthy of posting as a headline (article name) and permalink to anyone doing indie-bookmark posts, and as a short post on any number of services, and thus at a minimum it makes sense to include
For event posts in particular:
how many actions
To minimize the cognitive load of an interface, minimize the options for the user to consider. E.g.
Thus consider having at most 4 actions on a post. Perhaps only 3 at most since the (...) button is not a web action (but rather a method of hiding the far more uncommon actions).
By analyzing silo designs we see some patterns for what order actions are displayed. These patterns of convergence are slowly educating users and making them familiar with a certain order. There are likely reasons behind such convergence as well such as
It's also typically placed away from the other buttons, often right-aligned with the content that it applies to (and thus out of the way).
You should add provider-specific / silo-specific buttons only for the silos that your site POSSEs to.
A lot of the design/UX we do on the indieweb is driven by doing the right thing for our friends to read and use our content.
For example: one of your friends who reads your posts from a silo happens to click through on the permashortlink to your post, then reads the full post on your site, then wants to reply/favorite/like/repost, and should be able to click those buttons right there on your site, rather than clicking back to go to the silo, and looking for and clicking a button there. (e.g. this real-world complaint from @zeldman re: having to click back to Twitter to reply.)
Such buttons also help your site and your permalinks become a better (more complete) replacement for the silo-UIs your friends are used to interacting with.
We should encourage our friends to interact more with our own sites than with silos.
For event posts in particular, if you're POSSEing your indie events to Facebook, consider providing fallback buttons to that POSSE copy, e.g. RSVP popup (Going, Maybe, Can't Go), Invite
Provide hardcoded markup for silo-specific web actions only when the HTTP referer [sic] shows that the user came from that silo.
No need to direct any traffic to silos that didn't come from them.
No need to pollute your user interface (a la NASCAR problem) with silo buttons unless your user came from that silo and would appreciate even expect those silo buttons.
The whole point to start with is to support (provide a better user experience for) readers who are coming from the silos you've POSSE'd to. Make them feel at home (even more comfortable) on your own site, than they do on the silo they came from.
E.g. on the serverside, always provide a rel-syndication ("View on ..silo-name..") link to POSSE copies of posts, because they are useful for original-post-discovery and POSSE threading (e.g. threading POSSE tweets) and other syndication-link-use-cases.
Then in JS on the clientside, replace the ("View on ..silo-name..") link with web action buttons (using
Perhaps consider keeping (instead of replacing) the ("View on ..silo-name..") visible link (in addition to the web actions) if you think the silo POSSE copy of your post provides sufficient additional value to offset the cost of UI clutter and directing your readers to a silo.
More advantages of dynamically adding silo buttons in clientside JS:
To be clear, this is not advocating for adding any more silo-specific buttons than you already have for whatever reasons you decided. Help figure out what are minimum sensible sets of silo-buttons for each silo and contribute to the above lists.
It's expected that indieweb sites will likely all end up with slightly different sets of action tags and silo buttons inside, based on:
This article has a collection of hyperlink-only silo buttons/links that we can use to create our own silo button fallbacks. generic webaction (with silo-specific label in parentheses) is for each silo-specific web action URL endpoint. Here are a few from that article, feel free to add more silo-specific web action endpoints as you find them. Add more different per-silo web action URLs as you find them!
icons reflecting current state
Both reader readers and webactions on permalink posts should ideally be aware of that status of likes, reposts, and replys to a post. Per our [discussion on IRC] we have come up with 4 states and thus 4 options for each button.
Using Like as an example we have
Each of these could map to a different version of the icon.
as part of post h-entry
If webaction buttons were somehow properties (nested objects?) of their h-entry, then indie readers and other h-entry consuming code could parse/extrac the webactions for a post, and then display them as part of their UI for that post.
reader upgrading webactions to micropub
sites upgrading webactions to micropub
Note that we've had discussions where we already decided we don't want to make (or teach!) users to give their micropub credentials to every site they read, so for other sites (e.g. indieweb sites in general showing posts), they should:
When displaying a post:
We need a registry of common verbs to use with web actions. This should be built based on research into real world usage and brainstorming on top of that:
Web Action Browser Support
If you install a browser (or browser extension) that implements the action tag, you can click on action buttons on other sites (e.g. like those listed in the examples in the wild above), and then have the actions direct to your own site.
Web Action Hero Toolbelt
Website Action URL Support
Main article: Web Action URL APIs
IndieWeb Support in particular:
Drop Social Buttons
The always insightful @IA wrote up a post explaining why we should consider dropping social buttons (perhaps currently the largest / most popular set of web actions)
Some statics on sharing button use:
The social buttons used by a variety of silos often come with tracking cookies, meaning that the social networking services are alerted to the fact that logged-in readers have been reading content even if they do not actually take any actions (sharing, retweeting, +1ing/faveing). Depending on the nature of the content on your site, this may be a breach of your ethical standards and the reasonable standards of privacy. For instance, visits to sexuality, health and political sites may then lead tracking cookie organisations to draw unwanted or undesirable inferences that breach a users privacy.
In 2010, the British developer Mischa Tuffield noted that Facebook and Google tracking cookies were used on the NHS Choices website, which is used by people to look up health conditions. See here.
Wikipedia has rejected the introduction of social share buttons partly on the grounds of privacy (Wikipedia:Perennial proposals).
Adblock Plus blocking
The browser extension "Adblock Plus" as of version 2.6.3 (possibly earlier) is known to block some social share buttons, even just Twitter tweet action hyperlinks!
The following Adblock Plus filters appear to be at least blocking follow, tweet, and retweet links:
##a[href^="https://twitter.com/intent/follow?"] ##a[href^="https://twitter.com/intent/retweet?tweet_id"] ##a[href^="https://twitter.com/intent/tweet?"]
If you're using Tweet Actions as silo-specific fallbacks for web actions, be aware that your fallbacks may not show up on users' machines with Ad Block plus installed.
If you're a user of Adblock Plus, you can re-enable these by:
Drop Delegated Logins
While delegated logins aren't necessarily seen as a web action, they are at least superficially similar, in that they typically consist of a button with a particular social site brand. MailChimp decided to drop theirs, read why:
Real-World Candidates for Web Actions
Add links to/screenshots of existing website UIs which a web actions UI could replace
See Also: Web_Action_URL_APIs
Web action delegate URLs are URLs which present a configurable UI for performing an action, which can be customized via query parameters in the URL. They're kind of like a callback URL but presenting a UI to help perform an action instead of performing it automatically with no user intervention.
The web action delegate URL pattern is the practice of software allowing a user to set these custom URLs as delegates for certain actions within an application, probably with URL template placeholders which are auto-filled depending on the context of the delegation.
Apps which submit to to delegate URLs
Web actions were presented and discussed at OSBridge 2012.
The 2012-06-28 OSBridge "Web Actions" presentation proposed the
<action do="post" with="permalink"> <a href=twitter>..</a> <a href=pinterest>...</a> ... </action>
But this has been updated as of IndieWebCampUK 2014 to use
<indie-action do="post" with="permalink"> <a href=twitter>..</a> <a href=pinterest>...</a> ... </indie-action>
The concept of "web actions" was introduced to both capture the emergence of this new type of web interaction (e.g. the spread of "Blog this, Digg, Read later, Follow, Like, Share, Tweet, +1" buttons across pages), and as a user-centric reframing of the previous developer-centric notion of "web intents".
At IndieWebCamp 2011, both discussions and a UX effort demonstrated that the term "web intents" was too confusing and too abstract to effectively do user centered research and design in the area. The term "web action" is based on the fact that from the user's perspective, they think they are taking an action when they click these buttons. When the term was tried out with others creating designs/UX in the space, it seemed to work much better to convey understanding.
Session notes from events where web actions have been discussed: