WebmentionDressing

Bl.ocks.org demo. (Example hashes: #Webmention #WebmentionDressing #2014/Online)

If you want to display relevant webmetion.io comments at your site, you can use this as an iframe. For example:

<iframe id="webmentiondressing"
    style="width:100%; height:600px; padding:0;margin:0;border:none"></iframe>
<!-- this should be at the bottom where jQuery is already defined, of course -->
<script type="text/javascript">
// Replace this with some https location, or it would break when https
var IFRAME_URL_PREFIX = '/thedod/78b14341e39ca0d09131/example/#'; 
$(function() {
    $("#webmentiondressing").attr(
        'src',IFRAME_URL_PREFIX+location.pathname.slice(1)
    );
});
</script>

This example works with IndieWebCamp webmentions. Just add any path from IndieWebCamp as the url hash (e.g. #comments or #IndieAuth).

To use this on your on site as an iframe, change the variables defined at the top of script.js (e.g. your site's URL).

To change the design (it doesn't have to be bootstrap), just edit the mustache template at the bottom of index.html.

To try out template ideas on the fly, you can play with similar code at codepen.