According to Mastodon it’s possible to verify one’s user page with insertion of rel="me" into a link on one’s site.
I tried inserting that rel="me" code into a link to my Mastodon account in my theme, but when I viewed the source code of the live site the rel="me" was effectively overridden by rel="noopener noreferrer" (as was present in every other link).
Is it therefore not possible to insert that rel="me", or is there perhaps something I’m missing?
I added the following to social-links.hbs of my customized Dashi theme*:
<div class="social flex">
...
<a class="social__item"
href="https://mastodonapp.uk/@martinwebster" target="_blank" title="Mastodon"
aria-label="Mastodon" rel="me">
{{>icon name="mastodon" size="sm"}}
</a>
...
</div>
Then I added this to feather-sprite.svg:
<symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="mastodon">
<title>Mastodon</title>
<path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"></path>
</symbol>
*This is likely to be theme-specific, but it should point you in the right direction.
Edit:
For Journal theme, these are the required changes to default.hbs.
Add button after search:
<a class="gh-head-btn" href="https://mastodonapp.uk/@martinwebster" target="_blank" title="Mastodon" rel="me">
{{> icons/mastodon}}
</a>
Create ./partials/icons/mastodon.hbs:
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z" fill="#888888"/>
</svg>
My mistake. I actually had a script that was overriding the rel="me" with rel="noopener noreferrer", which has now been fixed.
Otherwise, if anybody out there would like to see the proper Mastodon docs page about link verification you can see it here:
I added my Mastadon profile link in the navigation panel and then used the following script to inject the rel=“me” into the anchor. Alas, while I can see the correct tag when I inspect the page it doesn’t seem to have verified my site in Mastodon.
<script>
let navlink=document.getElementsByClassName("nav-mastodon")[0];
let alink = navlink.getElementsByTagName('a')[0];
alink.setAttribute('rel', 'me');
</script>
Any thoughts on why this wouldn’t work?
Thanks,
James
It’s possible that the Mastodon verification scanner doesn’t run JavaScript to render the page. That takes considerably more resources than just parsing HTML. So, it may only detect links that that exist in the HTML that’s initially served.
For a simple workaround, go into “Settings > Code Injection” and add this style syntax to “Site Header”:
<link rel="me" href="https://urbanists.social/@markstos">
Thanks @markstos, this did the trick and I suspect you’re right about the scanner not running JavaScript.
I am currently struggling with this. I tried putting it both in the header code and footer code, Mastodon fails to validate.
Can you link your site, @AlexKalopsia ? The solution above should work, and is reported by the original poster to work, so we’re going to need to see your site to be able to help you out, I’m thinking!
(Your site isn’t in private mode, right?)
I recently did this, so I know it should work. On your site, though, I don’t see the Mastodon link (it should be in the head). There is a Mastodon verification comment, but I don’t see the actual link.
Please take another look at the example. It’s a <link> tag, not an <a> tag.
oh wow, despite the bold text I completely missed that Mastodon was just offering an <a> tag instead of <link>, thank you!
Here I am, once again. I waited some time (the web says it could take 1 or 2 hours) but at this point it seems like it’s not working?
The link I am using
<link rel="me" href="https://mastodon.social/@alexkalopsia>
Mastodon profile: https://mastodon.social/@alexkalopsia
Looks like it has verified now! Must just have been running a little slowly. :)