HTML snippet for social media share icons

Estimated Reading Time: 2 min

Here’s a simple HTML snippet for social media share icons. You can customize the links to point to your specific social media profiles or sharing URLs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Share Icons</title>
<style>
.social-icons {
list-style: none;
padding: 0;
display: flex;
gap: 10px;
}
.social-icons li {
display: inline;
}
.social-icons a {
text-decoration: none;
padding: 10px;
border-radius: 5px;
background-color: #f0f0f0;
transition: background-color 0.3s;
}
.social-icons a:hover {
background-color: #ddd;
}
</style>
</head>
<body>

<ul class="social-icons">
<li><a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_URL" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/intent/tweet?url=YOUR_URL" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/sharing/share-offsite/?url=YOUR_URL" target="_blank">LinkedIn</a></li>
<li><a href="https://pinterest.com/pin/create/button/?url=YOUR_URL" target="_blank">Pinterest</a></li>
<li><a href="https://api.whatsapp.com/send?text=YOUR_URL" target="_blank">WhatsApp</a></li>
</ul>

</body>
</html>

Replace YOUR_URL with the URL you want to share. You can also change the text or style as needed.

Photo of author

Flora

HTML snippet for social media share icons

Published

Update

I am Flora, the publisher and founder of *Be-Smart*, a platform dedicated to sharing insights and inspiration for living a fulfilling life. With a strong background in the web, my goal is to empower people to genuinely recognize and celebrate admirable actions big or small in themselves and others.