Web Action Toolbelt Guide

Initially a transcript of the web action toolbelt video, this guide covers how to install and use the Web Action Hero Toolbelt.

This is a quick intro to using the Web Action Hero Toolbelt, which is a cross-browser extension which does two things: acts as a shim for the experimental <action> element (which represents an action which can be taken on a piece of content), and converts existing markup (typically social sharing buttons) into <action> markup so it can be used right away.

It can be installed in Safari, Chrome, Opera or Firefox — see the repo for install instructions;

Can my Publishing Software consume Web Actions?

If your posting UI is accessible via a URL, and it’s contents can be prefilled via that URL, then yes, you can use the Toolbelt! I’m compiling a list of software with this sort of URL API here:

  • Storytlr’s posting UI can be prefilled via ?u={url}&t=title&s=body, but &bookmarklet must be present too

See also Web Action URL APIs.

Web Action Markup

I’ve rolled out web action markup (with fallback) on my personal site so you can try “pure” action markup as well as replaced buttons. Here’s a note you can use.

Background: web action markup is a way of representing in HTML an action which can be taken on some content. It takes a do attr (the verb) and with, a URL to act upon. Just like <video>, you can place fallback content inside it.


<action do="post" with="http://waterpigs.co.uk/articles/web-action-toolbelt-guide/">
    <a href="https://api.twitter.com/intent/tweet?text=http%3A%2F%2Fwaterpigs.co.uk%2Farticles%2Fweb%2Daction%2Dtoolbelt%2Dguide%2F">Tweet This</a>
</action>

Results in this: Tweet This

Note that the API is experimental and may change at any point, but this is what we’re using at the moment.

To configure the Toolbelt, either click the toolbar button (all) or click “options” in the extension list (chrome, ff) to bring up the config dialog. There’s a brief intro to setting it up, but let’s dive straight in and configure a handler service for a verb. Let’s use post as it’s pretty common.

Click “Web Action Verbs”, and Add a verb. In the verb name box type post, and add a service. A service is nothing more than a URL (with a name for easy reference when choosing from more than one service) which gets delegated to when that action is taken. It should present you with some sort of UI for performing the action (like Twitter’s web intents), and you can use {url} as a placeholder — when the action is take, it’ll get replaced with the URL-encoded value of the action element’s with attribute.

If you don’t have your own content creation URI with a URL API, then just use Twitter’s tweet intent to experiment with: https://api.twitter.com/intent/tweet?text={uri}.

The config saves every 5 seconds, so wait a sec, then reload a page with the post action on. You should see that where there was a Tweet action, there is now a “post” button. Try it out.

You can add more than one service to handle any particular verb — go back into options and click the “Add Service” button under the verb. The radio button on the left determines the default action — the one taken on button press — and the other services are just a dropdown menu away:

So that this is still useful on sites which don’t use the experimental <action> markup, you can also replace various social sharing buttons with your own configurable web actions. You can do the same thing with some of the reply, retweet and favourite UI on twitter.com.

Hopefully that gives you an impression of just how powerful this pattern can be! If you’re interested in learning more, these are the places to look: