Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a Share Button with different Social Handles using HTML and CSS?
In today's digital age, social media has become an essential part of our lives. Whether it's for personal or professional use, we all want to share our content with the world. That's where social sharing buttons come in handy, allowing users to quickly and easily share content on their favorite social media platforms.
In this article, we will explore how to create a share button with different social handles using HTML and CSS.
Create a Share Button With Different Social Handles
We will walk through step-by-step instructions on how to create a share button with multiple social media options, including Facebook, Twitter, LinkedIn, and more. By the end of this article, you will have the skills to create your own custom share button, making it easier for your audience to share your content across various social media platforms.
Example Html
The following example demonstrates creating share buttons for all popular social media handles.
Create a HTML file that includes a reference to an external stylesheet (style.css) and two JavaScript files (index.js and https://kit.fontawesome.com/704ff50790.js), and includes a <div> element with class share-buttons.
The <body> section contains a <div> element with a class of share-buttons, which includes several <button> elements with classes of share-button and specific social media platform names (e.g., facebook, twitter, linkedin).
Each of the buttons includes an <i> element with a class of fab (indicating a Font Awesome icon) and a specific icon name (e.g., fa-facebook-f, fa-twitter, fa-linkedin-in).
Style the share buttons using CSS.
Add a click event listener to all the share button using JavaScript.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/704ff50790.js"
crossorigin="anonymous">
</script>
<script src="index.js"></script>
</head>
<body>
<div class="share-buttons">
<button class="share-button facebook">
<i class="fab fa-facebook-f"></i>
</button>
<button class="share-button twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="share-button linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
<button class="share-button pinterest">
<i class="fab fa-pinterest"></i>
</button>
<button class="share-button reddit">
<i class="fab fa-reddit-alien"></i>
</button>
<button class="share-button whatsapp">
<i class="fab fa-whatsapp"></i>
</button>
</div>
</body>
</html>
Example CSS
Following is the CSS code of our example. Here we have created 4 rules −
The first rule .share-buttons applies display:flex and gap:10px to arrange the buttons horizontally with a gap of 10 pixels between them.
The second rule .share-button applies a set of common styles to all buttons such as border:none, border-radius:5px, color:#fff, cursor:pointer, font-size:16px and padding:8px 16px.
The subsequent rules .facebook, .twitter, .linkedin, .pinterest, .reddit, and .whatsapp define specific background colors for each button, corresponding to the respective social media platform.
Together, these rules define the appearance of a set of social media sharing buttons with consistent styles and colors.
.share-buttons {
display: flex;
gap: 10px;
}
.share-button {
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #1da1f2;
}
.linkedin {
background-color: #0077b5;
}
.pinterest {
background-color: #bd081c;
}
.reddit {
background-color: #ff4500;
}
.whatsapp {
background-color: #25d366;
}
Example JavaScript
The following code adds a click event listener to a set of share buttons, each of which represents a social media platform (Facebook, Twitter, LinkedIn, Pinterest, Reddit, WhatsApp). When a user clicks on one of these buttons, a new window opens with the corresponding share URL for the current page.
The code first selects all the share buttons on the page using the document.querySelectorAll method and saves them to a variable called shareButtons.
Then, for each share button, the code adds a click event listener using the forEach method. Within the event listener, the code gets the URL of the current page using window.location.href and gets the social media platform from the button's class name using button.classList[1].
Next, the code uses a switch statement to set the URL to share based on the social media platform. For example, if the platform is Facebook, the code sets the share URL to https://www.facebook.com/sharer/sharer.php?u= followed by the URL of the current page encoded using the encodeURIComponent method.
Finally, the code opens a new window with the share URL using the window.open method. The second parameter ('_blank') specifies that the new window should be opened in a new tab.
// Get all share buttons
const shareButtons = document.querySelectorAll('.share-button');
// Add click event listener to each button
shareButtons.forEach(button => {
button.addEventListener('click', () => {
// Get the URL of the current page
const url = window.location.href;
// Get the social media platform from the button's class name
const platform = button.classList[1];
// Set the URL to share based on the social media platform
let shareUrl;
switch (platform) {
case 'facebook':
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
break;
case 'twitter':
shareUrl = `https://twitter.com/share?url=${encodeURIComponent(url)}`;
break;
case 'linkedin':
shareUrl = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url)}`;
break;
case 'pinterest':
shareUrl = `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(url)}`;
break;
case 'reddit':
shareUrl = `https://reddit.com/submit?url=${encodeURIComponent(url)}`;
break;
case 'whatsapp':
shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`;
break;
}
// Open a new window to share the URL
window.open(shareUrl, '_blank');
});
});
Complete Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/704ff50790.js" crossorigin="anonymous"></script>
<script src="index.js"></script>
<style>
.share-buttons {
display: flex;
gap: 10px;
}
.share-button {
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 8px 16px;
}
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #1da1f2;
}
.linkedin {
background-color: #0077b5;
}
.pinterest {
background-color: #bd081c;
}
.reddit {
background-color: #ff4500;
}
.whatsapp {
background-color: #25d366;
}
</style>
<script>
// Get all share buttons
const shareButtons = document.querySelectorAll('.share-button');
// Add click event listener to each button
shareButtons.forEach(button => {
button.addEventListener('click', () => {
// Get the URL of the current page
const url = window.location.href;
// Get the social media platform from the button's class name
const platform = button.classList[1];
// Set the URL to share based on the social media platform
let shareUrl;
switch (platform) {
case 'facebook':
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
break;
case 'twitter':
shareUrl = `https://twitter.com/share?url=${encodeURIComponent(url)}`;
break;
case 'linkedin':
shareUrl = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(url)}`;
break;
case 'pinterest':
shareUrl = `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(url)}`;
break;
case 'reddit':
shareUrl = `https://reddit.com/submit?url=${encodeURIComponent(url)}`;
break;
case 'whatsapp':
shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`;
break;
}
// Open a new window to share the URL
window.open(shareUrl, '_blank');
});
});
</script>
</head>
<body>
<div class="share-buttons">
<button class="share-button facebook">
<i class="fab fa-facebook-f"></i>
</button>
<button class="share-button twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="share-button linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
<button class="share-button pinterest">
<i class="fab fa-pinterest"></i>
</button>
<button class="share-button reddit">
<i class="fab fa-reddit-alien"></i>
</button>
<button class="share-button whatsapp">
<i class="fab fa-whatsapp"></i>
</button>
</div>
</body>
</html>
Conclusion
In conclusion, adding social media share buttons to a website or web application is a simple way to increase engagement and drive traffic to your content. By using HTML and CSS, you can create visually appealing buttons that allow visitors to easily share your content on various social media platforms. Additionally, by including JavaScript, you can make the buttons functional and dynamically generate share URLs based on the current page's URL.
In today's digital age, social media plays a vital role in content distribution and engagement. As such, incorporating share buttons into your website or web application is a must. With the steps outlined in this article, you can create share buttons with different social handles using HTML, CSS, and JavaScript, and make it easier for your audience to share your content on their preferred social media platforms.
8K+ Views
