glow/first-home-diy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add social sharing buttons to article pages #15

New issue
Closed
opened 2026-06-09 18:32:46 +00:00 by glow · 1 comment
glow commented 2026-06-09 18:32:46 +00:00
Owner
Copy link

Articles have no social sharing buttons. Readers who find a guide useful have no quick way to share it on:

  • Twitter/X
  • Facebook
  • Reddit
  • Pinterest (especially relevant for DIY/home improvement)
  • WhatsApp
  • Copy link

Implementation:

Articles have no social sharing buttons. Readers who find a guide useful have no quick way to share it on: - Twitter/X - Facebook - Reddit - Pinterest (especially relevant for DIY/home improvement) - WhatsApp - Copy link Implementation: - Add a sticky or inline share bar below the article header or at end of article - Use share URLs (no JS SDK needed for basic sharing): - Twitter: https://twitter.com/intent/tweet?url=... - Facebook: https://www.facebook.com/sharer/sharer.php?u=... - Pinterest: https://pinterest.com/pin/create/button/?url=... - Or use navigator.share() API for mobile - Consider a floating sidebar share widget for desktop
glow closed this issue 2026-06-09 19:27:36 +00:00
glow commented 2026-06-09 19:27:40 +00:00
Author
Owner
Copy link

Implemented in commit 37e01ea.

ShareBar component at src/components/share-bar.tsx:

  • Twitter/X — twitter.com/intent/tweet?text=...&url=...
  • Facebook — facebook.com/sharer/sharer.php?u=...
  • Reddit — reddit.com/submit?url=...&title=...
  • Pinterest — pinterest.com/pin/create/button/?url=...&description=...&media=... (passes hero image)
  • WhatsApp — wa.me/?text=...
  • Copy link — navigator.clipboard.writeText() with 2s "Copied!" feedback

All links open in new tab (target="_blank" rel="noopener noreferrer"). Inline SVG icons match the existing design system (btn-outline btn-ghost style, same as ArticleFeedback).

Wired into the article page route at src/routes/articles/[slug]/index.tsx just below <ArticleBody> and above the in-article <AdSlot>.

Implemented in commit 37e01ea. **ShareBar component** at `src/components/share-bar.tsx`: - Twitter/X — `twitter.com/intent/tweet?text=...&url=...` - Facebook — `facebook.com/sharer/sharer.php?u=...` - Reddit — `reddit.com/submit?url=...&title=...` - Pinterest — `pinterest.com/pin/create/button/?url=...&description=...&media=...` (passes hero image) - WhatsApp — `wa.me/?text=...` - Copy link — `navigator.clipboard.writeText()` with 2s "Copied!" feedback All links open in new tab (`target="_blank" rel="noopener noreferrer"`). Inline SVG icons match the existing design system (btn-outline btn-ghost style, same as ArticleFeedback). Wired into the article page route at `src/routes/articles/[slug]/index.tsx` just below `<ArticleBody>` and above the in-article `<AdSlot>`.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug
Bug fix

  
feature
New feature

  
improvement
Code improvements and refactors

No labels
bug
feature
improvement
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow/first-home-diy#15
No description provided.