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
markdown
<div align="center"> [](YOUR_YOUTUBE_URL) [](YOUR_GITHUB_URL) [](YOUR_LINKEDIN_URL) [](YOUR_X_URL) </div>
Important: Keep all badges on a single line (no line breaks between them) for proper horizontal alignment.
Replace the following placeholders with your actual information:
- •
YOUR_CHANNEL_ID- Your YouTube channel ID (find in YouTube channel settings, usually looks like: UC140iBrEZbOtvxWsJ-Tb0lQ) - •
YOUR_USERNAME- Your GitHub username (e.g., 0GiS0) - •
YOUR_YOUTUBE_URL- Full URL to your YouTube channel (e.g., https://www.youtube.com/c/YourChannelName) - •
YOUR_GITHUB_URL- Full URL to your GitHub profile (e.g., https://github.com/YourUsername) - •
YOUR_LINKEDIN_URL- Full URL to your LinkedIn profile (e.g., https://www.linkedin.com/in/yourprofile/) - •
YOUR_X_URL- Full URL to your X/Twitter profile (e.g., https://twitter.com/YourHandle)
Example with Real URLs
Here's a complete example with actual URLs that you can adapt (all badges on one line):
markdown
<div align="center"> [](https://www.youtube.com/c/GiselaTorres?sub_confirmation=1) [](https://github.com/0GiS0) [](https://www.linkedin.com/in/giselatorresbuitrago/) [](https://twitter.com/0GiS0) </div>
Important Notes
Why badges might not render
If you only see the <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
- •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) orcolor=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