Adding "Webmentions" to my blog (tutorial) ๐ฑ
I love Bear and its supportive community, but one thing I sometimes miss is its interactivity. We're all doing it for our own reasons, but yet it's nice to come by a blogpost that inspired or helped me and tell people of this. Or to get that feedback from others.
I push my posts to social media (Mastodon & Bluesky)where people can interact with them, and seeing that you can show these interactions on each blog post made me curious about how to do this.
Yordi was kind enough to share how to show Webmentions of your blog posts, however, as he mentioned, it did not show how to set up these Webmentions.
And this is where it gets tricky, as at first sight, it does not seem possible to log into Webmentions.io.
So I decided to dig into this and after successful implementation wrote this guide for future reference and help.
Steps you need to take to enable Webmentions on your blog posts:
- Webmention.io uses IndieLogin to log you in and apparently, you need a rel="me" on your website. Following Robbs guide, I added the following to my Bear footer:
<a style="display: none;" href="https://github.com/gobino" rel="me">github.com/gobino</a>
After using my website as login on Webmentions it asked me to connect to Github, which I confirmed, but eventually, this failed as I did not link back from Github to my blog. So I updated my Github profile with my bear blog website.
Trying to log in to Webmentions and linking to Github was now successful!
Via the Webmentions Sites page I got the following setup code which I installed in the header of my Bear blog:
<link rel="webmention" href="https://webmention.io/gobino.be/webmention" />
- While Webmentions only refers to the above code, I also added the following to my header, seeing it from the example of others.
<link rel="pingback" href="https://webmention.io/gobino.be/xmlrpc">
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
Next step is to go Brid.gy to connect to and collect web mentions from my social accounts.
I selected Mastodon, logged in to my account to provide Brid.gy with read access and let it scan my account.
I did the same for Bluesky by adding my username and app password.
Going back to Webmentions Sites I saw that some pages and webmentions were collected so now the last action to take was to show them on my blog.
As the last step, I used the code mentioned in the article of Yordi and added it to the footer of my Bear blog.
And done!
I might tweak the looks in the future, but for now, I'm happy I got it working.
Resources used: