The Indie Web Movement

Nicolai Schwarz, textformer mediendesign

The Indie Web Movement

Improvised by Nicolai Schwarz, Drupalcamp Berlin, November 2014

textformer.de/slides/dcb14

Logo

indiewebcamp.com

Content. Longevity. Blog.

Own your content!

What's going on?

What's going on?

Chances are you are doing it wrong.

What's going on?

Chances are you are doing it wrong.

Well, maybe not wrong, but you can do it better.

Good Old Days

Past
Everybody had his own blog, commented on other blogs, blogroll

Good Old Days

Past
Everybody had his own blog, commented on other blogs, blogroll
Today
Facebook, Twitter, Google+, Tumblr, Flickr, FourSquare
bsp1
bsp1
bsp1

Good Old Days

Past
Everybody had his own blog, commented on other blogs, blogroll
Today
Facebook, Twitter, Google+, Tumblr, Flickr, FourSquare
Future?
Indie Web Movement / Own your content!

Here today, Gone tomorrow

bsp1
bsp1

Here today, Gone tomorrow

Rest In Peace

2000: PlanetAll

2001: SixDegrees.com, Desktop.com

2008: AOL Hometown, Consumating.com

2009: Ma.gnolia.com, Pownce.com, Dodgeball.com, Microsoft Popfly, Geocities.com, Haloscan, Radio Userland

2010: Twine, Etherpad.com, icanhaz.com, Vox, Cliqset, Brightkite

2011: YIID, Google Base, Google Real-Time Search, tr.im, Google Buzz

Rest In Peace

2012: Google Friend Connect, Gowalla, Google Wave, Google Knol, Tabblo, Apple MobileMe Gallery, iDisk, iWeb, Plazes, picplz, KLIK, DailyBooth, Batch.com, Twistory, Yahoo! Messenger Public Chat Rooms, Yahoo! Messenger Pingbox, Yahoo! Messenger interoperability with Microsoft Windows Live Messenger

Rest In Peace

2013: Mixel, EveryBlock.com, Posterous.com, Upcoming.org, Myspace.com User blogs, Yahoo! Neighbors Beta, Snapjoy, Lavabit, Silent Circle, Google Latitude, Alice.com, Yahoo! Local API, Yahoo! Astrid, GeoURL, .Net Magazine, Yahoo! Term Extraction API, DarQroom, Dopplr, iGoogle, Sold, Everpix, HipGeo, ClaimID

Rest In Peace

2014: Ptch, Donna by Incredible Labs, Vizify, Zootool.com, Qik, Editorially, Spreadly, Ubuntu One, Justin.tv, Codespaces.com, Springpad, Repost.us, Readmill, Fotopedia, markbox.io, Ohlife.com

Own Your Own Data

is one of the principles of the IndieWeb and is an encouragement to always post content directly to your own domain with permalinks that you control instead of posting to silos.

Why?

POSSE

is an acronym/abbreviation for Publish (on your) Own Site, Syndicate Elsewhere.

POSSE lets your friends keep using whatever silo aggregator (Facebook, Twitter, etc.) they've been using to read your stuff.

It's a key part of why and how the "IndieWeb" movement is different from just "everyone blog on their own site", and also different from "everyone just install and run StatusNet/Diaspora" etc.

POSSE distribution

You can of course post manually to Twitter, Facebook, Google Plus, Medium, WordPress


The preferred way is to do it automatically with permalinks to your content.

POSSE distribution with Drupal

There are modules for this.

Twitter, , TweetRSS, Facebook Autopost


But you probably want to build your own solution, based on your own needs.

SEO: Duplicate posts?

That's why the POSSE copies SHOULD always link back to the originals. So that search engines can infer that the copies are just copies. Ideally POSSE copies on silos should use rel-canonical to link back to the originals, but even without explicit rel-canonical, the explicit link back to the original is a strong hint that it is an original.

PESOS

is an acronym/abbreviation for Publish Elsewhere, Syndicate (to your) Own Site.

It's a Syndication Model where publishing flow starts with posting to 3rd party services, then using some infrastructure (e.g. feeds, pingbacks, webhooks) to create an archive copy under your domain.

PESETAS

is an acronym/abbreviation for Publish Elsewhere, Syndicate Everything To A Silo.

It's a Syndication Model where publishing flow starts with posting to 3rd party services, then using some settings/infrastructure (e.g. share settings, feeds, pingbacks, webhooks) to create an archive copy at one particular silo.

POSSE

is better than

PESOS

is better than

PESETAS

CRUD

Create
obviously
Read
sure
Update
Nope. Twitter (delete/post again)
Delete
Depends on the silo, usually yes.

Backfeed

is the process of syndicating interactions on your POSSE copies back (AKA reverse syndicating) to your original posts.

Port likes and comments back to your own blog.

Backfeed: Twitter

Twitter APIs to use for getting @-replies etc. on Twitter to your Twitter POSSE copies:

  • Search for DOMAIN filter:links with result_type=recent. Only returns recent results, but otherwise works ok.
  • There's no official way to get replies to a given tweet. If it's not too old, though, you can search for @-mentions of the original tweet's author, then look through the results for any whose in-reply-to field points to the original tweet.
  • Otherwise, there's the unreliable, unofficial 'related_results' endpoint.

Backfeed: Facebook

Facebook has a lot of APIs.

  • FQL makes this surprisingly easy. For example, here's a query to get all comments on the posts from a given user with links in them:
    SELECT post_fbid, time, fromid, username, object_id, text FROM comment WHERE object_id IN (SELECT link_id FROM link WHERE owner = USER_ID) ORDER BY time DESC
  • Also the OBJECT_ID/likes and OBJECT_ID/comments connections
  • API is sometimes slow. Most backfeed solutions will/should poll in offline processes though, so they won't usually block end user requests.

Backfeed: Flickr

Flickr has direct APIs for this:

Feedback from other sources

What if someone writes a comment or follow up to my article on his own blog?

Webmention

is a simple way to notify any URL when you link to it on your site. From the receiver's perspective, it's a way to request notifications when other sites link to it.


Webmention is a modern update to Pingback, using only HTTP and x-www-urlencoded content rather than XMLRPC requests. Webmention supersedes Pingback.

Webmention

  1. Alice posts a blog post on her blog.

Webmention

  1. Bob's server sends a webmention to Alice's post's webmention endpoint with a) source set to Bob's post's permalink and b) target set to Alice's post's permalink.

Webmention

  1. Alice's server verifies that the source (when retrieved, after following redirects) in the webmention contains a hyperlink to the target (if not, processing stops).

Sending a webmention

A webmention is just a form-encoded HTTP POST request, the same kind of request as is sent when you submit most forms on the web.

			POST /webmention-endpoint HTTP/1.1
Host: alice.host
Content-Type: application/x-www-url-form-encoded

source=http://bob.host/post-by-bob&target=http://alice.host/post-by-alice

See: Webmention: an introduction for developers

Webmention endpoint discovery

Websites can list their webmention endpoints in a number of ways:

  • An HTTP Link: header, which looks something like:
    Link: http://alice.host/webmention-endpoint>; rel="webmention"
  • A link tag in the header of the page HTML
    <link rel="webmention" href="http://adactio.com/webmention.php" />
  • An anchor tag in the body of the page HTML

Webmention endpoint discovery

Note that in each case, a tag has a "rel" relation attribute with the value "webmention". This tells an HTML parser that the link in the tag is a webmention endpoint.

If you're sending webmentions, you need to look for all of these places. Some webmention clients also check for a "rel" value of http://webmention.org/, which was used in an older version of the protocol specification.

Microformats

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.


See: microformats.org

Microformat: h-card (minimal)

			<a class="h-card" href="http://nicolaischwarz.de">Nicolai Schwarz</a>
		

Microformat: h-card

			<p class="h-card">
  <img class="u-photo" src="http://nicolaischwarz.de/me.jpg" alt="" />
  <a class="p-name u-url" href="http://nicolaischwarz.de">Nicolai Schwarz</a>
  <a class="u-email" href="mailto:news@nicolaischwarz.de">news@nicolaischwarz.de</a> 
  <span class="p-street-address">Wißstraße 30/32</span>
  <span class="p-locality">Dortmund</span>
  <span class="p-country-name">Germany</span>
  </p>

Microformat: h-entry

		<article class="h-entry">
    <h1 class="p-name">Microformats are amazing</h1>
    <p>by <a class="p-author h-card" href="http://example.com">W. Developer</a>
on <time class="dt-published" datetime="2014-11-16 14:15:00">16. November 2014</time>
<p class="p-summary">In which I extoll the virtues of using microformats.</p> <div class="e-content"> <p>Blah blah blah</p> </div> </article>

Webmention scripts

There are scripts for PHP, Perl, Python, Node.js


See: indiewebcamp.com/Webmention

Webmention in Drupal?

The best place might be the module Vinculum, which aims to be the Drupal 7 replacement for pingback and trackback. There is a feature request to implement webmention.


But: Vinculum is not usable at the moment.

Getting started

IndieAuth

is a way to use your own domain name to sign in to websites. It's like OpenID, but works with services you likely already use, and is much easier to setup.

IndieAuth is an implementation of web sign-in and additional sign-in methods - TOTP (Time-based One-time Password), email (via Persona), GPG (GNU Privacy Guard, PGP).

IndieAuth

IndieAuth is part of taking back control of your online identity. Instead of logging in to websites as "you on Twitter" or "you on Facebook", you should be able to log in as just "you". We should not be relying on Twitter or Facebook to provide our authenticated identities, we should be able to use our own domain names to log in to sites everywhere.

IndieAuth - Setup

  • Add a link on your home page to your various social profiles with the attribute rel="me"
  • Ensure your profiles link back to your home page
  • Enter your domain in a "Web Sign-In" box to being using your own domain as your online identity!

Works with profiles on Twitter, Google+, Github, Flickr, App.net. Or Persona (email-address). Or SMS.

Tools

Bridgy

Bridgy is a service that pulls comments, likes, and reshares on social networks back to your web site. You can also use it to post to social networks - or comment, like, reshare, or even RSVP - from your own web site.

Indiewebifyme

A guide to getting you on the IndieWeb

Known

Create your space for sharing content and discussing ideas. Examples

Indie Tech

Pulse
replaces proprietary sync and cloud services with something open, trustworthy and distributed
Heartbeat
is a social network client that is private by default. It’s peer-to-peer and uses a distributed synchronisation engine called Pulse.
Project Stratosphere
is a multi-year project that will culminate in the release of an independent smartphone.
Logo

indiewebcamp.com