Webmentions

1. Sign Up Go to webmention.io Authenticate with your domain using RelMe auth Add a link to your social profile in your site's header Add a corresponding link on your social profile back to your site

2. Add Required HTML Tags

<link rel="webmention" href="https://webmention.io/yourdomain.com/webmention" /> <link rel="pingback" href="https://webmention.io/yourdomain.com/xmlrpc" />

3. Fetch Mentions in Next.js // utils/webmentions.ts const TOKEN = process.env.WEBMENTION_IO_TOKEN; const DOMAIN = 'yourdomain.com';

export async function getWebmentions(url?: string) { const target = url ? &target=${url} : ''; const response = await fetch( https://webmention.io/api/mentions.jf2?domain=${DOMAIN}${target}&token=${TOKEN} ); return response.json(); }

4. Create Display Component // components/Webmentions.tsx export default function Webmentions({ url }) { const [mentions, setMentions] = useState([]);

useEffect(() => { getWebmentions(url).then(data => { setMentions(data.children); }); }, [url]);

return ( <div> <h3>Interactions</h3> <div> Likes: {mentions.filter(m => m['wm-property'] === 'like-of').length} Replies: {mentions.filter(m => m['wm-property'] === 'in-reply-to').length} </div> </div> ); }

5. Optional: Cache Results // pages/api/webmentions.ts export default async function handler(req, res) { const mentions = await getWebmentions(); res.setHeader('Cache-Control', 's-maxage=3600'); return res.json(mentions); }

6. Add Bridgy Support Visit brid.gy Connect your social accounts It will automatically send webmentions when your content is shared