Pelle Wessman

tl;dr

Have your own site? Want to respond to someone elses site? Doing the IndieWeb-thing and moving your tweets to your own site? Want replying to be as simple as on Twitter? Indie-Config is the answer.

How can other sites open a reply form on your site for you to post on? Think Twitter Intents. Indie-Config can – it registers your personal site as a web+action: protocol with navigator.registerProtocolHandler() and that way lets the other site know your available endpoints. Problem solved.

IndieWebCamp UK 2014

Earlier this year I once again attended IndieWebCamp UK in Brighton – a very nice event this time around as well – and a fruitful one. Last year resulted in me making a WebMention service – and this year I discussed a lot about a way to link the Reply, Repost and Like buttons of sites to ones own posting interface to achieve a Twitter Intent like experience without something like MicroPub (which isn’t always feasible) or a browser extension.

The Problem

I want my blog to be able to show a Twitter Intent-like dialog from your blog so that you can reply to my blog from your own site just like you now can reply to my blog from Twitter.

The Proposed Solution

1. You register a web+action: protocol with registerProtocolHandler() and have it point to a URL on a server, like:
   navigator.registerProtocolHandler('web+action', '/?url=%s', 'Your Blog Name');
2. When I need to know what endpoints you have, eg. when you click a reply button on my blog, I load the the web+action: protocol in iframe, like:
   <iframe src="web+action:load"></iframe>
3. When the page in the iframe have loaded you should send JSON-encode your endpoint configuration and send it asa a message to my parent frame using window.postMessage()
4. I should listen for such a message and try to parse it (preferably checking that it was the frame I added that sent the message) – and voilá – I have your configuration. Using:
   window.addEventListener('message')
5. (If you don’t have a configuration then the only way for me to detect that is through a timeout – then I can fallback to eg. Twitter Intents)

Does it work?

Yes! In Firefox and Chrome it does. I have such a reply button on this very blog and me and Barnaby Walters did a Hackday Demo of it during the UK IndieWebCamp where Barnaby registered a handler, went to my site, pressed reply and got a reply form on his own site.

My original implementation also included a semi-broken first try at a Web Component, which didn’t work in Chrome, but with a simple regular polyfill instead (until a real Web Component is made) it should all work in Chrome as well.

The Longer Term

Of course, using navigator.registerProtocolHandler(), iframes and postMessage() is kind of a hack so in the longer term there should of course be a better solution. A road to that better solution that was also discussed during the IndieWebCamp UK was to build it into a Web Component for the WebActions tag, <indie-action>, so that we could start dogfeeding a real world actions tag – learn how such a tag can be used, how it can be styled etc and perhaps prepare for what eventually could be a standard actions tag that’s natively implemented in the browser and which naturally then won’t have a use for the hackish workaround anymore.

Conclusion

So – Indie-Config enables independent sites to open reply windows etc for other independent ones just like one can for Twitter with Twitter Intent. All the basics are there, now we just need to dogfeed it, see how it all work in practise and find out how to best use it.

For more info on Indie-Config and Web Actions and to follow what happens with them within the community, check http://indiewebcamp.com/indie-config and http://indiewebcamp.com/webactions.

I’ll try to follow up here soon with more posts on how to implement all of this. For now, check the source of this blog for a simple implementation.

Try it out

The “Reply” button at this very blog post is wired up so it uses your Indie-Config and falls back to Twitter Intents. So get your Indie-Config up and try replying to this post!