Web Action Hero Toolbelt
A cross-browser extension which does three things:
- Replaces social sharing buttons with <indie-action> elements
- Activates <indie-action> elements
- Allows you to take actions on selections you’ve made (demo video)
The Toolbelt is cross-browser (courtesy of Kango) and can be installed on Safari, Firefox, Chrome or Opera.
- Clone the repo or download the ZIP
- Navigate to /output
Then, depending on your browser:
- Navigate to chrome://extensions
- If not already enabled, enable Dev Mode (top right)
- Press the Load Unpacked Extension button, and select /output/chrome
- Web Actions should pop up in the list, Click 'Options' to configure it.
- Develop -> Show Extension Builder
- Click + (bottom left)
- Add Extension
- Select /output/safari/webactions.safariextension
- Tools -> Addons
- Little cog in the top right -> Install Add-on From File
- Select /output/webactions_0.9.xpi
- Trust it
- Restart it
- Configure it
- Open /output/webactions_0.9.oex
- It will install and show you where the button is
Click the button in your toolbar to bring up the config UI. An explanation is within.
Questions with answers
Wait, what are <indie-action> elements?
An experimental bit of markup (proposed by Tantek Çelik here) for implementing the Web Action pattern in a way back-compatible with existing markup patterns.
For example, say you’re a blogger and you want people to be able to share your content. You might decide to put some social sharing buttons at the bottom of your articles:
<article class="h-entry"> <h1 class="p-name">My Awesome Blog Post</h1> <div class="e-content">•••</div> <footer> <p>Share this post: <a href="•••">Tweet Button</a> </footer> </article>
But what if people aren’t using twitter? Surely I should add a load of others (facebook, google plus, linkedin, reddit, etc.) — and all of a sudden you’re a button slut:
<footer> <a href="•••">Tweet Button</a> <a href="•••">+1 Button</a> <a href="•••">Like Button</a> </footer>
But if I take all of these buttons away in favour of some experimental technology no-one uses, there won’t really be any benefit. So, the
action element is back-compatible with current markup. Just wrap all buttons which represent a particular verb in that
<footer> <indie-action do="post" with="http://example.com/this/page"> <a href="•••">Tweet Button</a> <a href="•••">+1 Button</a> <a href="•••">Like Button</a> </indie-action> </footer>
Non-supporting agents will show the buttons, supporting agents will replace them with a UI tailored to the user.
Isn’t this just [web intents | web activities | x other technology]?
No. Web Actions are a user-centric reframing of dev-centric web intents, the <indie-action> element is a simple, experimental implementation designed so we can start using this pattern straight away. Only through real world usage will we discover the best solution to these problems.
Wasn’t the element originally
Yep, but at IWCUK 2014 Jeremy Keith pointed out that it should be altered to fit better with the web components spec.
Questions without answers (yet)
Most people don’t understand URL APIs — why doesn’t this autodiscover services like web intents?
Because that’s complicated. It would require services to explicitly declare what verbs (which we haven’t agreed on yet) they can handle, and lots and lots of UI programming to be done.
This is not an end product, it is a prototype made so interested parties can get stuck in using this markup now and understanding these patterns now. We’ll handle making it super easy to use later, if it’s well-received.
What verbs should I use?
There’s currently no common registry of verbs. We’re researching them and documenting them here. Hop on #indiewebcamp on freenode and ask about it.