Tools needed to add Mastodon sharing to any site or post using Jekyll.

mastodon.html

<img src='data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MS4wNzY5NTRtbSIgaGVpZ2h0PSI2NS40NzgzMW1tIiB2aWV3Qm94PSIwIDAgMjE2LjQxNDQgMjMyLjAwOTc2Ij48cGF0aCBkPSJNMjExLjgwNzM0IDEzOS4wODc1Yy0zLjE4MTI1IDE2LjM2NjI1LTI4LjQ5MjUgMzQuMjc3NS01Ny41NjI1IDM3Ljc0ODc1LTE1LjE1ODc1IDEuODA4NzUtMzAuMDgzNzUgMy40NzEyNS00NS45OTg3NSAyLjc0MTI1LTI2LjAyNzUtMS4xOTI1LTQ2LjU2NS02LjIxMjUtNDYuNTY1LTYuMjEyNSAwIDIuNTMzNzUuMTU2MjUgNC45NDYyNS40Njg3NSA3LjIwMjUgMy4zODM3NSAyNS42ODYyNSAyNS40NyAyNy4yMjUgNDYuMzkxMjUgMjcuOTQyNSAyMS4xMTYyNS43MjI1IDM5LjkxODc1LTUuMjA2MjUgMzkuOTE4NzUtNS4yMDYyNWwuODY3NSAxOS4wOXMtMTQuNzcgNy45MzEyNS00MS4wODEyNSA5LjM5Yy0xNC41MDg3NS43OTc1LTMyLjUyMzc1LS4zNjUtNTMuNTA2MjUtNS45MTg3NUM5LjIzMjM0IDIxMy44MiAxLjQwNjA5IDE2NS4zMTEyNS4yMDg1OSAxMTYuMDkxMjVjLS4zNjUtMTQuNjEzNzUtLjE0LTI4LjM5Mzc1LS4xNC0zOS45MTg3NSAwLTUwLjMzIDMyLjk3NjI1LTY1LjA4MjUgMzIuOTc2MjUtNjUuMDgyNUM0OS42NzIzNCAzLjQ1Mzc1IDc4LjIwMzU5LjI0MjUgMTA3Ljg2NDg0IDBoLjcyODc1YzI5LjY2MTI1LjI0MjUgNTguMjExMjUgMy40NTM3NSA3NC44Mzc1IDExLjA5IDAgMCAzMi45NzUgMTQuNzUyNSAzMi45NzUgNjUuMDgyNSAwIDAgLjQxMzc1IDM3LjEzMzc1LTQuNTk4NzUgNjIuOTE1IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE3Ny41MDk4NCA4MC4wNzd2NjAuOTQxMjVoLTI0LjE0Mzc1di01OS4xNWMwLTEyLjQ2ODc1LTUuMjQ2MjUtMTguNzk3NS0xNS43NC0xOC43OTc1LTExLjYwMjUgMC0xNy40MTc1IDcuNTA3NS0xNy40MTc1IDIyLjM1MjV2MzIuMzc2MjVIOTYuMjA3MzRWODUuNDIzMjVjMC0xNC44NDUtNS44MTYyNS0yMi4zNTI1LTE3LjQxODc1LTIyLjM1MjUtMTAuNDkzNzUgMC0xNS43NCA2LjMyODc1LTE1Ljc0IDE4Ljc5NzV2NTkuMTVIMzguOTA0ODRWODAuMDc3YzAtMTIuNDU1IDMuMTcxMjUtMjIuMzUyNSA5LjU0MTI1LTI5LjY3NSA2LjU2ODc1LTcuMzIyNSAxNS4xNzEyNS0xMS4wNzYyNSAyNS44NS0xMS4wNzYyNSAxMi4zNTUgMCAyMS43MTEyNSA0Ljc0ODc1IDI3Ljg5NzUgMTQuMjQ3NWw2LjAxMzc1IDEwLjA4MTI1IDYuMDE1LTEwLjA4MTI1YzYuMTg1LTkuNDk4NzUgMTUuNTQxMjUtMTQuMjQ3NSAyNy44OTc1LTE0LjI0NzUgMTAuNjc3NSAwIDE5LjI4IDMuNzUzNzUgMjUuODUgMTEuMDc2MjUgNi4zNjg3NSA3LjMyMjUgOS41NCAxNy4yMiA5LjU0IDI5LjY3NSIgZmlsbD0iIzMwODhkNCIvPjwvc3ZnPg==' width = "18px" height = "18px" alt='Mastodon'>

mastoshare.js

function shareOnMastodon() {
    var whereIsThis = window.location;
    var postContents = "Check+out+this+post+" + whereIsThis;
    var instanceUrlField = document.getElementById('instance');
    var instanceUrl = instanceUrlField.value;
    if (instanceUrl == "") {
        instanceUrl = "mastodon.social";
    };
    var url = "https://" + instanceUrl + "/share?text=" + postContents;
    window.location = url;
    return false;
}

post-share-sheet.html

<p class = "h5">Share this post</p>
<p>
    <form onsubmit="return shareOnMastodon();">
        <div class="input-group mb-3">
            <input type="text" class="form-control" id = "instance" placeholder="mastodon.social" aria-label="Instance URL" aria-describedby="button-addon2" name = "instance" data-toggle="tooltip" data-placement="top" title="Enter the URL for your Mastodon instance.">
          <div class="input-group-append">
            <button class="btn mastodon" type="submit" id="button-addon2"><b>{% include mastocon.html %} Share</b></button>
            </div>
        </div>
    </form>
</p>

Any ideas to use this with jekyll?

You should be able to without an issue.

Just need little instruction or how-to, it will be helpful as I'm not that technical!

Drop post-share-sheet.html and mastodon.html in _includes, and drop mastoshare.js in the assets folder.