71 lines
2 KiB
Plaintext
71 lines
2 KiB
Plaintext
|
Preparing the HTML embed
|
||
|
|
------------------------
|
||
|
|
If your handle on mastodon is @superman@fortitude.fortress the remote
|
||
|
|
follow portal page is this:
|
||
|
|
|
||
|
|
https://fortitude.fortress/users/superman/remote_follow
|
||
|
|
|
||
|
|
In the following HTML snippet to embed on your site replace {uri} with
|
||
|
|
your remote_follow link corresponding to what was just explained.
|
||
|
|
|
||
|
|
<div style="display: inline-block; position: relative;">
|
||
|
|
<a href="{uri}">
|
||
|
|
<img id="mastodonfollow" onclick="mastodon_follow_show()" style="height: 32px;" src="{icon}"/>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
Next decide on the icon you want to use:
|
||
|
|
mastodon-follow-dark-da.svg
|
||
|
|
mastodon-follow-dark-en.svg
|
||
|
|
mastodon-follow-dark.svg
|
||
|
|
mastodon-follow-light-da.svg
|
||
|
|
mastodon-follow-light-en.svg
|
||
|
|
mastodon-follow-light.svg
|
||
|
|
|
||
|
|
This is the icon you upload to somewhere on your site. Replace {icon}
|
||
|
|
with the path to your icon in the above HTML snippet.
|
||
|
|
|
||
|
|
You can adjust the image size in the style attribute as appropriate for
|
||
|
|
your site.
|
||
|
|
|
||
|
|
Insert the HTML snippet in the place where you want the button on your
|
||
|
|
page.
|
||
|
|
|
||
|
|
I have prepared variants of the script to match the icons. Pick the
|
||
|
|
appropriate one and upload it to your site. Replace {script} in the
|
||
|
|
snippet below and insert it in the <head></head> of your website.
|
||
|
|
|
||
|
|
<script src="{script}" type="text/javascript"></script>
|
||
|
|
|
||
|
|
IMPORTANT: Remember to change the account and portal settings to point
|
||
|
|
to your mastodon account.
|
||
|
|
|
||
|
|
You can change the link that "Create account" points to in the
|
||
|
|
create_url setting and easily translate the strings to other languages.
|
||
|
|
|
||
|
|
Implementation notes
|
||
|
|
--------------------
|
||
|
|
The script reserves the following globals:
|
||
|
|
|
||
|
|
HTML/CSS:
|
||
|
|
#mastodonfollow
|
||
|
|
input[name="mastodon-handle"]
|
||
|
|
.mastodon-follow-container
|
||
|
|
.mastodon-follow-title
|
||
|
|
.mastodon-follow-input
|
||
|
|
.mastodon-follow-button
|
||
|
|
JS:
|
||
|
|
var mastodon_follow_settings
|
||
|
|
var mastodon_follow_strings
|
||
|
|
var mastodon_follow_container
|
||
|
|
function mastodon_follow_create_style
|
||
|
|
function mastodon_follow_go
|
||
|
|
function mastodon_follow_lookup
|
||
|
|
function mastodon_follow_show
|
||
|
|
|
||
|
|
Bugs
|
||
|
|
----
|
||
|
|
Report bugs to smpl@slamkode.ml
|
||
|
|
|
||
|
|
License: Zlib
|