Menu

Colin Devroe

Reverse Engineer. Blogger.

Ron Chester on Webmentions

Ron Chester:

I have only one reservation about the development of this IndieWeb stuff. While it is in progress, most of these websites have disabled regular comments, if they ever had them. Often there is also no contact information given, or it takes a lot of hunting on their websites to find it. So if one doesn’t have webmentions working on one’s own website, there is no obvious way of communicating with these folks about things they post. I have found that if they’re also on the Microblog website, one can post a message there, addressed to them. But that seems pretty round about, when an old school place to post a comment on their original post would be very easy to leave.

Please go to his site and read his entire post.

I read Ron’s post before making my decision to turn comments back on. Also, my email address is available on every page of my site. So if anyone would like to comment on anything on my site they should be able to do so both publicly and privately with ease.

Side note: One of the reasons we all turned off comments, aside from the benefits of disabling comments like more traffic to your site (I wrote this post 10 years ago!), is that people claimed that moderating comments is too much work. I no longer think that is an issue. Even if my blog became a popular place to comment I think I’d be able to keep up with it with the tools we have available now.

Webmention on Micro.blog

Manton Reece:

We’ve been improving Micro.blog’s support for Webmention. When you reply to a post on Micro.blog, from the web or iOS app, it will ping the site you’re replying to, giving that site a chance to include the comment.

Kudos to Manton as Webmentions seems to work beautifully is Micro.blog. The improvements show and the value is starting to show too. So I guess I just need to stop complaining. I’ve been harping on webmention for a little while. I feel terribly about it. Because I want it to work so badly and I’ve just been frustrated that is seems so inconsistent! So I plan to shut up now and sit down and get it working properly. I’ll likely do that within the next few weeks.

To see Micro.blog’s webmentions in action you can see a few on my posts there and here on my blog. I’m looking forward to their presentation being much more valuable on my blog. My email inbox is open for suggestions.

 

Colin Walker on the IndieWeb

Colin Walker:

Yet there is still a problem, and that is the apparent insistence on the implementation of specific technologies as implied by the guides and documentation.

Go read his entire post. There are all sorts of “problems” with the IndieWeb and Walker lays some of them out nicely. (Remember, I told you to subscribe to his site.) He mentions that the entire thing can be confusing to non-developers. Well, I am a developer and while the protocols themselves aren’t impossible to grok if you spend some time reading or visiting the IndieWeb IRC chat, I have completely given up trying to support it because it is far too time consuming and nothing ever seems to work for every long.

I’m writing that out of frustration. Sorry. I know it can work. Look at Jeremy Keith’s site. I’m so jealous. He’s put tons of time into making so many of these things work. I want what he has. I simply have chosen not to spend nearly as much time as Jeremy has to get all of this stuff to stick together.

Here is just one example. I have webmention turned on for my site via the “official” WordPress plugin. It doesn’t work. Colin Walker has linked to my site several times. And I to his. His webmentions have yet to show up on my site. Mine have yet to show up on his. And his site isn’t the only site that has linked to me and the only way I’ve found out is via my Jetpack Stats (which I dislike having on but I keep it on for this very purpose). I’m certain that there is a logical reason webmentions aren’t working but I don’t feel like looking under the hood again (and again and again) to figure it out.

I’m not the type of person that needs everything to be easy. I don’t mind some configuration here and there from time-to-time and if something is really worth the effort I’ll even write the code myself. But supporting the IndieWeb (even just a single piece of it like Webmention) has exhausted this developer to the point of giving up.

You’ve been granted h-entry

This morning I took a few minutes to add microformats to the HTML of my blog. I had done so in the past when my site was using a completely different theme and hadn’t taken the time to add them back in. Shame on me. I should have done it much sooner since it took less than 20 minutes and now I think my blog will be a little easier to read for things like webmentions.

This post isn’t to be used as a guide in adding microformats to your WordPress theme. I’m simply writing this down as a way to walk myself through my own task of doing so. But if you read it and feel inspired to add microformats to your own site then I’ve done my job.

In short, the following classes must be added to your index pages (index.php, archive.php, search.php, etc.) and your single post page (single.php) to support the h-entry microformat.

  • h-entry
    • p-name
    • p-author
    • u-url
    • p-summary or e-content
    • dt-published

There are other classes in the spec, and I recommend supporting which ever ones make sense for your site, but if you only had these class names added your HTML, it would be much easier to parse for the little robots that are running around on the web trying to eat your code.

Many WordPress templates wrap posts in an article tag and add classes to it using post_class function. This function adds numerous classes to help you specify things like post-formats, post-types, etc. Supporting h-entry couldn’t be easier since the post_class function allows you to add any classes you’d like on your own. Like this:

<article id="post-<?php the_ID(); ?>" <?php post_class( 'h-entry' ); ?>>

Next, you’ll want to add the p-name and u-url classes to the link that goes to your blog post from the index. That should be easy enough. Mine looks like this but your’s will likely look a bit different. In my case the A tag’s contents contains the post’s name, and the HREF of the A tag is the post’s URL. So I can add both classes to the one element.

<h3><a class="p-name u-url" title="Permalink to <?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

We’re almost there. The next class I needed was dt-published – or the datetime that the post was published. This one may prove to be a bit harder to wrap your head around but here is how I did it.

<time class="dt-published" datetime="<?php echo get_the_date('Y-m-d H:i:s'); ?>"><?php echo get_the_date('F jS, Y'); ?></time>

I used HTML’s time element so that I could take advantage of the datetime attribute. Exactly as the microformats wiki suggests. get_the_date in WordPress accepts PHP’s date formatting arguments (all those weird letters up there) so it didn’t take too long to figure out how to format the datetime correctly. Essentially, I’m formatting the date for machines in the attribute and humans in the contents.

Finally the contents of the post must be marked up. On my indexes I only show an excerpt of the post and on the single page’s I show the entire entry’s contents. So I use p-summary on index and the e-content class on the single post page. This is how my index page’s markup looks.

echo '<div class="p-summary">';
the_excerpt();
echo '</div>';

For my particular use I also needed to mark up statuses or what might be called “notes” on the indieweb wiki. In retrospect “notes” is a far better term since what I post as statuses are more often than not more a note than a status. But, oh well? I think I’m stuck with it for now. For statuses I simply mark up the entire content as both p-name and e-content as suggested by the microformats wiki.

Here are a few examples of each post format, in HTML, that I use on my site.

Status:

<article id="post-3964" class="h-entry post-3964 post type-post status-publish format-status hentry category-uncategorized post_format-post-format-status">                    
 <div class="p-name e-content">
  <p>Scheduled my image posts for the week. I wanted a change so I chose mostly older photos from different locations.</p>
 </div>
 <time class="dt-published" datetime="2016-10-09 08:55:20"><a class="status-date" href="http://cdevroe.com/2016/10/09/3964/" title="Permalink to this status update">8:55am on October 9th, 2016</a></time>
</article>

Image:

<article id="post-3894" class="h-entry post-3894 post type-post status-publish format-image hentry category-uncategorized tag-airplane tag-flying tag-rc tag-scott-township post_format-post-format-image">
 <div class="p-name e-content">
  <p><img class="alignnone size-full wp-image-3895" src="http://cdevroe.com/wp-content/uploads/2016/10/IMG_4998.jpg" alt="img_4998" srcset="http://cdevroe.com/wp-content/uploads/2016/10/IMG_4998.jpg 1000w, http://cdevroe.com/wp-content/uploads/2016/10/IMG_4998-300x200.jpg 300w, http://cdevroe.com/wp-content/uploads/2016/10/IMG_4998-768x512.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p>
  <p>Coming in for a landing, Scott Township, PA &#8211; September 2016</p>
 </div>
 <p class="text-uppercase text-muted"><a class="u-url" title="Permalink to Coming in for a landing, Scott Township, PA &#8211; September 2016" href="http://cdevroe.com/2016/10/09/coming-in-for-a-landing-scott-township-pa-september-2016/">October 9th, 2016</a></p>
</article>

Post on Index:

<article id="post-3945" class="h-entry post-3945 post type-post status-publish format-standard hentry category-uncategorized tag-git tag-github tag-subscriptions tag-youtube">
 <h3><a class="p-name u-url" title="Permalink to Tracking my YouTube subscriptions over time" href="http://cdevroe.com/2016/10/08/tracking-my-youtube-subscriptions-over-time/">Tracking my YouTube subscriptions over time</a></h3>
 <p class="text-uppercase text-muted"><time class="dt-published" datetime="2016-10-08 13:02:22">October 8th, 2016</time></p>
 <div class="p-summary">
  <p>As I wrote late last month, I&#8217;m using YouTube a lot, and so I&#8217;d like to track my subscriptions over time. Git is the best tool for this sort of thing so I quickly jotted my YouTube subscriptions down and put them on Github. To retrieve your own subscriptions you can use YouTube&#8217;s Subscription Manager. [&hellip;]</p>
 </div>
 <p class="text-primary"><a title="Permalink to Tracking my YouTube subscriptions over time" href="http://cdevroe.com/2016/10/08/tracking-my-youtube-subscriptions-over-time/">Read more...</a></p>
</article>

I hope to improve this markup a bit over the coming weeks to support more microformats. But for now I think this will help to make my site’s HTML a bit more readable to our little bot friends.