Pimping the Permalink
How to copy and share the permalink programatically
Until now I did not show the permalink under my posts in this blog, but in the past I had sometimes the need to pass one of the links and it was not very user-friendly, on desktop as well as on mobile. Not the One-Click experience I prefer.
My goal was to show the permalink and, even more important, provide a simple way to copy and to share. JavaScript to the rescue…
Display
As I run my blog with Hexo, I deal with EJS
files. To show the permalink in my article.ejs
, was quite simple. First step was to create a new partial file named permalink.ejs
, to be called every time when the complete article has to be rendered:
1 | <% if (!index){ %> |
The partial file looked like this in this step:
1 | <div class="<%= class_name %>""> |
Copy
As I read a little bit about the possibilities to copy text into the clipboard via JavaScript on MDN, it became obvious that a link is not the best solution, because using the exeCommand
needs to have something selected and this is difficult on anchors. Then … do it with an input:
1 | <div class="<%= class_name %>""> |
Nice, but a user feedback, that the text has been copied to the clipboard, was advisable, because nothing is more annoying, when you click somewhere and nothing seems to happen. As I hate default browser confirmations and other distracting messaging methods, I wanted to use the input itself, by fading out the link text, replace it with a message and fade in the text again:
I extended my animation.styl
(Hexo works with Stylus) with two keyframe animations … one for fading in, one for fading out…
1 | @keyframes fadeIn { |
… and wrote a setTimeout cascade to achive the effect:
1 | <div class="<%= class_name %>""> |
Share
The second permalink feature was a little bit trickier, because I didn’t want to use one of the sharing libraries out there, whose business model is based on my readers data (always keep conservative on implementing third party stuff, because you never know what they are doing with the data). But a couple of months ago I read about a new native browser API for WebApps on the rise: Web Share API.
Since 2019 W3C is working on this API, for sharing text, links and other content to an arbitrary destination of the user’s choice. On 27 August 2020 the published a Working Draft and on 16 September 2020 the latest Editors Draft.
Brand new stuff. The browser support is not the best yet, but it will be getting better in the near feature, especially as Edge Chrome is one of the early adopters.
web.dev lists important requirements on using this new feature in JavaScript:
- It can only be used on a site that supports HTTPS
- It must be invoked in response to a user action such as a click
But it can share URL’s, text and even files!
A raw implementation can be:
1 | if (navigator.share === undefined) { |
I refrain to implement a fallback, rather I would like to show the appropriate button only to those users, whose browser supports it:
1 | <div class="<%= class_name %>""> |
More Info
- w3c.github.io: W3C Web Share Test
- heise Developer: Features von übermorgen: Die Web Share API und die Web Share Target API (German)
- CSS-Tricks: How to Use the Web Share API
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention, or by leaving a good old comment with your GitHub account.
Webmentions
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...
Comments