POSSE & Bridgy Integration

Implementation guide for Publish Own Site, Syndicate Everywhere (POSSE) methodology using Bridgy and webmentions to syndicate blog content to social media platforms.

Overview

The Phenom App blog implements the POSSE (Publish Own Site, Syndicate Everywhere) methodology to maintain content ownership while distributing posts across social media platforms. This approach ensures the website remains the canonical source of truth while reaching audiences on their preferred platforms.

What is POSSE?

POSSE is a content publishing strategy where:

  1. Content is published first on your own domain (www.thephenom.app)
  2. Content is automatically syndicated to social platforms (Twitter, Mastodon, etc.)
  3. Social interactions flow back to the original post via webmentions
  4. Ownership remains with the author - not platforms

Architecture

Logan writes markdown
       ↓
AI converts to HTML (with microformats)
       ↓
Deploy to Cloudflare Pages
       ↓
Bridgy polls RSS feed
       ↓
Auto-posts to Twitter/Mastodon
       ↓
Social comments → Webmention.io → Blog

Technology Stack

Core Services (All Free)

ServicePurposeCost
Cloudflare PagesStatic site hostingFree
BridgySocial media syndicationFree
Webmention.ioComment aggregationFree
Microformats2Semantic HTML markupFree (standard)

1. Cloudflare Pages

2. Bridgy (https://brid.gy)

  • Monitors RSS feed for new posts
  • Syndicates to connected social platforms
  • Adds syndication links back to posts
  • Polls feed every 30 minutes

3. Webmention.io (https://webmention.io)

  • Collects webmentions from social media
  • Provides API to fetch interactions
  • Aggregates comments, likes, retweets

4. Microformats2 (http://microformats.org)

  • Semantic HTML markup standard
  • Makes posts machine-readable
  • Enables Bridgy to parse content

Implementation Phases

Phase 1: Microformats Markup ✅ [Issue #50]

Add semantic HTML classes to blog posts:

<article class="h-entry">
  <h1 class="p-name">Post Title</h1>
  <time class="dt-published" datetime="2026-01-16">January 16, 2026</time>

  <div class="p-author h-card">
    <img class="u-photo" src="/assets/images/logan-avatar.jpg" alt="Lenval Logan">
    <span class="p-name">Lenval Logan</span>
    <a class="u-url" href="https://www.thephenom.app/about.html">Profile</a>
  </div>

  <div class="e-content">
    <!-- Blog post content -->
  </div>

  <div class="syndication">
    <a class="u-syndication" href="https://twitter.com/...">View on Twitter</a>
  </div>
</article>

Key Microformat Classes:

  • h-entry - Post container
  • p-name - Title
  • dt-published - Publication date
  • h-card - Author info
  • e-content - Content
  • u-syndication - Social links

Validation:

Phase 2: Webmention Support ✅ [Issue #51]

Add webmention endpoint discovery:

<head>
  <link rel="webmention" href="https://webmention.io/thephenom.app/webmention" />
  <link rel="pingback" href="https://webmention.io/thephenom.app/xmlrpc" />
</head>

Setup Steps:

  1. Sign up at https://webmention.io with GitHub account
  2. Verify domain ownership (add rel="me" link)
  3. Get API key for fetching mentions
  4. Add endpoint links to all blog posts

Phase 3: Social Comment Display ✅ [Issue #52]

JavaScript component to fetch and display webmentions:

// Fetch webmentions for current post
async function fetchWebmentions(postUrl) {
  const response = await fetch(
    `https://webmention.io/api/mentions.jf2?target=${encodeURIComponent(postUrl)}`
  );
  const data = await response.json();
  return data.children || [];
}

// Render different mention types
function renderWebmentions(mentions) {
  const container = document.getElementById('webmentions');

  mentions.forEach(mention => {
    const mentionType = mention['wm-property'];

    if (mentionType === 'in-reply-to') {
      // Render reply with author, content, link
    } else if (mentionType === 'like-of') {
      // Render like with author avatar
    } else if (mentionType === 'repost-of') {
      // Render retweet/share
    }
  });
}

Features:

  • Display comments from Twitter, Mastodon, etc.
  • Show author avatars and names
  • Link back to original posts
  • Group by interaction type (replies, likes, shares)

Phase 4: RSS Feed Generation ✅ [Issue #53]

Create RSS feed for Bridgy monitoring:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>The Phenom App Blog</title>
    <link>https://www.thephenom.app/blog.html</link>
    <description>UAP Research and The Phenom App Updates</description>

    <item>
      <title>We Will Collaborate to Graduate</title>
      <link>https://www.thephenom.app/blog/welcome-to-phenom-blog.html</link>
      <pubDate>Wed, 15 Jan 2026 00:00:00 GMT</pubDate>
      <guid>https://www.thephenom.app/blog/welcome-to-phenom-blog.html</guid>
      <content:encoded><![CDATA[
        <!-- Full HTML content with microformats -->
      ]]></content:encoded>
    </item>
  </channel>
</rss>

RSS Discovery:

<head>
  <link rel="alternate" type="application/rss+xml"
        title="The Phenom App Blog"
        href="/feed.xml">
</head>

Phase 5: Bridgy Configuration ✅ [Issue #54]

Configure Bridgy for automatic syndication:

  1. Go to https://brid.gy
  2. Sign in with social media accounts
  3. Enable “Publish” for each platform
  4. Configure feed URL: https://www.thephenom.app/feed.xml
  5. Bridgy polls every 30 minutes for new posts
  6. Test with “Retry” button on dashboard

Publishing Workflow

Step-by-Step Process

  1. Write Content

    # Logan writes in markdown
vim blog-posts/my-new-post.md

  2. Convert to HTML

    # Claude Code converts with microformats
# Creates web/blog/my-new-post.html

  3. Update RSS Feed

    # Add new post to feed.xml
vim web/feed.xml

  4. Deploy via Workflow

    # Follow standard GitHub workflow
git checkout -b feature/XX-new-blog-post
git add web/blog/my-new-post.html web/feed.xml
git commit -m "feat: Add new blog post"

# Deploy to testing server
./scripts/deploy-to-dockerhub.sh

# Get user approval
# Create PR and merge to main

  5. Automatic Syndication

    • Cloudflare Pages deploys to production
    • Bridgy polls RSS feed (within 30 minutes)
    • Detects new post with microformats
    • Posts to Twitter, Mastodon, etc.
    • Adds syndication links back to blog post

  6. Social Interactions

    • Users reply/like/retweet on social media
    • Social platforms send webmentions to webmention.io
    • JavaScript fetches and displays interactions on blog
    • Comments appear on original blog post

Required Microformats Reference

Minimal Required Structure

Every blog post must include:

<article class="h-entry">
  <h1 class="p-name">Post Title</h1>
  <time class="dt-published" datetime="YYYY-MM-DD">Date</time>
  <div class="p-author h-card">
    <span class="p-name">Lenval Logan</span>
  </div>
  <div class="e-content">
    Post content...
  </div>
</article>

Optional Enhancements

<!-- Categories/Tags -->
<a class="p-category" href="/blog/tag/uap">UAP</a>

<!-- Location -->
<span class="p-location">Washington, D.C.</span>

<!-- Summary -->
<p class="p-summary">Brief post description</p>

<!-- In-reply-to (for responses) -->
<a class="u-in-reply-to" href="https://example.com/post">In reply to</a>

Validation and Testing

Microformats Validation

RSS Feed Validation

Webmention Testing

  • Tool: https://webmention.rocks/
  • Process: Test suite for webmention implementations
  • Check: Endpoint discovery, mention receiving

Bridgy Testing

  1. Go to Bridgy dashboard
  2. Click “Retry” on test post
  3. Verify syndication to social media
  4. Check u-syndication links added to post
  5. Confirm comments flow back via webmentions

Troubleshooting

Bridgy Not Syndicating

Problem: New posts not appearing on social media

Solutions:

  1. Verify RSS feed is valid (W3C validator)
  2. Check microformats present (IndieWebify.me)
  3. Review Bridgy dashboard for errors
  4. Manually click “Retry” on dashboard
  5. Ensure feed.xml updated with new post
  6. Check social account connections in Bridgy

Webmentions Not Displaying

Problem: Social comments not showing on blog

Solutions:

  1. Verify webmention endpoint in HTML <head>
  2. Check webmention.io dashboard for received mentions
  3. Test API URL manually: https://webmention.io/api/mentions.jf2?target=POST_URL
  4. Review JavaScript console for errors
  5. Verify CORS headers allow API requests
  6. Check network tab for failed requests

Problem: u-syndication links not on blog post

Solutions:

  1. Bridgy adds these automatically after posting
  2. Wait 5-10 minutes after syndication
  3. Check Bridgy dashboard for syndication status
  4. Verify post has h-entry markup
  5. Manually add links if needed (not ideal)

Benefits of POSSE

Content Ownership

  • Your domain is the canonical source
  • Content persists even if platforms shut down
  • Full control over presentation and formatting
  • Independent of social media algorithms

Platform Independence

  • Not locked into any single platform
  • Can switch or add platforms without losing content
  • Own URL structure and permalinks
  • Data portability

Broader Reach

  • Automatically reach audiences on multiple platforms
  • Users see content where they prefer
  • Cross-platform visibility
  • Increased engagement opportunities

Unified Interactions

  • All comments collected in one place
  • Display interactions on your site
  • Historical record of engagement
  • Better community building

GitHub Issues

Track POSSE implementation progress:

  • Issue #50: Add microformats to blog posts
  • Issue #51: Add webmention support
  • Issue #52: JavaScript component for comments
  • Issue #53: Generate RSS feed
  • Issue #54: Configure Bridgy accounts

External Resources

Documentation

Services

Examples in Production

Future Enhancements

Potential Additions

  1. Micropub API: Enable third-party posting tools
  2. IndieAuth: Decentralized authentication for comments
  3. Reply Syndication: Reply on blog, syndicate to social media
  4. Private Posts: Authentication for sensitive content
  5. Rich Post Types: Notes, photos, videos beyond articles
  6. Multi-language: Syndicate in multiple languages
  7. Analytics: Track engagement across platforms

Advanced Features

  • Backfeed Likes/Retweets: Display as separate sections
  • Author Avatars: Fetch from social profiles
  • Thread Handling: Display reply chains
  • Moderation: Filter spam webmentions
  • Notifications: Email when new comments arrive

Security Considerations

API Keys

  • Store Bridgy credentials in password manager
  • Never commit API keys to repository
  • Use environment variables for local development

Webmention Spam

  • Webmention.io includes spam filtering
  • Additional moderation may be needed
  • Consider manual approval for first comment

CORS and CSP

  • Ensure Content Security Policy allows webmention.io API
  • Configure CORS headers if needed
  • Test API requests in production environment

Maintenance

Regular Tasks

  1. Monitor Bridgy: Check dashboard weekly for errors
  2. Review Webmentions: Moderate comments as needed
  3. Update Feed: Ensure RSS feed includes all posts
  4. Test Syndication: Verify new posts syndicate correctly
  5. Validate Markup: Periodically check microformats

When Adding New Posts

  1. Include all required microformats
  2. Update feed.xml with new post
  3. Validate microformats before deployment
  4. Test on staging server first
  5. Monitor Bridgy for successful syndication

Support

For questions or issues with POSSE integration: