Set Your Currency
 UNITED STATES |
Set as Default |
 INDIA (Default Currency) |
Set as Default |
 UNITED ARAB EMIRATES |
Set as Default |
 QATAR |
Set as Default |
| UNITED STATES |
Set as Default |
| INDIA (Default Currency) |
Set as Default |
| UNITED ARAB EMIRATES |
Set as Default |
| QATAR |
Set as Default |
html social media icon
Adding social share buttons to your website involves integrating HTML code for the specific social media platforms you want to include. Here's a basic example using HTML and inline CSS for three popular social media platforms: Facebook, Twitter, and LinkedIn. You can customize this code based on your needs and add more social media platforms as required.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website Title</title>
<style>
/* Add some basic styling for the social share buttons */
.social-buttons {
display: flex;
gap: 10px;
margin-top: 20px;
}
.social-buttons img {
width: 40px; /* Adjust the size as needed */
height: 40px; /* Adjust the size as needed */
border: 0;
}
</style>
</head>
<body>
<!-- Your website content goes here -->
<!-- Social share buttons -->
<div class="social-buttons">
<!-- Facebook Share Button -->
<a href="https://www.facebook.com/sharer/sharer.php?u=YourWebsiteURL" target="_blank">
<img src="facebook-icon.png" alt="Facebook Share">
</a>
<!-- Twitter Share Button -->
<a href="https://twitter.com/intent/tweet?url=YourWebsiteURL&text=Your%20Tweet%20Text" target="_blank">
<img src="twitter-icon.png" alt="Twitter Share">
</a>
<!-- LinkedIn Share Button -->
<a href="https://www.linkedin.com/shareArticle?url=YourWebsiteURL&title=Your%20LinkedIn%20Post%20Title" target="_blank">
<img src="linkedin-icon.png" alt="LinkedIn Share">
</a>
</div>
<!-- More social share buttons can be added similarly -->
</body>
</html>
Make sure to replace "YourWebsiteURL" with the actual URL of your website and adjust the image sources (e.g., "facebook-icon.png", "twitter-icon.png", "linkedin-icon.png") with the paths to your social media icons.
You can find social media icons on various websites, or you can create your own. Additionally, you may want to consider using official sharing APIs provided by social media platforms for a more integrated and customizable solution.
To add social share buttons to your website, you can use HTML and CSS. Here are the steps:
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add social media buttons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
/* Style all font awesome icons */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
/* Instagram */
.fa-instagram {
background: #125688;
color: white;
}
This is a simple way to add social media buttons to your website without using any external tools or plugins.
Test your knowledge with interactive quizzes.
Prepare for interviews with curated question sets.
Ask your coding-related doubts and get answers.
Earn certifications to enhance your resume.
Hands-on projects to improve your skills.
Test your knowledge with interactive quizzes.
Prepare for interviews with curated question sets.
Add your technical blogs and read technical topics.
Earn certifications to enhance your resume.
Hands-on projects to improve your skills.