name
add-social-media-header
description
Add professional social media headers to README files and documentation to enhance engagement and visibility across LinkedIn, YouTube, GitHub, and X (Twitter). Use when you need to add or update social media badges with clickable links to your profiles.
Add Social Media Header
Add a professional social media header with styled badges and links to enhance your content's visibility and engagement.
How to use
When asked to add a social media header to your README or documentation:
Gather your profile information
: Get your YouTube channel ID, GitHub username, LinkedIn URL, and X/Twitter URL
Identify insertion point
: The header should go at the top of your README, right after the main title
Customize the template
: Replace all placeholder values with your actual profile information
Insert into file
: Add the complete block to your README
Template
<
div
align
<div align="center">
and not the badges:
GitHub might not be rendering shields.io badges
: Refresh your browser
Internet connection required
: Badge images are fetched from shields.io, so internet is needed
Network blocked
: Some corporate networks block external image sources
Troubleshooting
If badges don't appear:
Verify your YouTube channel ID is correct
Check that all URLs are complete and valid (start with https://)
Ensure all badges are on a single line
(this is important for proper alignment)
Try accessing the badge URLs directly in your browser:
YouTube:
https://img.shields.io/youtube/channel/subscribers/YOUR_CHANNEL_ID?style=for-the-badge&logo=youtube
Make sure there are blank lines between the
<div>
tag and the badges line
Customization options
Style variations
style=for-the-badge
- Modern, rectangular badges (recommended)
style=flat
- Flat design
style=plastic
- Glossy appearance
style=flat-square
- Square badges
Colors
Add custom colors to badges using the
color=
parameter (hex without #):
YouTube:
color=FF0000
(red)
GitHub:
color=000000
(black) or
color=FFFFFF
(white)
LinkedIn:
color=0077b5
(official LinkedIn blue)
X:
color=000000
(black)
Badge text
Update the badge labels (e.g., "Follow", "Subscribe", "Connect") to match your preference.
Pro Tips
Keep badges on one line
: Don't add line breaks between badges for proper horizontal alignment
Keep it simple
: Don't add more than 4-5 badges to avoid clutter
Test locally
: Use GitHub's markdown preview or VS Code to verify rendering
Update regularly
: If your follower count changes significantly, update the label if needed
