Below every post on my webpage there are share buttons displayed. Because I’ve recently joined mastodon, I wanted to include a “Share on Mastodon” button.

So, after doing some research, I’ve used the content at https://www.256kilobytes.com/content/show/4812/how-to-make-a-share-on-mastodon-button-in-pure-vanilla-javascript to make it all work.

Because the modified jekyll theme I use is based on Type-on-Strap, my share buttons are located at _includes/share_buttons.html. I’ve added the following code to it:

{% if site.theme_settings.share_buttons.mastodon %}
<li>
       <a href="" onclick="shareMastodon();">
		<i class="fab fa-mastodon fa-2x" aria-hidden="true"></i>
		<span class="sr-only">{{ site.theme_settings.str_share_on }} Mastodon</span>
       </a>
</li>
<script>
// https://www.256kilobytes.com/content/show/4812/how-to-make-a-share-on-mastodon-button-in-pure-vanilla-javascript
function shareMastodon() { 
       	// Prefill the form with the user's previously-specified Mastodon instance, if applicable
       	var default_url = localStorage['mastodon_instance']; 

       	// If there is no cached instance/domain, then insert a "https://" with no domain at the start of the prompt. 
       	if (!default_url)
               default_url = "https://"; 

       	var instance = prompt("Enter your instance's address: (ex: https://social.linux.pizza/)", default_url);
       	if (instance) { 
               	// Handle URL formats
               	if ( !instance.startsWith("https://") && !instance.startsWith("http://") )
                       	instance = "https://" + instance;  

               	// Get the current page's URL
               	var url   = window.location.href;
       
               	// Get the page title from the og:title meta tag, if it exists.
               	var title = document.querySelectorAll('meta[property="og:title"]')[0].getAttribute("content"); 
       
               	// Otherwise, use the <title> tag as the title
               	if (!title)    var title = document.getElementsByTagName("title")[0].innerHTML;
       
               	// Handle slash
               	if ( !instance.endsWith("/") )
                       	instance = instance + "/"; 

               	// Cache the instance/domain for future requests
               	localStorage['mastodon_instance'] = instance; 

               	// Hashtags 
               	hashtags     =  "#janwagemakers.be";

               	// Tagging users, such as offical accounts or the author of the post 
               	var author   = "@jan_wagemakers@social.linux.pizza"; 

               	// Create the Share URL
               	// https://someinstance.tld/share?text=URL%20encoded%20text
               	mastodon_url = instance + "share?text=" + encodeURIComponent(title + "\n\n" + url + "\n\n" + hashtags + " " + author);

               	// Open a new window at the share location   
               	window.open(mastodon_url, '_blank');
	}
}
</script>

Now, let’s write some blog post about it and test if it’s work ;)

---