How to return current URL for a share button using JavaScript ?
Last Updated :
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>
<button id="share-button">Share</button>
<br/>
<br/>
<br/>
<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>
<button id="share-button">Share</button>
<br/>
<br/>
<br/>
<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
// 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>
<button id="share-button">Share</button>
<br/>
<br/>
<br/>
<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
// 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>
<button id="share-button">Share</button>
<br/>
<br/>
<br/>
<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
// Storing the URL of the current webpage
const URL = window.location.href.slice(7);
// We used the slice method to remove
// 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...