Note #19

This is a list of everything I read while researching and implementing Webmentions in no particular order:

External services I’m using

Bridgy - Most sites do not send webmentions, so Bridgy fills this gap by automatically scanning various social sites and then sending a webmention to your site.
Webmention.io - My site is a static site, and I don’t want to host or implement a Webmention receiver myself. This external service is the webmention receiver. I can include some HTML that tells Bridgy to call that.

Displaying WebMentions

There’s a lot of ways the various types of webmentions can be displayed visually. However, there are specific semantic patterns via microformat classes that should be used. Many sites seem to skip this unfortunately. The indieweb wiki fortunately gives several examples where this is doing correctly.

The general format for all of these are as follows. Notice usage of h-entry, p-author, h-cite, u-comment, etc.

1
<div class="h-entry">
2
    <h1 class="p-name">The Main Entry</h1>
3
    <p class="p-author h-card">John Smith</p>
4
    <p class="e-content">A few insights I've had:</p>
5
    <h2>Comments</h2>
6
    <div class="u-comment h-cite">
7
        <a class="u-author h-card" href="http://jane.example.com/">
8
            Jane Bloggs
9
        </a>
10
        <p class="p-content p-name">Ha ha ha great article John.</p>
11
        <a class="u-url" href="http://jane.example.com/c12">
12
            <time class="dt-published">2015-07-12 HH:MM</time>
13
        </a>
14
    </div>
15
    <div class="u-comment h-cite">
16
        <a class="u-author h-card" href="http://kim.example.net">
17
            Kim Codes
18
        </a>
19
        <p class="p-content p-name">What were the insights?</p>
20
        <a class="u-url" href="http://kim.example.net/k23">
21
            <time class="dt-published">2015-07-12 HH:MM</time>
22
        </a>
23
    </div>
24
</div>

Another example, this time of likes:

1
<li class="p-like h-cite">
2
    <a href="https://instagram.com/p/4CPkIKDckd/#liked-by-341817" class="u-url">
3
        <span class="p-author h-card">
4
            <img
5
                class="u-photo"
6
                src="https://pkcdn.xyz/igcdn-photos-b-a.akamaihd.net/ae05b7dcc1946a0f6c26ff1d293e41122f532dff7d778152b30a4229ac1db68d.jpeg"
7
                data-src="https://pkcdn.xyz/igcdn-photos-b-a.akamaihd.net/ae05b7dcc1946a0f6c26ff1d293e41122f532dff7d778152b30a4229ac1db68d.jpeg"
8
                height="36"`
9
            />
10
        </span>
11
    </a>
12
    <a style="display:none;" class="p-name u-url" href="http://instagram.com/strangeways">
13
        Ankur
14
    </a>
15
</li>

Debugging and other stuff

Webmentions are Great (Mostly) - As webmentions and the various implementations and tools being somewhat open ended and not consistent, some badly formatted webmentions can be sent (in this case from a poorly written Wordpress plugin, surprise…). Need to ensure this sort of sanity checking is applied; “empty” replies with an emoji should be handled.

The webmentions for this note look like this. Here is an early experiment with fetching and displaying webmentions in Astro:

Further reading

External services I’m using

Displaying WebMentions

Debugging and other stuff