Send me a webmention with Drupal!

05/12/2018 12:07

After months of reading, experimenting and a lot of coding, I'm happy that the first release candidate of the Drupal IndieWeb module is out. I guess this makes the perfect time to try it out for yourself, no? There are a lot of concepts within the IndieWeb universe, and many are supported by the module. In fact, there are 8 submodules, so it might be daunting to start figuring out which ones to enable and what they exactly allow you to do. To kick start anyone interested, I'll explain in a few steps how you can send a webmention to this page. Can you mention me?

Step 1: enabling modules

After you downloaded the module and installed the required composer packages, enable following modules: IndieWeb, Webmention and Microformats2. In case you are not authenticated as user 1, also toggle the following permissions: 'Administer IndieWeb configuration' and 'Send webmention'.

Step 2: expose author information

To discover the author of a website after receiving a webmention, your homepage, or the canonical url of a post needs author information. The module comes with an Author block so you can quickly expose a block where you can configure your name. Your real name or nickname is fine, as long as there's something. The minimal markup should look like something like this:

<p class="h-card">Your <a class="u-url p-name" rel="me" href="https://example.com">name</a></p>

Note: this can be anywhere in your HTML, even hidden.

Step 3: configure webmention module

All configuration exposed by the modules lives under 'Web services' > 'IndieWeb' at /admin/config/services/indieweb. To configure sending webmentions go to /admin/config/services/indieweb/webmention/send. Ignore the ' Syndication targets' fieldset and scroll down to ' Custom URL's for content' and toggle the 'Expose textfield' checkbox.

Webmention expose textfield configuration

Scroll down a bit more and configure how you want to send webmentions, either by cron or drush (webmentions are stored in a queue first for performance reasons)

Step 4: configure Microformats module

When sending a webmention to me, it would be nice to be able to figure out what exactly your post is. To achieve this, we need to add markup to the HTML by using CSS classes. Let's configure the minimal markup at /admin/config/services/indieweb/microformats by toggling following checkboxes:

h-entry on node wrappers
e-content on standard body fields. In case your node type does not use the standard body field, enter the field name in the 'e-content on other textarea fields' textarea.
dt-published, p-name, u-author and u-url in a hidden span element on nodes.

Now create a post!

Create a post with a title and body. Your body needs to contain a link with a class so that when I receive your webmention, I know that this page is valid. As an example, we're going to write a reply:

Hi swentel! I just read your <a href="https://realize.be/blog/send-me-webmention-drupal" class="u-in-reply-to">article</a> and it's awesome!

Save the post and verify the markup more or less looks like underneath. Make sure you see following classes: h-entry, u-url, p-name, dt-published, e-content, u-author.

<article role="article" class="h-entry node node--type-article node--promoted node--unpublished node--view-mode-full clearfix">
  <header>
     <div class="node__meta">
        <span>
          Published on <span class=" field--label-hidden">Tue, 04/12/2018 - 22:39</span>
        </span>
        <span class="hidden">
          <a href="https://example.com/canonical-url" class="u-url">
            <span class="p-name">Test send!</span>
            <span class="dt-published">2018-12-04T22:39:57+01:00</span>
          </a>
          <a href="/" class="u-author"></a>
        </span>
      </div>
      </header>
  <div class="node__content clearfix">
  <div class="e-content clearfix ">Hi swentel! I just read your <a href="https://realize.be/blog/send-me-webmention-drupal" class="u-in-reply-to">article</a> and it's awesome!</div>
  </div>
</article>

If everything looks fine, go to the node form again. Open the 'Publish to' fieldset where you can enter 'https://realize.be/blog/send-me-webmention-drupal' in the custom URL textfield. Save again and check the send list at /admin/content/webmention/send-list. It should tell that there is one item in the queue. As a final step, run cron or the 'indieweb-send-webmentions' drush command. After that the queue should be empty and one entry will be in the send list and I should have received your webmention!

Note: You can vary between the 'u-in-reply-to', 'u-like-of' or 'u-repost-of' class. Basically, the class determines your response type. The first class will create a comment on this post. The other two classes will be a mention in the sidebar.

What's next?

Well, a lot of course. But the next step should be receiving webmentions no? If you go to /admin/config/services/indieweb/webmention, you can enable receiving webmentions by using the built-in endpoint. Make sure you expose the link tag so I know where to mention you!

I tried it, and it didn't work!

Maybe I missed something in the tutorial. Or you have found a bug :) Feel free to ping me on irc.freenode.net on #indieweb-dev or #drupal-contribute. You may also open an issue at https://github.com/swentel/indieweb

Send me a webmention with #drupal! 101 setup with the first release candidate of the #indieweb module. Can you mention me? https://realize.be/blog/send-me-webmention-drupal

Comments

Aleksi Peebles on Wed, 05/12/2018 - 16:00

I have been meaning to do this for months now, but finally got round to it after reading swentel's article.

Thank you swentel for all your work on the IndieWeb module!

swentel on Fri, 07/12/2018 - 12:03

No problem, thanks for testing it out! :)

Ravi Sagar on Thu, 06/12/2018 - 15:31

Thanks a lot for the module. I am trying it as well. I mentioned this page on https://www.ravisagar.in/notes/indieweb-drupal-module-swentel but it didn't appear here. I will try to investigate and post an issue :)

Thanks again

swentel on Thu, 06/12/2018 - 15:34

@Ravi: You are missing classes in the markup (most important one is 'e-content') so that when analyzing, it can't find the content. It also needs author markup so that the webmention knows who wrote it. I did get the mention, but it's not converted to a comment.

LakeDrops on Sun, 09/12/2018 - 12:35

Thanks to a tutorial from @swentel my attention got back to webmentions again and I gave the first release candidate for

The enterprise OpenSource content management system which is available for free at https://www.drupal.org where you can find all the details and also references.

Drupal has a very active community with tens of thousands of developers all around the world and they also have a huge focus on standard compliance and on security.

another try. What's still confusing to me that I have to enter a link-class and a publishing target manually. The former might be a task for a link widget and the latter may be some lack of understanding the API so far.

The Drupal

What's known as plugin or addon in other platforms, is what we call a module in the Drupal universe. Drupal core itself is a a collection of modules as well and the community has added and maintains tens of thousands of individual modules on top of that.

looks pretty solid and feature rich. Webmentions - the new thing on the web - makes me hope that the dependencies on "social" networks like Twitter, Facebook, Reddit or others could be massively reduced if not eliminated. Sounds like another major step towards de-centralising the web. Thanks a lot to all the contributors to Webmentions and the Drupal integration.

swentel on Sun, 09/12/2018 - 12:41

You are right about the targets and classes: I have https://github.com/swentel/indieweb/issues/346 open for that to auto scan bodies for instance. You could add a link field though and use the 'webmention link' formatter to add the right class. But I agree, it's still suboptimal, but thanks for testing already ! :)

Gold on Thu, 13/12/2018 - 23:01

Okay... This is awesome. :) With a few days off coming up I am going to have to give this a go. I've been a big supporter of the IndieWeb and POSSE since I first heard about it from the WithKnown project. Really glad to see someone with the time step up and bring this to Drupal.

Thanks for the time and effort @swentel.

alec on Sat, 08/06/2019 - 14:40

"This looks so awesome" I thought when this first came out, and I'm thinking it again right now! Can't wait to try it out :)

Ravi Sagar on Tue, 25/08/2020 - 16:07

Hi swentel! I just read your article and it's awesome!

Ravi Sagar on Thu, 27/08/2020 - 12:36

Hi Swentel,
1. So we create a node using appropriate class like 'u-in-reply-to', 'u-like-of' or 'u-repost-of' class. This is clear.

2. Then we go "Publish to", enter the target url like "https://realize.be/blog/send-me-webmention-drupal" and save the node. This is clear

3. What is the purpose of the Link field that we add on the node? In "Publish to" field there is also an option to select the Link field. Is it just another way of doing it?

4. On your site (or a on mine) do I need to click on https://webmention.io/realize.be/webmention for your site to process the 'u-in-reply-do'? or will your site anyways process this post on the next cron run?

5. I have enabled comment on my site, if you reply to me the same way, will it also add a comment?

6. Can we do it in one go, like while we are adding the post? I guess we can.
Thanks a lot for your module. It is great and I am eager to understand set it up on my site as well. I think I getting there :)

Add reply

Have you written a response to this? Let me know the URL by sending a webmention.