Creating social media share buttons is one of those tasks that seem simple… until you start depending on external services like AddThis or ShareThis. In my case, after using them on several projects, I always ended up with the same feeling: too heavy, little control, and unnecessary third-party dependency.
The good news is that you don't need plugins, libraries, or external scripts to add social buttons to your web. With HTML, some CSS, and a bit of JavaScript, you can create fast, personalized, and optimized buttons with behavior identical to commercial solutions.
In this post, we will see how to create buttons to share content through social media and incorporate them into our website; it is worth remembering that there are many services that offer these types of solutions like ShareThis which allows generating buttons to share content that we can incorporate into our website with a simple copy and paste:
However, when using existing solutions, we are always limited in some way, such as the possibility of changing the interface at will, personalized icons, distribution, and also that we have to depend directly on a third party (since the sources point to another server) and the load of our site can be affected by the aforementioned among other things that in the end end up being hated, although everything has its advantages and disadvantages.
Why create your own social media share buttons
Advantages over AddThis, ShareThis and other external services
Although these platforms facilitate the work, they have clear drawbacks:
- They load external scripts from other servers
- They add unnecessary tracking
- They limit visual customization
- They affect performance and Core Web Vitals
- Total dependency on a third party
In more than one project I ended up removing them because they didn't pay off. In the end, a share button is nothing more than a well-built link.
Total control: design, performance, and privacy
By creating your own buttons:
- You decide what is loaded and when
- You use your own HTML and CSS
- You customize icons, sizes, and animations
- You avoid external requests
- You improve loading speed
And the best part: the code is simple and fully maintainable.
How social media share buttons work
Sharing URLs and GET parameters
Social networks offer specific URLs to share content.
When clicking a button, a GET request is simply sent with parameters such as:
- URL to share
- Text or title
- Hashtags (in some cases)
Generic example:
<a href="https://socialnetwork.com/share?url=URL&text=TEXT">Why a simple <a> tag is enough
There is no magic. There are no complex APIs.
A well-formed <a> tag does exactly what we need.
URL formats for sharing on each social network
This is where the magic of custom development or buttons created by ourselves comes in; as you will see, the development is very simple and in this post we will see the main social networks so that their operation is similar to the classic AddThis (clicking an icon opens a pop-up window with the content to be shared by the corresponding social network).
Social media URL formats for sharing content
Practically all self-respecting social networks offer a format that allows sharing links through a title and the accompanying URL via GET; for example:
Twitter/X
On Twitter/X we use the url and text parameters to indicate the content we want to share so that the characteristic sharing window appears as shown above.
https://x.com/share?url=[URL]&text=[TITLE]"
Facebook uses a similar scheme; in this case, the parameters are called u and title as shown below:
http://www.facebook.com/share.php?u=[URL]&title=[TITLE]
Professional network: LinkedIn
On LinkedIn, it's more of the same and the parameters are called url and title:
http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]
Although Pinterest is not a social network as such, it is also very widely used and we use it to upload images with some content; the parameter used is url:
https://www.pinterest.com/pin/find/?url=[URL]
Sharing content on WhatsApp
https://api.whatsapp.com/send?text=TEXT URL
Sharing links on Pinterest
https://www.pinterest.com/pin/find/?url=URL
Creating custom social buttons with HTML and CSS
Once the above has been explained, what remains is to create the social links with representative icons of the social networks of our preference; the following HTML and CSS achieve what was mentioned above:
<style>
:root {
--fb-color: #1877F2;
--x-color: #000000;
--in-color: #0077B5;
--wa-color: #25D366;
--btn-size: 45px;
}
.share-wrapper {
text-align: center;
font-family: system-ui, -apple-system, sans-serif;
margin: 2rem 0;
}
.share-container {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 1rem;
}
.social-btn {
width: var(--btn-size);
height: var(--btn-size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: white;
text-decoration: none;
}
.social-btn svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.social-btn:hover {
transform: translateY(-5px);
filter: brightness(1.1);
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}
/* Colores dinámicos */
.btn-fb { background-color: var(--fb-color); }
.btn-x { background-color: var(--x-color); }
.btn-in { background-color: var(--in-color); }
.btn-wa { background-color: var(--wa-color); }
h5 { color: #555; margin-bottom: 10px; }
</style>
<div class="share-wrapper">
<h5>¡Comparte este contenido!</h5>
<div class="share-container">
<a href="#" class="social-btn btn-fb" data-platform="facebook" aria-label="Compartir en Facebook">
<svg viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<a href="#" class="social-btn btn-x" data-platform="x" aria-label="Compartir en X">
<svg viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="#" class="social-btn btn-in" data-platform="linkedin" aria-label="Compartir en LinkedIn">
<svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></svg>
</a>
<a href="#" class="social-btn btn-wa" data-platform="whatsapp" aria-label="Compartir en WhatsApp">
<svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.653a11.883 11.883 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</a>
</div>
</div>We get some social buttons like the following:
Of course, now with advantages such as the ability to configure everything we want such as social media icons, HTML, CSS, optimization, and general performance.
For example, you can choose a simpler configuration:
<style>
:root {
--fb-color: #1877F2;
--x-color: #000000;
--in-color: #0077B5;
--wa-color: #25D366;
--btn-size: 45px;
}
.share-container {
display: flex;
gap: 12px;
justify-content: center;
}
.social-btn {
width: var(--btn-size);
height: var(--btn-size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: transform 0.3s ease;
}
.social-btn:hover {
transform: translateY(-5px);
}
.btn-fb { background: var(--fb-color); }
.btn-x { background: var(--x-color); }
.btn-in { background: var(--in-color); }
.btn-wa { background: var(--wa-color); }
</style>
<div class="share-wrapper">
<h5>¡Comparte este contenido!</h5>
<div class="share-container">
<a href="#" class="social-btn btn-fb" data-platform="facebook" aria-label="Compartir en Facebook">FB</a>
<a href="#" class="social-btn btn-x" data-platform="x" aria-label="Compartir en X">X</a>
<a href="#" class="social-btn btn-in" data-platform="linkedin" aria-label="Compartir en LinkedIn">IN</a>
<a href="#" class="social-btn btn-wa" data-platform="whatsapp" aria-label="Compartir en WhatsApp">WA</a>
</div>
</div>Using SVG icons to improve performance and design
Using inline SVG instead of external icons:
- Reduces HTTP requests
- Improves visual quality
- Allows changing colors via CSS
It is one of those details that make a difference in real projects.
How to open a pop-up when sharing on social media with JavaScript
If we want a pop-up to open to show the social network dialog, we can incorporate the following JavaScript:
document.addEventListener('DOMContentLoaded', () => {
const shareButtons = document.querySelectorAll('.social-btn');
const pageUrl = encodeURIComponent(window.location.href);
const pageTitle = encodeURIComponent(document.title);
shareButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const platform = this.getAttribute('data-platform');
let shareUrl = '';
switch(platform) {
case 'facebook':
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`;
break;
case 'x':
shareUrl = `https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`;
break;
case 'linkedin':
shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${pageUrl}`;
break;
case 'whatsapp':
shareUrl = `https://api.whatsapp.com/send?text=${pageTitle}%20${pageUrl}`;
break;
}
// Abrir ventana emergente
window.open(shareUrl, 'share-dialog', 'width=600,height=400');
});
});
});Controlling pop-up behavior
- Configurable size
- Without reloading the page
- Clean and familiar experience for the user
In practice, it works just like AddThis, but without external dependencies.
Essential Open Graph tags
So that when sharing your website a nice image, a title, and a description appear, don't forget to add this in the <head> of your page:
<meta property="og:title" content="Título de tu gran artículo">
<meta property="og:description" content="Una descripción breve que invite a hacer clic.">
<meta property="og:image" content="https://tusitio.com/imagen-destacada.jpg">
<meta property="og:url" content="https://tusitio.com/pagina-actual">Twitter Cards and cross-platform compatibility
<meta name="twitter:card" content="summary_large_image">Leaving our entire social experiment as follows:
Common mistakes when sharing content
Not defining an image
- Using images that are too small
- Not testing with each network's debugger
- When you take care of this, the CTR when sharing improves significantly.
Best practices and final recommendations
- Web performance and page load
- Avoid external scripts
- Use inline SVG
- Keep JS to a minimum
- Mobile compatibility and user experience
- WhatsApp works better on mobile
- Ensure adequate touch sizes
- When it makes sense to use an external solution
- I only recommend it if:
- You need integrated advanced analytics
- You don't have control over the code
- Performance is not critical
- In any other case, own code wins.
Frequently asked questions about social media share buttons
- Can buttons be created with only HTML?
- Yes, although with JavaScript you can improve the experience.
- Do they affect SEO?
- Not negatively. On the contrary, they encourage dissemination.
- Do they work on mobile?
- Yes, especially WhatsApp and X.
- Are they better than AddThis?
- In control, performance, and customization: without a doubt.
Conclusion
Creating your own social media share buttons with HTML is easier than it seems and offers clear advantages over external solutions. In my experience, once you try this approach, you never go back to depending on plugins.
Control, performance, and total customization. All with just a few lines of code.
I agree to receive announcements of interest about this Blog.
Learn how to create social media sharing buttons with HTML, CSS, and JavaScript, without plugins or external services, optimized and customizable.