How do I add Webmentions to my site?

You can integrate web mentions into Blot but it will require a little work. There are two articles, kindly written by others, which should guide you through the process:

• Displaying Webmentions with Posts by Amit Gawande
• Enabling webmentions on a Blot-hosted blog by Matthew Finlayson.

I've not used webmentions myself but please let me know if you have any questions about this implementation

Thanks for your reply which brings me another question: do you know if this is compatible with using a commenting service like Commento or it must be one or the other?

Technically speaking, I don't see why you couldn't embed both Commento and webmentions on one page – I think it would be up to your judgement whether or not it would be practically suitable on your site

I've had webmentions working well on my AlongtheRay.com blot blog and I recently setup a new blog (Noggin). I found I needed to make some minor tweaks to Amit Gawande's javascript referenced above. Here's the updated code below if anyone wants it.

(If you're curious how they look, have a look at one of my posts and scroll down to see likes, reposts, and replies in the webmentions area.)

It goes into the script.js file.

Please note on the Magazine template you'll need to comment out the reference to jquery in the footer.html file so it doesn't conflict with the directions given above (they say to link to Google's jquery in header which is what I do):

<!--
<script src="{{#asset}}js-jquery.js{{/asset}}" type="text/javascript"></script>
-->

Javascript webmention code:

var post_url = window.location.href.split("#")[0];

$(document).ready(function(){	
    $("ul#mentions-list").empty();
  $.getJSON("https://webmention.io/api/mentions?per-page=50&page=0&jsonp=?", {
    target: post_url
  }, function(data){
    var social_media_likes = "";
    var social_media_repost = "";
    var social_media_post = "";
    if(data.links.length !== 0){
        $("#post-mentions").show();
    }
      $.each(data.links, function(i, v){
        var activity_type = data.links[i].activity.type;
          
        var men_content = "";
        if(activity_type && activity_type == "like"){
          if(!social_media_likes){
            social_media_likes = "<li class=\"mention-social\"> ";
          }
          social_media_likes = social_media_likes + 
          "<a href=\"" + data.links[i].data.author.url + "\" target=_blank>" 
            + "<img src=\"" + data.links[i].data.author.photo + "\" class=\"u-photo\"" 
            + "title=\"" + data.links[i].data.author.name + "\" width=\"36\" >"          
            + "</a> ";
        } else if(activity_type && activity_type == "repost"){
          if(!social_media_repost){
            social_media_repost = "<li class=\"mention-social\"> ";
          }
          social_media_repost = social_media_repost + 
          "<a href=\"" + data.links[i].data.author.url + "\" target=_blank>" 
            + "<img src=\"" + data.links[i].data.author.photo + "\" class=\"u-photo\"" 
            + "title=\"" + data.links[i].data.author.name + "\" width=\"36\" >"          
            + "</a> ";
        } else if(activity_type && activity_type == "link"){
          if(!social_media_post){
            social_media_post = "<li class=\"mention-social\"> ";
          }
          if(data.links[i].data.author && data.links[i].data.author.name){
          social_media_post = social_media_post + 
          "<a href=\"" + data.links[i].data.url + "\" target=_blank>" 
            + "<img src=\"" + data.links[i].data.author.photo + "\" class=\"u-photo\"" 
            + "title=\"" + data.links[i].data.author.name + "\" width=\"36\" >"          
            + "</a> ";
            } else {
                      social_media_post = social_media_post + 
         "<a href=\"" + data.links[i].data.url + "\" target=_blank>" 
            + "<img src=\"https://www.gravatar.com/avatar/bbb7c77c823dffc5c3bc48190d1df97a?d=identicon\"" 
            + "width=\"36\" >"          
            + "</a> ";
            }
        } else if(activity_type && activity_type == "reply"){
              let mention_date = new Date(data.links[i].verified_date);
            if(data.links[i].data.content) {
              men_content = data.links[i].data.content;
            }
          $("ul#mentions-list").prepend( "<li class=\"mention\">"
            + "<div class=\"mention-author u-author\">" 
            + "<img src=\"" + data.links[i].data.author.photo + "\" class=\"u-photo\"" 
            + "title=\"" + data.links[i].data.author.name + "\" width=\"40\" >" 
            + "<a href=\"" + data.links[i].data.author.url + "\" target=_blank>"
            + data.links[i].data.author.name + "</a> replied</div>"
            + "<div class=\"mention-text\">" + men_content + "</div>"
            + "<span class=\"small right\"><time>" + (mention_date.getUTCMonth() + 1) + "/" + mention_date.getUTCDate() 
            + "/" + mention_date.getUTCFullYear() + "</time>"
            + "<a href=\"" + data.links[i].data.url + "\">→</a></span>"
               + "</li>");
        }
       	
    });
    if(social_media_post){
        social_media_post = social_media_post.substr(0, social_media_post.length - 2);
        social_media_post = social_media_post + " <span class=\"commented\">  🔗 linked to this.</span></li>";
        $("ul#mentions-list").prepend(social_media_post);
    }			
    if(social_media_repost){
        social_media_repost = social_media_repost.substr(0, social_media_repost.length - 2);
        social_media_repost = social_media_repost + " <span class=\"commented\"> ♻️ reposted this.</span></li>";
        $("ul#mentions-list").prepend(social_media_repost);
    }
    if(social_media_likes){
        social_media_likes = social_media_likes.substr(0, social_media_likes.length - 2);
        social_media_likes = social_media_likes  + " <span class=\"commented\">  👍 liked this.</span></li>";
        $("ul#mentions-list").prepend(social_media_likes);
    }
  });
});

And the CSS which you'll obviously need to adjust for your site:

/* Webmentions */

.right {
    float: right;
}

.caption, .small {
    font-size: 13px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: var(--text);
    font-weight: 500;
}

.post-mentions {
  padding: 15px;
  margin-top: 10px;
  font-size: 16px;
}

.post-mentions ul {
  list-style:none; 
  padding:0;
  margin-left: 0;
}

.mention {
  font-size: 18px;
  line-height: 1.35em;
  margin: 20px 0 50px
}

.mention-author {
  text-transform: lowercase;
}

.mention-social  {
  color: var(--text);
  padding-bottom: 10px;
}

.mention-social img.u-photo {
  margin-right: 3px;
}

.mention-text {
  margin-top: 10px;
  margin-bottom: 2px;
  margin-left: 20px !important;
  }
  
.mention-text p {
  margin-top: 10px;
  margin-bottom: 2px;
}

img.u-photo {
    vertical-align: middle;

  margin-right: 10px;
  border-radius: 10%;
}

.mention-text a {
  text-transform: lowercase;
}

i used Rays script before for webmentions and it works well. i also used commento then and had no issues. Be sure you do each step in both references and use the script ray provided. it works well.

Glad to hear! Care to share your blog's url?

Ray

David,

Have you given any thought to perhaps offering webmention support as a turnkey option in Blot's dashboard? It would make it easier for some and further the Indieweb.

Ray

Hi all, I was wondering if you could give me some help. I followed all the steps above but webmentions still don't work.

• they seem to work fine on IndieAuth's dashboard
• I added the links to the head.html
• I added the JS script (I tried both of them)
• I added the HTML code in the entry.html

I'm sure I'm doing something wrong but I don't know what.

The website is https://iamfran.com

Can you please post a link to a post which definitely has webmentions associated and we'll work out why they are not loading