256 Kilobytes

How to Make a "Share on Mastodon" Button in Pure/Vanilla JavaScript

Articles in Social Media Marketing | By August R. Garcia

Published 8 months agoThu, 07 Mar 2019 07:38:03 -0800 | Last update 8 months agoThu, 07 Mar 2019 10:01:24 -0800

Creating a "Share on Mastodon" button is done relatively easily with pure JavaScript.

1,985 view, 0 RAMs, and 2 comments

Here's some code. It's even commented:

<!-- The button that should be clicked. -->
<button onclick="share_on_mastodon()">Share on Mastodon</button>
<script>
// The actual function. Set this as an onclick function for your "Share on Mastodon" button
function share_on_mastodon() {
        // 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://linuxrocks.online)", 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     =  "#256Kilobytes";

                // Tagging users, such as offical accounts or the author of the post 
                var author   = "@256Kilobytes@linuxrocks.online"; 

                // 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>

Feel free to use and/or modify this code on your site, if that's something that you want to do. Or share this post on Mastodon with this button:


Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 8 months ago

Edit History

• [2019-03-07 7:38 PST] August R. Garcia (8 months ago)
• [2019-03-07 7:38 PST] August R. Garcia (8 months ago)
• [2019-03-07 7:38 PST] August R. Garcia (8 months ago)
• [2019-03-07 7:38 PST] August R. Garcia (8 months ago)
🕓 Posted at 07 March, 2019 07:38 AM PST

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
๐Ÿ—Ž 198 ๐Ÿ—จ 989 ๐Ÿ 299
Site Owner

Also, this script can be modified slightly to work for reddit as well:

As well as other sites that support similar functionality.

Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 8 months ago

Edit History

• [2019-03-07 10:56 PST] August R. Garcia (8 months ago)
🕓 Posted at 07 March, 2019 10:56 AM PST

Sir, I can do you a nice SEO.

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
๐Ÿ—Ž 198 ๐Ÿ—จ 989 ๐Ÿ 299
Site Owner

Update -- Here are some additional similar functions for sharing posts on Reddit, Hacker News, Twitter, and Mastodon:

// Helper Function
function get_best_title() {
        // 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;

        return title;
}

// ***** ***** Onclick Share Functions ***** ***** //
function share_on_reddit() {
        var url   = window.location.href;
        var title = get_best_title(); 

        reddit_url = "https://www.reddit.com/submit"
                     +"?title=" + encodeURIComponent(title)
                     +"&url="   + encodeURIComponent(url  );  

        window.open(reddit_url, '_blank');
}
function share_on_hacker_news() {
        var url   = window.location.href;
        var title = get_best_title(); 

        hn_url = "https://news.ycombinator.com/submitlink"
                     +"?t=" + encodeURIComponent(title)
                     +"&u=" + encodeURIComponent(url  );  

        window.open(hn_url, '_blank');
}
function share_on_twitter() {
  var url   = window.location.href;
  var title = get_best_title(); 
  var hashtags = "#256Kilobytes";
  var author   = "@256Kilobytes"; 
  twitter_url = "https://twitter.com/intent/tweet"
       +"?status=" + encodeURIComponent(title + "\n\n" + url + "\n\n" + hashtags + " " + author);

  window.open(twitter_url, '_blank');
}
function share_on_mastodon() {
        // 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://linuxrocks.online)", default_url);
        if (instance) { 
                // Handle URL formats
                if ( !instance.startsWith("https://") && !instance.startsWith("http://") )
                        instance = "https://" + instance;  

                var url   = window.location.href;
                var title = get_best_title(); 
        
                // Handle slash
                if ( !instance.endsWith("/") )
                        instance = instance + "/"; 

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

                var hashtags = "#256Kilobytes";
                var author   = "@256Kilobytes@linuxrocks.online"; 

                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');
        }
}
Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 8 months ago 🕓 Posted at 07 March, 2019 12:39 PM PST

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.