De-Mystifying IndieWeb on a WordPress Site

My recent post about IndieWeb sparked a helpful conversation with David Shanske, who generously offered assistance in understanding this often-confusing concept. This post summarizes our discussion and clarifies the key components of IndieWeb implementation on WordPress.

Understanding the IndieWeb Jargon

The term "IndieWeb" itself is a source of confusion. Is it a framework, a philosophy, or a set of standards? The answer, it turns out, is all three. However, a clearer understanding emerges when viewing it as a collection of protocols, similar to structured data or OpenGraph markup. There's no single piece of software to install; rather, it's about adhering to specific standards for integration.

Your online identity is central to IndieWeb. Your website becomes your identity hub, enabling functionalities such as:

• Notifying other IndieWeb sites when you're mentioned.
• Receiving notifications when you're mentioned elsewhere.
• Retrieving and displaying information from mentions.
• Authenticating your identity via your website (similar to a Google sign-in, but self-hosted).

This is an enhanced version of pingbacks, offering greater robustness and maintainability.

Implementing IndieWeb on WordPress: A Simpler Approach

WordPress simplifies IndieWeb integration significantly compared to static sites. As David explains, WordPress offers "building blocks" – plugins – that implement IndieWeb protocols. This contrasts with the more hands-on approach required for static sites.

The core plugin establishes your online identity. It primarily provides an h-card template and widget. The h-card is a markup for personal or location information, often included on websites anyway. While manually adding this markup to your theme is possible, the plugin offers a convenient pre-built solution.

Here's an example of h-card markup (from Microformats2 documentation):

<code><div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183535434329.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="photo of Mitchell"><a href="https://www.php.cn/link/dbe1a0a2c9bd9241b3499318bf96f756">Mitchell Baker</a>
 (<a href="https://www.php.cn/link/ebbb5ccb88b2cd2e2224917a325f903b">@MitchellBaker</a>)
  Mozilla Foundation
  <p>
    Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities.
  </p>
  Strategy
  Leadership
</div></code>

Note the classes like .h-card, u-photo, p-name, etc., which provide contextual meaning parsed as JSON:

<code>{
  "items": [{ 
    "type": ["h-card"],
    "properties": {
      "photo": ["https://img.php.cn/upload/article/000/000/000/174183535434329.jpg"],
      "name": ["Mitchell Baker"],
      "url": [
        "https://www.php.cn/link/dbe1a0a2c9bd9241b3499318bf96f756",
        "https://www.php.cn/link/ebbb5ccb88b2cd2e2224917a325f903b"
      ],
      "org": ["Mozilla Foundation"],
      "note": ["Mitchell is responsible for setting the direction and scope of the Mozilla Foundation and its activities."],
      "category": [
        "Strategy",
        "Leadership"
      ]
    }
  }]
}</code>

The plugin doesn't handle sending, receiving, or parsing; it solely provides identity verification markup.

Microformats and Theme Compatibility

"Microformats" are a method for marking up HTML to identify elements. The problem is that many WordPress themes lack Microformats support, which is where the Microformats2 plugin helps. However, this plugin has limitations, and manual theme markup is often recommended. Future Webmention plugin updates aim to improve this by leveraging OpenGraph and the WordPress REST API.

Webmentions, Semantic Linkbacks, and Brid.gy

The Webmention plugin handles sending and receiving notifications (webmentions). Semantic Linkbacks, a separate plugin (potentially integrated into future Webmention updates), fetches, formats, and displays webmention data using Microformats. Brid.gy offers a simpler alternative, providing pre-built API integrations for services like Twitter and Facebook, streamlining the process of receiving and displaying interactions.

Additional Key Plugins

• IndieAuth: Provides self-hosted authentication, creating your own version of a Google sign-in button.
• Micropub: Allows publishing content via alternative editors using Microformats2.
• Simple Location: (Developed by David) Integrates location data into posts, enabling features like weather displays and location-based archives.

The Revised Workflow

(A visual representation of the workflow would be beneficial here, but cannot be provided by this text-based model.)

This explanation hopefully clarifies the components and processes involved in IndieWeb implementation on WordPress. Further questions or discussions are welcome!

The above is the detailed content of De-Mystifying IndieWeb on a WordPress Site. For more information, please follow other related articles on the PHP Chinese website!