The web is my social network

How I use WordPress to create the social platform I want
(and you can too!)

Chris Aldrich | www.boffosocko.com

Slides at https://boffosocko.com/wordpress-and-indieweb/

WordCamp Riverside | Saturday, November 3, 2018
#WCRS18   |   #IndieWeb | This work is licensed under a Creative Commons Attribution 4.0 International License.

Who uses the following?

  • Twitter
  • Facebook
  • Instagram
  • Snapchat
  • LinkedIn
  • Mastodon
  • Swarm
  • Google+
  • Pinboard
  • Pocket
  • Flickr

Does anyone really like them?

What do these sites do that WordPress can’t do?

  • Twitter
  • Facebook
  • Instagram
  • Snapchat
  • LinkedIn
  • Mastodon
  • Swarm
  • Google+
  • Pinboard
  • Pocket
  • Flickr

Why don’t we just use WordPress?

What’s the real difference? What are social sites really?

  • 5% posting interface
  • 95% reader interface

Benefits

  • Ease of use
  • Clean user interfaces
  • Network effects

Telephone analogy

History of the Web and Blogosphere

  • Iteratively built
  • Standards
  • WordPress: Democratize Publishing
  • Something happened in 2006-2007

Corporations

  • Own Your Data
  • Misuse your data
  • Leak your data
  • Keep or delete your data
  • They work for themselves and not for you
  • Growing lethargy and lack of competition

Algorithms

  • can be toxic
  • no control over them
  • no control over bias
  • monitization
  • gamification
  • dopamine response

Site Deaths

https://indieweb.org/site-deaths

  • Short, if any notice
  • Data disappears
  • Community disappears
  • Connections disappear

Site Death Watch Examples

Flickr
Independent -> Yahoo -> Smugmug
On Thursday they announced switch from unlimited data to 1000 photos without paid account

Google+
Announced this month they’re sun-setting in August 2019

Site Death Examples

Storify
del.icio.us
App.net
Orkut
My Space
Friendster
Shelfari
Plancast
FriendFeed
Dopplr
Google Reader
Posterous
Google Buzz
Geocities

IndieWeb

IndieWeb Why

Why have your own website?

  • Control and agency
  • Better UI and UX
  • Freedom
  • More empowering
  • More author centric
  • More robust
  • Reach more people
  • Emotional Support

IndieWeb Why (continued)

Avoiding problems

  • Content loss
  • Unreliability
  • Identity loss
  • Site loss
  • Censorship
  • Content theft
  • Content And Identity Abuse
  • Personalisation/filter bubble
  • Negative community
  • Content lockdown

IndieWeb Principles

  • ✊ Own your data. Your content, your metadata, your identity.
  • 🔍 Use & publish visible data for humans first, machines second.
  • 💪 Scratch Your Own Itches. Make tools, templates, etc. for yourself first, not for all of your friends or ”everyone“. If you design for some hypothetical user, they may not actually exist; if you make for yourself, you actually do exist. Make something that satisfies your needs, and is compatible for others, e.g. by practicing POSSE, you benefit immediately, while staying connected to friends, without having to convince anyone. If and when others join the indieweb, you all benefit.
  • 😋 Use what you make! Whatever you build you should actively use. If you aren’t depending on it, why should anybody else?
  • 📓 Document your stuff. You’ve made a place to speak your mind, use it to document your processes, ideas, designs and code. Help others benefit from your journey, including your future self!
  • 💞 Open source your stuff!
  • 📐 UX and design is more important than protocols, formats, data models, schema etc. We focus on UX first, and then as we figure that out we build/develop/subset the absolutely simplest, easiest, and most minimal protocols & formats sufficient to support that UX, and nothing more.

IndieWeb Principles (continued)

  • 🌐 Build platform agnostic platforms. The more your code is modular and composed of pieces you can swap out, the less dependent you are on a particular device, UI, templating language, API, backend language, storage model, database, platform.
  • 🗿 Longevity. Build for the long web. If human society is able to preserve ancient papyrus, Victorian photographs and dinosaur bones, we should be able to build web technology that doesn’t require us to destroy everything we’ve done every few years in the name of progress.
  • ✨ Plurality. With IndieWebCamp we’ve specifically chosen to encourage and embrace a diversity of approaches & implementations. This background makes the IndieWeb stronger and more resilient than any one (often monoculture) approach.
  • 🎉 Have fun. Remember that GeoCities page you built back in the mid-90s? The one with the Java applets, garish green background and seventeen animated GIFs? It may have been ugly, badly coded and sucky, but it was fun, damnit. Keep the web weird and interesting.

IndieWeb How

  • Own your own domain
  • Own your data
  • Web standards
  • W3C involvement
  • Democratizing Social

IndieWeb for WordPress

IndieWeb Plugin

Helps you establish your IndieWeb identity by extending the user profile to provide rel-me and h-card fields. It also includes a bundled installer for a core set of IndieWeb-related plugins.

WordPress Repository  |  GitHub Repository

h-card

<p class="h-card">
<img class="u-photo" src="http://example.org/photo.png" alt="" />
<a class="p-name u-url" href="http://example.org">Maria Blogger</a>
<a class="u-email" href="mailto:mariablogger@example.com">mariablogger@example.com</a>,
<span class="p-street-address">17 Austerstræti</span>
<span class="p-locality">Reykjavík</span>
<span class="p-country-name">Iceland</span>
</p>

h-card Visual Example

rel=”me”

XFN 1.1 introduced the “me” rel value which is used to indicate profile equivalence and for identity-consolidation.

Example from my personal homepage:

<a href="https://twitter.com/chrisaldrich" rel="me">@chrisaldrich</a>

Example from my Twitter profile:

<a href="https://boffosocko.com/">www.boffosocko.com</a>

This can be used as a means of distributed identity verification.

Webmention

Illustration by Dougal MacPherson courtesy of A List Apart ©2018

Webmention Model

Webmention for WordPress

Webmention Plugin
WordPress Repository  |  GitHub Repository

Semantic Linkbacks Plugin
WordPress Repository  |  GitHub Repository

Microformats

  • v1 vs v2
  • vs Schema.org and JSON-LD
  • parsers
Spam prevention

Home page set up for Mentions

Overview article: Webmentions: Enabling Better Communication on the Internet

Sending your First Webmention from Scratch by Aaron Parecki

Brid.gy

https://brid.gy

  • Backfeed: Brid.gy bootstraps Twitter, Google+, Instagram, GitHub, and Flickr’s APIs to provide responses from social media silos back to your website.
    It’s extensible so other services like LinkedIn, Pinterest, Mastodon, etc. could easily be added.
  • Publish: Has a service that can be simply leveraged to syndicate your content to social silos like Twitter using Webmention

Post Kinds Plugin

Think about this as Post Formats on acid
WordPress Repository  |  GitHub Repository

Provides support for the following types of posts:
Article, Note (aka Status Update), Photo, Video, Audio
Reply, Repost, Like, Favorite, Bookmark, Quote, RSVP, Check-In, Issue
Listen/scrobble, Jam, Watch, Play, Read

Future support for kinds: Wish, Weather, Exercise, Trip, Itinerary, Tag, Eat, Drink, Follow, Mood, Recipe, Event, Sleep, Acquisition, Question

Flexibility to add or modify types to suit individual needs

Can add the context above or below your response to be more like Facebook and others.

Syndication

POSSE is an abbreviation for Publish (on your) Own Site, Syndicate Elsewhere

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

These methods will allow you to keep in touch until friends/family on corporate social silos until they can follow your lead.

Plugins that can be used to syndicate content easily:

  • Jetpack
  • NextScript Auto Poster (SNAP)
  • Brid.gy Publish Plugin
  • Syndication Links Plugin
  • WordPress CrossPost
  • Many others

Syndication Links Plugin

Provides fields to indicate where particular posts on your site were syndicated to.

WordPress Repository  |  GitHub Repository

Uses:

  • in case you forget
  • business use
  • following conversation
  • markup (u-syndication) to help Brid.gy properly send backfeed for syndicated posts

IndieAuth Plugin

WordPress Repository  |  GitHub Repository

Wouldn’t you like to use your own domain name and web identity to log into other sites and services as yourself instead of delegating it to Twitter, Facebook, or giving away your email address?

Authorization endpoint looks like the following:
<link rel="authorization_endpoint" href="https://boffosocko.com/wp-json/indieauth/1.0/auth" />
<link rel="token_endpoint" href="https://boffosocko.com/wp-json/indieauth/1.0/token" />

Micropub Plugin

Micropub is an open API standard (W3C Recommendation) that is used to create, update, and delete posts on one’s own domain using third-party clients. Web apps and native apps (e.g. iPhone, Android) can use Micropub to post and edit articles, short notes, comments, likes, photos, events, or other kinds of posts to your own site.

WordPress Repository  |  GitHub Repository

Remember all those old Twitter clients?

Could be leveraged for quick import and export of data to and from websites.

Great tool for developers and agencies to build custom, minimal, and clean user interfaces for clients to interact easily with their websites.

Micropub Example: Quill

Micropub Example: Micropublish.net

Micropub Example: Omnibear

Micropub Example: OwnYourSwarm

Microsub

Microsub provides a standardized way for reader apps to interact with feeds. By splitting feed parsing and displaying posts into separate parts, a reader app can focus on presenting posts to the user instead of also having to parse feeds. A Microsub server manages the list of people you’re following and collects their posts, and a Microsub app shows the posts to the user by fetching them from the server.

Servers: Aperture, Yarns (a WordPress-based server)

Clients: Monocle, Together, Indigenous (iOS/Android), Eckster

Future

Developers

  • Gutenberg integration
  • Private Webmentions
  • Communication with groups/private groups/geofencing
  • Vouch protocol and spam control
  • Apps for Micropub and Microsub
  • Parsers and tools
  • Bridging the Fediverse and ActivityPub protocols

Future (continued)

Designers/Themers

  • More themes
  • Improved UI and interactions within the space
  • Microsub readers
  • Fixing microformats v2 side files for non-compliant themes

Future (continued)

Providers / Businesses

  • micro.blog is an interesting example

Discovery/Aggregation

  • Using some of these tools to provide better discovery and aggregation
  • news.indieweb.org

    • a Reddit-like news site that aggregates content via Webmention

  • indieweb.xyz

WordPress related IndieWeb Resources

IndieWeb.org website & wiki: https://indieweb.org/

IndieWeb Chat: https://chat.indieweb.org/indieweb/

IndieWeb #WordPress Channel: https://chat.indieweb.org/wordpress/

Getting started on WordPress: https://indieweb.org/Getting_Started_on_WordPress

IndieWeb for WordPress articles/research: https://boffosocko.com/research/indieweb/

Contact Me

 

 

Chris Aldrich

chris@boffosocko.com
https://www.boffosocko.com

 
Slides at https://boffosocko.com/wordpress-and-indieweb/