Steam Profile Widget

A standalone Steam profile customization widget that can be easily embedded into any website or blog.

中文文档: README.md

🚀 Quick Start

Basic Usage

Download Files
- steam-profile-widget.js - Main widget file

Include in HTML

<!-- Create container -->
<div id="my-steam-profile" data-steam-id="YourSteamUsername"></div>

<!-- Include widget script -->
<script src="steam-profile-widget.js"></script>

Advanced Usage

Manual Initialization

// Manually create widget instance
const widget = new SteamProfileWidget('container-id', 'steam-username');

Multiple Widgets

<!-- You can place multiple Steam profiles on the same page -->
<div id="profile1" data-steam-id="ANGJustinl"></div>
<div id="profile2" data-steam-id="AnotherUsername"></div>

<script src="steam-profile-widget.js"></script>

📋 Configuration Options

HTML Attributes

data-steam-id: Steam username or custom URL ID (required)
id: Unique identifier for the container

Custom Steam ID

Replace the value in data-steam-id with your Steam profile URL ID:

If your Steam URL is https://steamcommunity.com/id/YourUsername/
Then use data-steam-id="YourUsername"

🎨 Style Customization

The widget uses independent CSS class names (with spw- prefix) that won't conflict with your website's styles.

Custom Colors

/* Override default colors */
.spw-profile-customization {
    --primary-color: #your-color;
    --secondary-color: #your-secondary-color;
}

Adjust Size

.steam-profile-widget {
    max-width: 600px; /* Custom width */
    margin: 10px 0;   /* Custom spacing */
}

🌐 CORS Support

The widget uses allorigins.win proxy service to handle CORS issues without additional configuration.

📱 Responsive Design

The widget automatically adapts to mobile devices, adjusting layout and font sizes on smaller screens.

⚡ Performance Features

Lightweight: Single file, no dependencies
Cache-friendly: Automatic style injection handling
Conflict-free: Uses isolated CSS class names
Graceful degradation: Shows static content on network errors

🔧 Troubleshooting

Common Issues

Widget doesn't display
- Check if container ID is correct
- Ensure Steam username exists and is public
Style conflicts
- Widget uses spw- prefixed class names to avoid conflicts
- If issues persist, check CSS specificity
Slow loading
- This is normal as data needs to be fetched from Steam
- Loading animation is displayed during fetch

📦 File Structure

steam-profile-widget/
├── steam-profile-widget.js    # Main widget file
├── widget-example.html        # Usage example
├── README.md                  # Chinese documentation
└── README-EN.md              # English documentation

🎯 Browser Compatibility

✅ Chrome 60+
✅ Firefox 55+
✅ Safari 12+
✅ Edge 79+
✅ Mobile browsers

🎮 Features

Steam-themed Design: Authentic Steam blue color scheme
Loading Animations: Cool scanning effect while loading
Hover Effects: Interactive elements with smooth transitions
ASCII Art Support: Proper display of monospace content
Customization Content: Shows Steam profile customization panels
Fallback Content: Static content when Steam data unavailable

🛠️ Technical Details

Architecture

Self-contained: All CSS is injected via JavaScript
Event-driven: Automatic initialization on DOM ready
Error handling: Graceful fallback on network failures
Memory efficient: Minimal DOM manipulation

Security

CORS proxy: Safe cross-origin requests
XSS protection: Proper HTML sanitization
No external dependencies: Reduces attack surface

📝 Examples

Simple HTML Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Steam Profile Widget Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #1b2838;
            color: white;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎮 My Steam Profile</h1>
        
        <!-- Steam Profile Widget -->
        <div id="steam-profile" data-steam-id="ANGJustinl"></div>
        
        <p>Check out my gaming achievements above!</p>
    </div>
    
    <script src="steam-profile-widget.js"></script>
</body>
</html>

Live Demo:

🎮 My Steam Profile

Steam Profile Widget will load here

Check out my gaming achievements above!

Blog Integration

<!DOCTYPE html>
<html>
<head>
    <title>My Gaming Blog</title>
    <style>
        .gaming-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px;
            border-radius: 15px;
            margin: 20px 0;
        }
        .widget-container {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }
    </style>
</head>
<body>
    <article>
        <h1>About My Gaming Setup</h1>
        <p>Here's my Steam profile with custom styling:</p>
        
        <div class="gaming-section">
            <h2>🎮 Gaming Profile</h2>
            <div class="widget-container">
                <!-- Steam Profile Widget with custom styling -->
                <div id="steam-widget" data-steam-id="YourUsername"></div>
            </div>
        </div>
        
        <p>More blog content...</p>
    </article>
    
    <script src="steam-profile-widget.js"></script>
</body>
</html>

Live Demo:

🎮 Gaming Blog Section

Portfolio Website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Portfolio</title>
    <style>
        .portfolio-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 40px 0;
        }
        .gaming-card {
            background: #171a21;
            border: 2px solid #2a475e;
            border-radius: 12px;
            padding: 25px;
            transition: transform 0.3s ease;
        }
        .gaming-card:hover {
            transform: translateY(-5px);
            border-color: #66c0f4;
        }
        @media (max-width: 768px) {
            .portfolio-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <main class="portfolio">
        <section class="about-section">
            <h1>John Doe - Full Stack Developer</h1>
            
            <div class="portfolio-grid">
                <div class="skills-card">
                    <h2>💻 Technical Skills</h2>
                    <ul>
                        <li>JavaScript, TypeScript</li>
                        <li>React, Vue.js</li>
                        <li>Node.js, Python</li>
                        <li>Game Development</li>
                    </ul>
                </div>
                
                <div class="gaming-card">
                    <h2>🎮 Gaming Experience</h2>
                    <p>When I'm not coding, I'm gaming!</p>
                    <!-- Steam Profile Widget -->
                    <div id="my-gaming-profile" data-steam-id="YourUsername"></div>
                </div>
            </div>
        </section>
    </main>

    <script src="steam-profile-widget.js"></script>
</body>
</html>

Live Demo:

💻 Technical Skills

JavaScript, TypeScript
React, Vue.js
Node.js, Python
Game Development

🎮 Gaming Experience

When I'm not coding, I'm gaming!

Steam Profile Widget

E-commerce Gaming Site

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gaming Store - About Our Team</title>
    <style>
        .team-section {
            padding: 60px 0;
            background: linear-gradient(45deg, #1e3c72, #2a5298);
        }
        .team-member {
            display: flex;
            align-items: center;
            gap: 30px;
            margin: 40px 0;
            padding: 30px;
            background: rgba(255,255,255,0.05);
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }
        .member-info {
            flex: 1;
            color: white;
        }
        .steam-profile-section {
            flex: 1;
            min-width: 300px;
        }
    </style>
</head>
<body>
    <section class="team-section">
        <div class="container">
            <h1>Meet Our Gaming Experts</h1>
            
            <div class="team-member">
                <div class="member-info">
                    <h3>Alex Johnson</h3>
                    <p>Lead Game Curator</p>
                    <p>15+ years of gaming experience, specializing in indie games and AAA titles.</p>
                </div>
                <div class="steam-profile-section">
                    <!-- Steam Profile Widget for team member -->
                    <div id="curator-profile" data-steam-id="TeamMemberUsername"></div>
                </div>
            </div>
            
            <div class="team-member">
                <div class="member-info">
                    <h3>Sarah Chen</h3>
                    <p>Community Manager</p>
                    <p>Building gaming communities and connecting players worldwide.</p>
                </div>
                <div class="steam-profile-section">
                    <!-- Another Steam Profile Widget -->
                    <div id="community-profile" data-steam-id="AnotherUsername"></div>
                </div>
            </div>
        </div>
    </section>

    <script src="steam-profile-widget.js"></script>
</body>
</html>

Live Demo:

Meet Our Gaming Experts

Alex Johnson

Lead Game Curator

15+ years of gaming experience, specializing in indie games and AAA titles.

Steam Profile Widget for Team Member

Gaming Review Site

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game Reviews by Pro Gamers</title>
    <style>
        .reviewer-card {
            border: 1px solid #ddd;
            border-radius: 15px;
            padding: 25px;
            margin: 30px 0;
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .reviewer-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(0,0,0,0.15);
        }
        .reviewer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .review-content {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <main>
        <h1>🎮 Professional Game Reviews</h1>
        
        <article class="reviewer-card">
            <div class="reviewer-header">
                <div>
                    <h2>Review: Cyberpunk 2077</h2>
                    <p>Reviewed by <strong>ProGamer2024</strong></p>
                </div>
                <div class="rating">⭐⭐⭐⭐☆</div>
            </div>
            
            <div class="review-content">
                <p>After 100+ hours in Night City, here's my detailed review...</p>
                <p><em>See my gaming credentials below:</em></p>
            </div>
            
            <!-- Reviewer's Steam Profile -->
            <div id="reviewer-steam" data-steam-id="ProGamerUsername"></div>
        </article>
        
        <article class="reviewer-card">
            <div class="reviewer-header">
                <div>
                    <h2>Review: Elden Ring</h2>
                    <p>Reviewed by <strong>SoulsVeteran</strong></p>
                </div>
                <div class="rating">⭐⭐⭐⭐⭐</div>
            </div>
            
            <div class="review-content">
                <p>FromSoftware has outdone themselves once again...</p>
                <p><em>Check my Souls game completion record:</em></p>
            </div>
            
            <!-- Another reviewer's Steam Profile -->
            <div id="souls-reviewer" data-steam-id="SoulsExpertUsername"></div>
        </article>
    </main>

    <script src="steam-profile-widget.js"></script>
</body>
</html>

Live Demo:

🎮 Professional Game Reviews

Review: Cyberpunk 2077

Reviewed by ProGamer2024

⭐⭐⭐⭐☆

After 100+ hours in Night City, here's my detailed review...

See my gaming credentials below:

Reviewer's Steam Profile Widget

📄 License

MIT License - Free to use and modify

🤝 Contributing

Issues and Pull Requests are welcome!

🔗 Links

Enjoy showcasing your Steam profile! 🎮

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
docs		docs
LICENSE		LICENSE
README-CN.md		README-CN.md
README.md		README.md
steam-profile-widget.js		steam-profile-widget.js
steam-profile.css		steam-profile.css
widget-example.html		widget-example.html

License

ANGJustinl/steam_profile_widget

Folders and files

Latest commit

History

Repository files navigation

Steam Profile Widget

🚀 Quick Start

Basic Usage

Advanced Usage

Manual Initialization

Multiple Widgets

📋 Configuration Options

HTML Attributes

Custom Steam ID

🎨 Style Customization

Custom Colors

Adjust Size

🌐 CORS Support

📱 Responsive Design

⚡ Performance Features

🔧 Troubleshooting

Common Issues

📦 File Structure

🎯 Browser Compatibility

🎮 Features

🛠️ Technical Details

Architecture

Security

📝 Examples

Simple HTML Demo

🎮 My Steam Profile

Blog Integration

🎮 Gaming Blog Section

Portfolio Website

💻 Technical Skills

🎮 Gaming Experience

E-commerce Gaming Site

Meet Our Gaming Experts

Alex Johnson

Gaming Review Site

🎮 Professional Game Reviews

Review: Cyberpunk 2077

📄 License

🤝 Contributing

🔗 Links

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages