Webmentions

11. Sign Up
2Go to webmention.io
3Authenticate with your domain using RelMe auth
4Add a link to your social profile in your site's header
5Add a corresponding link on your social profile back to your site
6
72. Add Required HTML Tags
8<link rel="webmention" href="https://webmention.io/yourdomain.com/webmention" />
9<link rel="pingback" href="https://webmention.io/yourdomain.com/xmlrpc" />
10
113. Fetch Mentions in Next.js
12// utils/webmentions.ts
13const TOKEN = process.env.WEBMENTION_IO_TOKEN;
14const DOMAIN = 'yourdomain.com';
15
16export async function getWebmentions(url?: string) {
17  const target = url ? `&target=${url}` : '';
18  const response = await fetch(
19    `https://webmention.io/api/mentions.jf2?domain=${DOMAIN}${target}&token=${TOKEN}`
20  );
21  return response.json();
22}
23
244. Create Display Component
25// components/Webmentions.tsx
26export default function Webmentions({ url }) {
27  const [mentions, setMentions] = useState([]);
28
29  useEffect(() => {
30    getWebmentions(url).then(data => {
31      setMentions(data.children);
32    });
33  }, [url]);
34
35  return (
36    <div>
37      <h3>Interactions</h3>
38      <div>
39        Likes: {mentions.filter(m => m['wm-property'] === 'like-of').length}
40        Replies: {mentions.filter(m => m['wm-property'] === 'in-reply-to').length}
41      </div>
42    </div>
43  );
44}
45
465. Optional: Cache Results
47// pages/api/webmentions.ts
48export default async function handler(req, res) {
49  const mentions = await getWebmentions();
50  res.setHeader('Cache-Control', 's-maxage=3600');
51  return res.json(mentions);
52}
53
546. Add Bridgy Support
55Visit brid.gy
56Connect your social accounts
57It will automatically send webmentions when your content is shared
58