Adding a Fediverse Share Button to my Emacs Nikola Blog
I was browsing the Fediverse, as is my wont, and I came across a fella named Stefan Bohacek announcing the release of his new Fediverse Share Button. I tried it with my Sharkey instance and it worked! So I decided to add it to this blog. Even working with Nikola and Emacs, it was pretty frickin' easy.
To continue my very meta habit of writing about blogging on my blog, here's how I added the share button at the bottom of this page.
Install Fediverse Share Button
First, we simply need to clone the fediverse-share-button repo. I cloned it next to my blog directory to make it a little simpler to move files into place, like this:
cp -r ./fediverse-share-button/fediverse-share-button ./notroot-blog/files
That's it for now! Next, I'll show you how to incorporate those files into your Nikola builds.
I referred to this "Random Geekery" blog post to figure out how to tweak Nikola themes and templates to include my fancy new share button.
Boiling down my "learnings" (barf) for the reader, here's what I did.
Create a New Theme to Tweak
Rather than tweaking the installed theme – in my case, the hack
theme – we want to inherit from it, and make the changes to our own theme templates.
First, I created a new theme called notroot
, based on hack
, like this:
nikola theme --new notroot --parent hack
Then, I changed my theme and disabled bundling in Nikola's conf.py
, like this:
THEME = "notroot"
USE_BUNDLES = False
Then, I copied the post template into my new notroot
theme, like this:
nikola theme --copy-template post.tmpl
To make sure my new notroot
theme was exactly the same as hack
, I did a quick built and served it locally, like this:
nikola build
nikola serve
Perfect! Nothing changed… yet.
Add Fediverse Share Button
Next, I opened the aforementioned post.tmpl
file in Emacs, and more or less followed Stefan's instructions. However, because we're working with a Nikola template (Mako), there was a little more to it.
My post.tmpl
has a block called extra_head
, so that's where I added the CSS link. It should look sorta like this afterwards:
<%block name="extra_head">
<!-- ... the rest of 'extra_head' ... -->
<link rel="stylesheet" href="/fediverse-share-button/styles.min.css">
</%block>
Note that, unlike Stefan's instructions, we use an absolute path here /
, not a relative path ./
, to the fediverse-share-button/
directory. That's because Nikola will move things around when it builds, and because we just plopped fediverse-share-button
into the files/
directory, it will be at the top level, next to assets/
and images/
.
To include the <script>
tag pointing to the Javascript for our share button, I had to add an extra_js
block to the bottom of post.tmpl
. It also uses absolute paths, like this:
<%block name="extra_js">
<script src="/fediverse-share-button/script.min.js" defer class="fsb-script"></script>
</%block>
Then, finally, I was able to include the actual button <form>
element. I chose the bottom of the post, above the navigation. The whole content
block, after my changes, looks like this (comments added for emphasis):
<%block name="content">
<article class="post-${post.meta('type')} h-entry hentry postpage" itemscope="itemscope" itemtype="http://schema.org/Article">
${pheader.html_post_header()}
<div class="e-content entry-content" itemprop="articleBody text">
${post.text()}
</div>
<aside class="postpromonav">
<!-- START fediverse-share-button form -->
<form class="fsb-prompt">
<label>Share with the fediverse</label>
<div class="fsb-input-group mb-3">
<span class="fsb-input-group-text">https://</span>
<input required
type="text"
name="fediverse-domain"
placeholder="mastodon.social"
class="fsb-input fsb-domain"
aria-label="Amount (to the nearest dollar)">
<button class="fsb-button"
type="submit"><img src="/fediverse-share-button/icons/mastodon.svg"
class="fsb-icon"></span>Share</button>
</div>
<p class="fsb-support-note fsb-d-none">
This server does not support sharing. Please visit <a class="fsb-support-note-link"
target="_blank"
href=""></a>.
</p>
</form>
<!-- END form -->
<nav>
${helper.html_tags(post)}
${helper.html_pager(post)}
</nav>
</aside>
% if not post.meta('nocomments') and site_has_comments:
<section id="comment-section" class="comments hidden-print">
<h2>${messages("Comments")}</h2>
${comments.comment_form(post.permalink(absolute=True), post.title(), post._base_path)}
</section>
% endif
${math.math_scripts_ifpost(post)}
</article>
${comments.comment_link_script()}
</%block>
Then, once again, I built it and served it locally to check my work.
Style the Fediverse Share Button
Success! Except…
Except the CSS was all screwy. The share button itself was enormous, due to how hack
CSS treats all <img>
tags, and it was all left-justified, when my tags right below are centered.
Let's fix that!
It turned out to be dead simple. I inspected the classes in the browser, fixed it so it looked right, then copied those styles out of files/fediverse-share-button/styles.css
and into my own files/assets/css/custom.css
file. Then I added the attributes needed to fix things.
To fix the enormous button, I just added !important
to max-width
:
.fsb-icon {
max-width: 1rem !important;
margin-right: 0.5rem;
vertical-align: baseline;
}
To get the whole shebang centered, I modified .fsb-prompt
to add auto
margins on the right and left, which effectively centered the <form>
itself. I also had the form center text. It looks like this, now:
.fsb-prompt{
max-width: 500px;
margin-top: 52px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
And voila! Beautiful!
Build and Deploy
Once I was satisfied with the look and functionality, I was ready for the final build and deployment.
First, though, I needed to minify the CSS changes that I had made. Stefan describes this, as well – for both JS and CSS – but here's exactly what I did:
npm install minify -g
minify files/fediverse-share-button/styles.css > files/fediverse-share-button/styles.min.css
Finally I was ready to build and deploy, as usual, from within Emacs.
-
M-x nikola-build
to build. -
M-! nikola deploy
to deploy.
Next Steps
Next steps are three-fold:
- Publish this blog post to my blog.
- Once published, I will click the Fediverse Share Button and share to my Fediverse account.
- Then I will get the article ID of that Fediverse note, and add it to the meta for this post. Then I'll rebuild and redeploy. This will enable the "Comments" section, and replies to my Fediverse note will appear as comments on this blog post!
It's like frickin' magic, baby!