Webmention.js NPM

webmention.js

Client-side library for rendering webmentions from webmention.io

Copy the JavaScript file (webmention.min.js) from the static/ directory to somewhere on your website
Put a <div id="webmentions"></div> where you want your webmentions to be embedded
Put a <script src="/path/to/webmention.min.js" async></script> somewhere on your page (typically inside <head> but it doesn't really matter), replacing /path/to/ with whatever directory the JavaScript file is in
You'll probably want to add some CSS rules to your stylesheet, in particular:
#webmentions img { max-height: 1.2em; margin-right: -1ex; }
See the included webmention.css file for an example.

You can also pass in some arguments, for example:

<script src="/path/to/webmention.min.js" data-id="webmention-container" async></script>

Note that the async isn't strictly necessary but it can speed up apparent page loads.

Accepted arguments (see the source in static/webmention.js for more details):

page-url -- use this reference URL instead of the current browser location
add-urls -- additional URLs to include, separated by a |
id -- use this container ID instead of "webmentions"
wordcount -- truncate the reply to this many words (adding an ellipsis to the end of the last word)
max-webmentions -- the maximum webmentions to retrieve and render (defaults to 30)
prevent-spoofing -- set this to use the incoming mention source URL instead of the declared URL; setting this will disable one form of identity spoofing but will make mentions from webmention bridges (such as brid.gy or Telegraph) significantly uglier
sort-by -- what to sort the responses by; defaults to published time (see the webmention API for possible values)
sort-dir -- what order to sort the responses by; defaults to 'up' (ascending).
comments-are-reactions -- if set to 'true', displays comment-type responses (replies/mentions/etc.) as being part of the reactions (favorites/bookmarks/etc.) instead of in a separate comment list. Defaults to "false".

Look at the source code itself for more detailed information.

This library supports i18next to provide translations into other languages. The following strings are supported: