SKILL.md
$27
Placement
Best For
Notes
After first paragraph
Most articles
Catches speed-readers; visible early
Sticky sidebar
Long-form (desktop)
Always visible; consider hiding on mobile
Below title / hero
Short posts
High visibility
End of article
All
Natural completion point; pair with CTA
Mid-article (after key insight)
Long content
Place at friction points (after surprising stat, before CTA)
Avoid: Dozens of icons; every platform when audience uses 2–3. Choose 3–5 platforms that match your audience (e.g. B2B: X, LinkedIn; B2C: X, Facebook, WhatsApp).
Share URLs (Intent Links)
Use platform share/intent URLs so users share with one click:
Platform
Share URL pattern
X (Twitter)
https://twitter.com/intent/tweet?url={url}&text={text}
https://www.linkedin.com/sharing/share-offsite/?url={url}
https://www.facebook.com/sharer/sharer.php?u={url}
https://wa.me/?text={url}%20{text}
Telegram
https://t.me/share/url?url={url}&text={text}
Encode url and text with encodeURIComponent(). Use page title or a short pre-written message for text — platform-specific prompts with pre-written messages perform ~4× better than generic icons.
Platform Brand Guidelines (Icons)
Use official brand assets. Minimum sizes and color rules:
Platform
Min size
Colors
Notes
16px
Blue #1877F2 or monochrome
No rotation, animation without permission
X (Twitter)
32px
Black or white only
Use current X logo, not deprecated bird
21px height
Blue #0A66C2 or monochrome
Use "in" bug for icons
29×29px
Black, white, or official gradient
Glyph for social icons
Source icons from official brand resource centers. Outdated or non-compliant icons reduce perceived shareability.
Design & Technical
Item
Guideline
Format
SVG preferred (scalable, small); PNG/WebP with fallback
Performance
Lightweight; avoid heavy share plugins that slow LCP
Accessibility
aria-label="Share on X"; keyboard accessible
Mobile
Touch targets ≥44×44px; consider native share API (navigator.share) on mobile
Native Share API (Mobile)
On supported browsers, navigator.share lets users share via system dialog (includes more apps). Fallback to intent links when unsupported:
if (navigator.share) {
navigator.share({ title, url, text }).catch(() => {});
} else {
window.open(shareUrl, '_blank', 'noopener');
}Output Format
- Placement recommendation for page type
- Platforms to include (3–5)
- Share URL examples with placeholders
- Icon guidelines (size, source)
- Accessibility checklist
Related Skills
- article-page-generator: Share buttons on article pages; placement after intro, end of article
- blog-page-generator: Share buttons on blog index and post cards
- open-graph: OG tags control share preview (og:image, og:title, etc.) — required for share buttons to show rich cards on Facebook, LinkedIn
- twitter-cards: Twitter Cards control X preview — required for share buttons to show rich cards when shared to X
- footer-generator: Footer has social profile links (Follow us); this skill is for share buttons (share this page)