Adding Share Buttons to a Blog Sounds Simple. It's Not.
I added share buttons to my blog this week. X, LinkedIn, Facebook, Reddit, and copy-link.
Five buttons. Should take an hour, maybe two. It took way longer.
Beyond X and LinkedIn
I started with just X and LinkedIn. Obvious starting point for a solopreneur blog. But in tech and education niches, the actual sharing happens on Facebook and Reddit too. So I added those.
The copy-link button was the most "designed" one. You click it, it copies the URL, and the icon swaps from a clipboard to a checkmark so you know it worked. Simple concept. Fiddly execution.
Icon Library Headaches
I used Lucide React for icons throughout the site. Lucide has a strict policy against including brand logos, so Twitter and LinkedIn icons were never available in the package. I had to use inline SVGs for those two instead of the icon component.
For the copy-link button, I grabbed the clipboard icon from Heroicons (outline, 24x24). It matched the stroke style of the other social icons well enough. The checkmark needed to be slightly different in size (20x20) to feel right at the same visual weight.
Vertical Alignment Is the Real Time Sink
The social icons and the copy-link icon sit in a flex row together. Getting them to line up took longer than anything else.
flex items-center fixed it, but only after I tried align-middle, vertical-align, and manual padding on individual icons. Each approach fixed one icon and broke another.
The clipboard icon from Heroicons and the inline SVGs for X and LinkedIn all have slightly different viewBox dimensions. When they're side by side at the same pixel size, they don't visually align. One sits high, one sits low, one looks right. CSS flex alignment handles it, but finding the right combination took experimentation.
The Copy Feedback
The component is a client component ('use client') because it uses useState for the copy feedback and navigator.clipboard.writeText().
When someone clicks copy, the clipboard icon swaps to a checkmark for two seconds, then swaps back. The checkmark needed to be the right size relative to the clipboard icon so the text label next to it doesn't jump.
Share URL Quirks
Share URLs are straightforward in theory but each platform has quirks.
X has a 280-character limit on the text parameter. LinkedIn's share URL works but doesn't allow custom prefill text anymore. Facebook's share dialog requires a valid URL that has proper OG tags or it shows a blank preview. Reddit needs either a specific subreddit or you send users to a subreddit picker.
Each share button opens a small popup window centered on screen instead of navigating away from the page. Standard pattern, but the window sizing and centering math has to be right. Too wide and it looks weird on mobile. Too narrow and the content clips.
Mobile Touch Targets
Mobile was its own thing. The share buttons need to be touch-friendly. Not just the tap target size, but the visual feedback. People need to know their tap registered before the popup appears.
On mobile, the popup approach doesn't work as well because browsers handle popup windows differently. The native Web Share API would be ideal, but browser support is inconsistent and it doesn't let you customize which platforms appear.
I kept the popup approach for desktop and made sure the tap targets were large enough for mobile. Not perfect, but good enough for now.
The Lesson
Five buttons. Icon deprecations, vertical alignment headaches, clipboard feedback, popup math, mobile touch targets. That's what "simple" turns into when you actually build it.
Nothing on the web is as simple as it looks from the outside. Every "just add share buttons" feature is a collection of small decisions that each take time to get right.
If you're building a consulting business and want help standing out, that's what I do. Get in touch.