Add Social Media Header

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:

1. Gather your profile information: Get your YouTube channel ID, GitHub username, LinkedIn URL, and X/​Twitter URL
2. Identify insertion point: The header should go at the top of your README, right after the main title
3. Customize the template: Replace all placeholder values with your actual profile information
4. Insert into file: Add the complete block to your README

Template

<div align="center">

[![YouTube Channel Subscribers](https://img.shields.io/​youtube/​channel/​subscribers/​YOUR_CHANNEL_ID?style=for-the-badge&logo=youtube&logoColor=white&color=red)](YOUR_YOUTUBE_URL) [![GitHub followers](https://img.shields.io/​github/​followers/​YOUR_USERNAME?style=for-the-badge&logo=github&logoColor=white)](YOUR_GITHUB_URL) [![LinkedIn Follow](https://img.shields.io/​badge/​LinkedIn-Follow-blue?style=for-the-badge&logo=linkedin&logoColor=white)](YOUR_LINKEDIN_URL) [![X Follow](https://img.shields.io/​badge/​X-Follow-black?style=for-the-badge&logo=x&logoColor=white)](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):

<div align="center">

[![YouTube Channel Subscribers](https://img.shields.io/​youtube/​channel/​subscribers/​UC140iBrEZbOtvxWsJ-Tb0lQ?style=for-the-badge&logo=youtube&logoColor=white&color=red)](https://www.youtube.com/​c/​GiselaTorres?sub_confirmation=1) [![GitHub followers](https://img.shields.io/​github/​followers/​0GiS0?style=for-the-badge&logo=github&logoColor=white)](https://github.com/​0GiS0) [![LinkedIn Follow](https://img.shields.io/​badge/​LinkedIn-Follow-blue?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/​in/​giselatorresbuitrago/) [![X Follow](https://img.shields.io/​badge/​X-Follow-black?style=for-the-badge&logo=x&logoColor=white)](https://twitter.com/​0GiS0)

</​div>

Important Notes

Why badges might not render

If you only see the <div align="center"> and not the badges:

1. GitHub might not be rendering shields.io badges: Refresh your browser
2. Internet connection required: Badge images are fetched from shields.io, so internet is needed
3. 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

1. Keep badges on one line: Don't add line breaks between badges for proper horizontal alignment
2. Keep it simple: Don't add more than 4-5 badges to avoid clutter
3. Test locally: Use GitHub's markdown preview or VS Code to verify rendering
4. Update regularly: If your follower count changes significantly, update the label if needed