Enabling webmentions on a Blot.im hosted blog

Amit Gawande kindly put together a post on how to enable webmentions for blot.im. As I was following along at home, I found that there were some steps that took me a while to figure out. I’m capturing those here in case anyone else has the same issues.

Create an editable copy of your theme

First, create a new theme based on whichever theme you’re currently using. In my case, this is default. In the dashboard for blot.im go to:

Settings -> Template -> New
Name: partially
Clone the Default theme
Create theme

I find it easier to have the theme source synced to my Blot directory.

Edit partially
Local editing
Switch to local editing

This will create the directory Apps/Blog/Templates/partially in your dropbox folder. Now, you can make any changes you need there.

Add references to your online accounts

Following along with Amit’s post from here. I went on to edit Apps/Blot/Templates/partial/head.html and added the following identifying references. For right now, the important part is github or email as you’ll use one of those to auth against Webmention.io in the next step.

<link rel="me" href="https://twitter.com/savagegus" />
<link rel="me" href="https://github.com/mattfinlayson" />
<link rel="me" href="mailto:mattfinlayson@matt />
<link rel="pgpkey" href="https://keybase.io/mattfinlayson/pgp_keys.asc?fingerprint=7be1bc3df69382336164d9833f115ccef135125c" />

I then took the additional step of going to both Twitter and Github and adding my domain to my profile. I verified the references were showing up on my site and that the links back from my services were also correct using indiewebify.me.

Wiring up Webmention.io to your site

Now that you can Auth against your own site setup an account with Webmention.io. At first, none of this was working for me still though. After a bit of poking around I realized I had never included jQuery and the custom script.js was never running. To fix this I went back to Apps/Blot/Templates/partial/head.html and added the following line, before .

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script>

Making it all look pretty

I also found the the CSS Amit provided was a little bare bones. This is not my forte, but I was able to get things looking close enough to how a wanted with the following changes.

.post-mentions {
  padding-top: 15px;
  margin-top: 10px;
  font-size: 16px;
}
.post-mentions ul {
  list-style:none; 
  padding:0;
  margin-left: 0;
}

.mention {
  font-size: 16px;
  margin: 10px 0 20px
}

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

.mention-social {
  color: #666;
  padding-bottom: 10px;
  border-bottom: 1px #ddd solid
}

.mention-text p {
  margin-top: 10px;
  margin-bottom: 2px
}

img.u-photo {
  padding-right: 10px;
}

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

a.time {
  font-size: 13px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #999;
  font-weight: 500;
}