<
Author

Sir Panda

Webmentions Integration Guide for Less Likely

What are Webmentions?

Webmentions are a W3C standard for decentralized social interactions on the web. When someone mentions your content on their site, social media (via bridges like Brid.gy), or other platforms, you can receive and display these mentions on your site.

Setup Complete

Your Less Likely site now has webmentions fully configured! Here’s what has been set up:

✅ Files Created

  1. /my-quarto-site/webmention.js - JavaScript to fetch and display webmentions
  2. /my-quarto-site/webmention.css - Styling for webmention display
  3. /my-quarto-site/_webmentions.html - Reusable include file for posts
  4. /my-quarto-site/post-template-with-webmentions.qmd - Template for new posts

✅ Configuration Updated

  • include-in-header.html - Added webmention CSS stylesheet
  • Already configured:
    • Webmention.io endpoint: https://webmention.io/lesslikely.com/webmention
    • Pingback endpoint: https://webmention.io/lesslikely.com/xmlrpc

How to Use

Option 2: Add Globally to All Posts

Update your _quarto.yml to include webmentions on all posts:

format:
  html:
    theme: cosmo
    css: styles.css
    include-in-header: include-in-header.html
    include-after-body: _webmentions.html  # Add this

Option 3: Manual Include

Add directly in any .qmd file at the bottom:

## Your Content

...

Customization Options

Modify Display Settings

Edit /my-quarto-site/_webmentions.html to customize:

<script src="/webmention.js" 
        data-page-url=""           <!-- Auto-detects current page -->
        data-id="webmentions"      <!-- Container ID -->
        data-wordcount="50"        <!-- Max words in comments -->
        data-max-webmentions="50"  <!-- Max mentions to fetch -->
        data-sort-by="published"   <!-- Sort field -->
        data-sort-dir="down"       <!-- 'up' for oldest first, 'down' for newest -->
        async>
</script>

Styling

Edit /my-quarto-site/webmention.css to change: - Colors (currently uses Bootstrap variables for consistency) - Layout and spacing - Author photo sizes - Dark mode appearance

Receiving Webmentions

1. Sign in to Webmention.io

Visit webmention.io and sign in with your domain (lesslikely.com)

3. Test Webmentions

You can test by: 1. Publishing a post with webmentions enabled 2. Mentioning it on Twitter 3. Waiting a few minutes for Brid.gy to process 4. Refreshing your post to see the mention appear

What Will Be Displayed

The webmention display includes:

Reactions

  • ❤️ Likes - from Twitter favorites, Mastodon favorites, etc.
  • 🔄 Reposts - from Twitter retweets, shares
  • 🔖 Bookmarks - from bookmark services
  • Shows profile photos of people who interacted

Comments & Mentions

  • 💬 Replies - from Twitter replies, blog comments
  • 💬 Mentions - from other blogs/sites mentioning your post
  • Shows:
    • Author photo
    • Author name (linked to their profile)
    • Time ago (“2 days ago”)
    • Comment text (truncated to 50 words with “…”)

Example Implementation

Here’s a complete example for a new post:

---
title: "Understanding P-values"
author: "Zad Rafi"
date: "2026-01-28"
categories: [statistics, methodology]
description: "A comprehensive guide to p-values and their interpretation"
image: "featured-image.png"
format:
  html:
    toc: true
    include-after-body: ../../_webmentions.html
---

## Introduction

Your statistical content here...

## Main Analysis

More content...

## Conclusion

Wrap up...

<!-- Webmentions will automatically appear here -->

Monitoring Webmentions

Check Webmention.io Dashboard

Visit: https://webmention.io/api/mentions.jf2?target=https://lesslikely.com/posts/your-post/

This will show you all webmentions for a specific post in JSON format.

View All Mentions

Visit your Webmention.io dashboard to see all mentions across your site.

Privacy & Security

  • Webmentions are fetched client-side (in the browser)
  • No server-side processing required
  • External images are loaded from source (be aware of privacy implications)
  • The data-prevent-spoofing option is available if needed

Troubleshooting

Webmentions Not Showing

  1. Check browser console for errors
  2. Verify the endpoint is correct in include-in-header.html
  3. Test API directly: Visit https://webmention.io/api/mentions.jf2?target=YOUR_POST_URL
  4. Check file paths: Ensure webmention.js and webmention.css are in the right location

Styling Issues

  1. Make sure webmention.css is loaded (check browser DevTools)
  2. Check for CSS conflicts with Bootstrap
  3. Verify dark mode styles if needed

Missing Mentions

  1. Wait a few minutes - Brid.gy polls every ~30 minutes
  2. Manually trigger in Brid.gy dashboard
  3. Check that your post URL exactly matches what’s in the mention

Next Steps

  1. Update existing posts you want to add webmentions to
  2. Set up Brid.gy for social media integration
  3. Test with a new post and mention it on Twitter
  4. Customize styling to match your brand

Resources

Support

If you have questions: - Check the Webmention.io documentation - Visit the IndieWeb chat - Test with the Webmention validator

Your webmentions are now ready to use! Add the include-after-body line to any post’s frontmatter to enable them.

Citation

BibTeX citation:
@online{panda,
  author = {Panda, Sir},
  url = {https://lesslikely.com/WEBMENTIONS_GUIDE.html},
  langid = {en}
}
For attribution, please cite this work as:
1. Panda S. https://lesslikely.com/WEBMENTIONS_GUIDE.html.