Skip to content

Add social share buttons to blog posts - #1258

Open
dongjiang1989 wants to merge 2 commits into
agentgateway:mainfrom
dongjiang1989:add-share-button
Open

Add social share buttons to blog posts#1258
dongjiang1989 wants to merge 2 commits into
agentgateway:mainfrom
dongjiang1989:add-share-button

Conversation

@dongjiang1989

@dongjiang1989 dongjiang1989 commented Oct 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

Add social sharing section to blog post pages with Twitter, LinkedIn, Facebook, WhatsApp, and Email share buttons.

Changes

  • Added layouts/partials/blog-share.html - Reusable share component
  • Modified layouts/blog/single.html - Integrated share component

Features

  • 5 social media platforms (Twitter/X, LinkedIn, Facebook, WhatsApp, Email)
  • Clean icon-only buttons with hover effects
  • Matches project design system (Tailwind CSS gray palette)
  • Dark mode support
  • No external dependencies (inline SVG icons)
  • Responsive design

Closes #1257

@dongjiang1989

dongjiang1989 commented Oct 10, 2026

Copy link
Copy Markdown
Contributor Author
cb48564f-538f-4d24-a054-255f97232446

@dongjiang1989
dongjiang1989 force-pushed the add-share-button branch 4 times, most recently from a29f1e5 to 70530d5 Compare October 14, 2026 01:44
kristin-kronstain-brown
kristin-kronstain-brown requested changes Oct 16, 2026
View reviewed changes

@kristin-kronstain-brown kristin-kronstain-brown left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding these! I don't mind the buttons at the bottom of the page, but should we consider putting them at the top? Whether in the banner or in the body of the blog itself, I don't know which would look better. Not required to get this PR merged, just something to consider.

Comment thread layouts/partials/blog-share.html Outdated
Comment thread layouts/partials/blog-share.html Outdated
Comment thread layouts/partials/blog-share.html Outdated
Comment thread layouts/partials/blog-share.html
Comment thread layouts/partials/blog-share.html Outdated
@dongjiang1989

dongjiang1989 commented Oct 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@kristin-kronstain-brown Thank you for the feedback!

I'd like to keep the share buttons at the bottom for a few reasons:

  1. User reading flow - Users typically want to share an article after they've finished reading it, so placing the buttons at the bottom aligns with natural reading behavior.

  2. Visual focus - Keeping the top of the page clean (banner + content) helps readers focus on the article without distraction. The share buttons at the bottom don't compete with the title or main content for attention.

  3. Consistency with other blogs - Many tech blogs (Dev.to, Hashnode, Medium) place share buttons at the bottom, which is a familiar pattern for readers.

  4. Mobile experience - On mobile, having buttons at the bottom means they're easily accessible with the thumb when the user finishes reading, without requiring scrolling back to the top.

That said, I'm open to reconsidering if the team prefers a different placement. The current implementation is flexible and can be easily moved to the banner or top of the body if needed.

Let me know if you'd like any adjustments!

@dongjiang1989
dongjiang1989 force-pushed the add-share-button branch 2 times, most recently from f43e87a to 0fd2fa9 Compare October 16, 2026 16:42
@dongjiang1989
Add social share buttons to blog posts
a199754 
- Add share section with Twitter, LinkedIn, Facebook, WhatsApp, Email icons
- Create reusable partial template layouts/partials/blog-share.html
- Integrate share component into blog single post template
- Center aligned with flexbox layout
- Unified icon size (w-6 h-6) for consistent appearance
- Consistent gap between icons (gap-4)
- Responsive design for web and mobile
- Dark mode support with dark:text-gray-* classes
- Smooth hover transition effects
- Include proper accessibility attributes (title)

Signed-off-by: dongjiang1989 <dongjiang1989@126.com>
@dongjiang1989
Fix PR review comments for blog share buttons
7415823 
1. Accessibility: Add aria-label to all links, hide SVGs from screen readers
2. Email encoding: Replace + with %20 in mailto links, handle empty description
3. Update Twitter to X platform (https://x.com/intent/post)
4. Refactor: Use range over platforms slice, support share: false front matter
5. Alignment: Use justify-start to match article left alignment

Addresses all review comments from @kristin-kronstain-brown

Signed-off-by: dongjiang1989 <dongjiang1989@126.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kristin-kronstain-brown kristin-kronstain-brown kristin-kronstain-brown requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add social share buttons to blog post pages

2 participants

@dongjiang1989 @kristin-kronstain-brown