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 locationadd-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 ugliersort-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".api-endpoint-- default tohttps://webmention.io/api/mentions.jf2, can be used to use a compatible alternative backend.
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: