Adding "share to Facebook," "share to WhatsApp," and similar buttons is simpler than it might seem — every major platform's basic share action is just a specially formatted URL, with no SDK, API key, or JavaScript library genuinely required.
Sharing to Facebook
Share on Facebook
urlencode() is essential here — the post's URL is being embedded as a query parameter value, and without properly encoding it, special characters in the URL (like & or ?) would break the sharer link's own query string structure.
Sharing to WhatsApp
Share on WhatsApp
The wa.me link format works identically on both desktop (opening WhatsApp Web) and mobile (opening the native app directly) — no separate mobile-specific implementation is needed for this particular platform.
Sharing to X (formerly Twitter)
Share on X
Sharing to LinkedIn
Share on LinkedIn
Sharing via email
Share via Email
Building a reusable Blade component for all platforms at once
@props(['url', 'title'])
Following the Blade component pattern covered elsewhere on this site, extracting this into one reusable component avoids duplicating the same set of share links across every page that needs them — any future platform addition or link-format change only needs to happen in one file.
Why target="_blank" needs rel="noopener" alongside it
rel="noopener" prevents the newly opened share page from gaining a JavaScript reference back to the original page via window.opener — a genuine (if narrow) security consideration for any link using target="_blank" to an external, untrusted domain, not just these specific share links.
Why an npm share-button package is rarely necessary
Since every platform's share action is fundamentally just a specially formatted link, a third-party JavaScript package for "social share buttons" is usually unnecessary added weight — the plain-link approach shown above covers the vast majority of real use cases with zero JavaScript dependency at all.