• Fur Affinity Forums are governed by Fur Affinity's Rules and Policies. Links and additional information can be accessed in the Site Information Forum.

Fur Affinity Forums

EDIT: May want to use @username@domain which is what Mastodon uses (instead of @username@instance), but the placeholder names can be whatever makes the most sense.


Given recent events over at the blue bird site, many are flocking over to Mastodon, a social media site that has existed for quite some time now! I feel it would behoove FA to add the site as an additional Social Media option for a user. For example, to link to the user meow on the Mastodon instance meow.social, the link would be https://meow.social/@meow, so a user would input @meow@meow.social into the textbox for Mastodon social media contact entry.

Mocked it up quickly using Dev Tools:



Here is the HTML I used to mock it up. I assumed the CSS class:
HTML: 
<div class="control-panel-contact-item">
    <div class="table">
        <div class="control-panel-contact-icon">
            <div class="contact-icon-mastodon"></div>
        </div>
        <div class="cell">
            <h4>Mastodon</h4>
            <input type="text" name="mastodon" value="" maxlength="255" class="textbox textbox100" placeholder="@username@instance">
        </div>
    </div>
</div>

The icons image (located here) will need to have the Mastodon icon added of course, and the related stylesheets updated to adjust via background-position attribute. I guessed the CSS class for the Mastodon icon is contact-icon-mastodon based on the others.

When a user inputs their username and instance in the Mastodon format of @username@instance, FA should render that as the following HTML on their profile page:

HTML: 
<a rel="me" href="https://instance/@username">@username@instance</a>

(If they don't enter the correct format, display nothing, since both the username and instance are required to format a correct link.)

The rel="me" portion allows Mastodon to verify on its end that when you link to your FA profile page, you are indeed the "owner"/identity at the provided link. From Mastodon:

Assuming adding the rel attribute doesn't clash with FA code, I recommend it!

The frontend would look something like this (again missing the icon because it's not on the site yet) (blacked out personal info):



And the mock HTML:

HTML: 
<div class="user-contact-item">
    <div class="user-contact-seperator"><div class="contact-icon-mastodon"></div></div>
    <div class="user-contact-user-info font-small"><span class="font-small"><strong class="highlight">Mastodon</strong></span><br>
    <a rel="me" href="https://instance/@username">@username@instance</a></div>
</div>



I'd even be willing to code it myself, but not sure how feasible that would be, haha.
Top