Frontend Social Buttons without JavaScript
ow to embed some social sharing buttons in a website without Javascript or any third party code
If you want to make a website easy to share, you actually don’t need to require external javascript SDKs (including privacy violations) at all. All the major services do have a static HTTP endpoint you can link to. This example includes facebook, twitter and whatsapp:
<p class="sharing-buttons">
<a
target="_blank"
class="facebook"
href="//www.facebook.com/sharer/sharer.php?u={{url}}"
>Facebook</a
>
<a
target="_blank"
class="twitter"
href="//twitter.com/share?url={{url}}&text="
>Twitter</a
>
<a target="_blank" class="whatsapp" href="//wa.me/?text={{url}}">Whatsapp</a>
</p>
just replace {{url}}
with the current page url you want to get shared!
.sharing-buttons {
text-align: center;
a {
color: white;
text-decoration: none;
padding: 5px 10px;
display: inline-block;
}
a:hover {
color: white;
cursor: pointer;
}
.twitter {
background: #41b7d8;
}
.facebook {
background: #3b5997;
}
.whatsapp {
background: #25d366;
}
}
This SCSS snippet will make them look usable right away, but you can customize as you like.
Linked Technologies
What it's made of
HTML
The backbone of the web. Master it to craft structured, accessible content for any online project, from simple sites to complex applications!
Linked Categories
Where it's useful
Frontend Development
Explore the latest tools and techniques for crafting responsive designs, enhancing user interfaces, and optimizing web performance.
SEO
Make your digital content discoverable and digestable by web crawlers. Ensure that visitors have a straightforward experience.