How to return current URL for a share button using JavaScript ?

In this post, we are going to learn the logic behind the share buttons displayed on the websites which can be used to share a post or the complete URL of the site on other social media platforms. We will be going through this in several steps for understanding.

Step 1: First, we need to create an HTML file that will display everything on the browser.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css" media="all">
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    </style>
</head
  
<body>
    <!-- The share button -->    
    <button id="share-button">Share</button>
      
    <!-- These line breaks are optional -->
    <br/>
    <br/>
    <br/>
      
    <!-- The anchor tag for the sharing link -->
    <a href="#"></a>
    <script type="text/javascript" charset="utf-8">
        // We will write the javascript code here
    </script>    
</body>
    
</html>

chevron_right


Output:

Result for HTML code.

Result for HTML code.

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



Step 2: 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css" media="all">
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    </style>
</head
  
<body>
    <!-- The share button -->    
    <button id="share-button">Share</button>
      
    <!-- These line breaks are optional -->
    <br/>
    <br/>
    <br/>
  
    <!-- The anchor tag for the sharing link -->
    <a href="#"></a>
    <script type="text/javascript" charset="utf-8">
        // Make sure you write this code inside the 
        // script tag of your HTML file 
  
        // Storing the URL of the current webpage
        const URL = window.location.href.slice(7);
        // We used the slice method to remove 
        // the 'http://' from the prefix 
  
        // Displaying the current webpage link
        // on the browser window 
        const link = document.querySelector('a');
        link.textContent = URL;
        link.href = URL;
  
        // Displaying in the console
        console.log(URL);
    </script>    
</body>
    
</html>

chevron_right


Output:

Result for Step: 2

Result for Step: 2

Step 3: 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css" media="all">
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    </style>
</head
  
<body>
    <!-- The share button -->    
    <button id="share-button">Share</button>
      
    <!-- These line breaks are optional -->
    <br/>
    <br/>
    <br/>
  
    <!-- The anchor tag for the sharing link -->
    <a href="#"></a>
    <script type="text/javascript" charset="utf-8">
        // Make sure you write this code inside the 
        // script tag of your HTML file 
  
        // Storing the URL of the current webpage
        const URL = window.location.href.slice(7);
        // We used the slice method to remove 
        // the 'http://' from the prefix 
  
        // Displaying the current webpage link
        // on the browser window 
        const link = document.querySelector('a');
        const button = document.querySelector('#share-button');
  
        // Adding a mouse click event listener to the button
        button.addEventListener('click', () => {
            // Displaying the current webpage link
            // on the browser window 
            link.textContent = URL;
            link.href = URL;
              
            // Displaying in the console
            console.log(URL);
        });
    </script>    
</body>
    
</html>

chevron_right


Output:

Step 4: 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css" media="all">
        /* This CSS is optional */
        #share-button {
            padding: 10px;
            font-size: 24px;
        }
    </style>
</head
  
<body>
    <!-- The share button -->    
    <button id="share-button">Share</button>
      
    <!-- These line breaks are optional -->
    <br/>
    <br/>
    <br/>
  
    <!-- The anchor tag for the sharing link -->
    <a href="#"></a>
    <script type="text/javascript" charset="utf-8">
        // Make sure you write this code inside the 
        // script tag of your HTML file 
  
        // Facebook share url
        const fbShare = "https://www.facebook.com/sharer/sharer.php?u="
  
        // Storing the URL of the current webpage
        const URL = window.location.href.slice(7);
        // We used the slice method to remove 
        // the 'http://' from the prefix 
  
        // Displaying the current webpage link
        // on the browser window 
        const link = document.querySelector('a');
        const button = document.querySelector('#share-button');
  
        // Adding a mouse click event listener to the button
        button.addEventListener('click', () => {
            // Displaying the current webpage link
            // on the browser window 
            link.textContent = fbShare+URL;
            link.href = fbShare+URL;
      
            // Displaying in the console
            console.log(fbShare+URL);
        });
    </script>    
</body>
    
</html>

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.