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?
1 Like
@mjw Do you have a suggestion here?
mjw
November 21, 2022, 4:59pm
3
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>
1 Like
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:
1 Like
csangos
December 20, 2022, 3:00pm
6
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">
csangos
December 20, 2022, 4:10pm
8
Thanks @markstos , this did the trick and I suspect you’re right about the scanner not running JavaScript.