Indie Anywhere was a brainstorming session during IndieWebCampUK 2012.
Welcome to the IndieAnywhere EtherPad!
2012-253 The Bridge room / The Skiff
- Tantek - tantek.com (@t)
- Barnaby - waterpigs.co.uk (@barnabywalters)
This is a session at indiewebcampUK covering the use cases and implementation of a possible indieweb version of twitter's @anywhere.
Per their description Twitter's @anywhere consists of four things: ( https://dev.twitter.com/docs/anywhere/welcome )
- "Follow Buttons" - this is handled by indieweb WebActions.
- "Hovercards" - ...
- "linkify Twitter usernames" - ...
- "Connect to Twitter" - this is handled by IndieAuth
Focusing on the indieweb equivalent of
- Linkify usernames and hovercards.
Twitter says: "need a registered client application" 
On the indieweb, ideally we shouldn't require any kind of registration to make this functionality work.
In the "Linkify Example", Twitter seems to only hyperlink the username portion, and not the "@" symbol.
This doesn't make sense, because:
- it makes a smaller click/tap target
- it implies the that @ is not part of the reference, but it is.
Twitter also linkifies all potential @-names on a page (or within a selector) which seems prone to false positives.
Instead it seems to make more sense to provide a function for deliberately linkifying chunks of specific text (either serverside, or clientside).
Simple Indieweb linkify answer is:
- Use https://github.com/tantek/cassis auto_link() function to linkify both @-names to Twitter, and URLs (works both in JS clientside or in PHP serverside)
- @t ->
- tantek.com ->
Next step for better IndieWeb UX:
- @-names should link to the equivalent indieweb URLs, using user full name, and microformats.
- e.g. @t ->
<a class="h-card" href="http://tantek.com/">Tantek Çelik</a>
- e.g. via a static server-side lookup table (aaronparecki.com does this)
- better: do discovery via Twitter profile retrieval on their "website" URL and use that
- even better: cache the results of that discovery (on client and/or serverside)
- even better: do rel-me verification on @-name vs. respective website
- even better: persistently cache rel-me verified @-name + website pairs on your indieweb server
- e.g. @t ->
Hovering on an @-name shows:
- full name
- location from profile
- "more..." link
- follow button
Clicking "more..." link shows in addition:
- website URL
- latest tweet
- stats: tweets, following, followers
These are nearly all hCard related features which we can use microformats2 h-card to easily upgrade the above auto-linkify markup :
- <a class="h-card" href="http://tantek.com">Tantek Çelik</a>
the hCard indicates that the link is a person with properties:
- url: http://tantek.com
- name: Tantek Çelik
indiehovercard.js implementation outline:
- for all hCards:
- go get the representative hCard from the url
- from that rep hCard, get:
- updated full name
- location (via adr / geo / or street-address/locality/region/country-name)
- bio (via note)
- latest post (p-name of most recent h-entry on that URL)
- stats? punt on this for now. question why each of these stats is interesting at all (# of tweets? how is that useful. # following, what does that really mean in an indieweb scenario? # followers, is that even possible to determine in a fully distributed system?)
- attach handlers to all .h-card elements to hover / first-tap show hovercard
- mimic display / styling of Twitter hovercards (perhaps consider FB hovercards also)
Similarly on Facebook, their "hovercards" (when you hover over hyperlinked full names) shows you
- cover photo
- full name
- # of mutual friends that the reader and that link have in common
- 5 hyperlinked avatars of those friends
- mini-hovercard on those avatars that just popup and display their full name
Wordpress.com Blogs have Hovercards screenshot
- Profile Photo
- Nice border
- the Reply links are some kind of z-index bug
- Note ability to turn hovercards off
indiehovercard.js could get mutual friends using XFN.