Client-side library for rendering webmentions from webmention.io
-
Copy the JavaScript file (
webmention.min.js) from thestatic/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.cssfile 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:
| key | usage |
|---|---|
| replied | react image hover title |
| liked | react image hover title |
| reposted | react image hover title |
| reacted | react image hover title |
| bookmarked | react image hover title |
| mentioned | react image hover title |
| RSVPed | react image hover title |
| followed | react image hover title |
| Responses | Headline for comments |
| mention | formatted comment |
| Reactions | Headline for reactions |
To produce a minified JS, first install Node dependencies (via npm install) and
then run npm run minify.
Listed in order of first contribution: