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

15 Oct, 2020
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
<!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>
Output:
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
<!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>
Output:
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
<!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>
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
<!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>
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.
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)