JavaScript - How to Return Current URL for Share Button?

Last Updated : 26 Nov, 2024

In this article, we will learn how to create share buttons on websites, allowing users to share a post or the URL of the site on various social media platforms. We will break this down into simple steps for better understanding.

Step 1: Create the HTML Structure

First, we need to create an HTML file to display the share buttons and a simple layout on the browser.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    </style>
</head> 

<body>
    <button id="share-button">Share</button>
    
    <!-- The anchor tag for the sharing link -->
    <a href="#"></a>
  
    <script>
        // JavaScript code here
    </script>    
</body>
  
</html>

Output

Above is the HTML code and we will be writing only the JavaScript part from this point.

Step 2: Display the Current Web Page's URL

In this step, we will add the JavaScript code which will display the current web-page's URL as a link.

Here the 'window' is a global object which consists of various properties out of which location is one such property and the href property provides us the complete URL with the path and the protocol used.
But we don't need the 'https://'(protocol) so we remove it using the slice method of JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    </style>
</head> 

<body>   
    <button id="share-button">Share</button>

    <!-- The anchor tag for the sharing link -->
    <a href="#"></a>
  
    <script>
      
        // Storing the URL of the current webpage
        const URL = window.location.href.slice(7);

        const link = document.querySelector('a');
        link.textContent = URL;
        link.href = URL;

        // Displaying in the console
        console.log(URL);
    </script>    
</body>
  
</html>

Output

Step 3: Remove Protocol from URL

We don't want the URL to be displayed as soon as the browser window loads instead we want it to be displayed when we click the button. So we will add an event listener to the button and then display the URL when the button is clicked

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    </style>
</head> 

<body>  
    <button id="share-button">Share</button>
    
    <a href="#"></a>
  
    <script>
        const URL = window.location.href.slice(7);

        const link = document.querySelector('a');
        const button = document.querySelector('#share-button');

        // Adding a mouse click event listener to the button
        button.addEventListener('click', () => {
            link.textContent = URL;
            link.href = URL;
            
            // Displaying in the console
            console.log(URL);
        });
    </script>    
</body>
  
</html>

Output

Step 4: Add Social Media Sharing Links

Now the link is displayed when the button is clicked, but we don't need a link to the current page but a link that shares the current webpage on a social media platform. So we update the code as follows.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <button id="share-button">Share</button>

    <a href="#"></a>

    <script>
        const fbShare = "https://www...com/sharer/sharer.php?u=";

        // Storing the URL of the current webpage
        const URL = window.location.href.slice(7); // Removes 'http://'

        // Select elements
        const link = document.querySelector('a');
        const button = document.querySelector('#share-button');

        // Adding a click event listener to the button
        button.addEventListener('click', () => {
            // Display the current webpage link
            link.textContent = fbShare + URL;
            link.href = fbShare + URL;

            // Log in the console
            console.log(fbShare + URL);
        });
    </script>
</body>

</html>

Output

This is how we can get a sharing URL, instead of displaying the sharing URL we can actually use it within the button to directly redirect the user to the particular social media platform. Also, I have used the Facebook share URL and similar URLs are available for almost all the social media platforms and feel free to experiment with them and come up with your own share button. This post has covered all the essentials about sharing the current web-page's URL using JavaScript.